「あﾞ？Laravel12のテストサーバー無ぇだとコラァ！」と大友組の石原さんに切れられたけどCloudflare Tunnel で一瞬で解決してみせた話

![DYO8JJxWAAI_i1m.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/8d0cf76e-48c3-4139-9f57-4127af7f2d5f.jpeg)


## 🚀 はじめに

> **石原**「おい！あのLaravelのアプリ、客に見せたいんだよ！テストサーバーどうなってんだ！」
> **俺**「…へい、旦那。ローカルにはあるんですが、その、テストサーバーがまだ…」
> **石原**「あﾞ？ふざけんなコラァ！いつまで待たせるんだよ！」
> **俺**「し、しかし！Cloudflare Tunnelってのを使えば、今すぐ外部から見れるように！」

こんな**鉄火場みたいな状況**を乗り切るには、「Cloudflare Tunnel」しかねぇんだよ！
Renderだの、面倒なサーバー契約だの、そんなもんクソ喰らえだ。**今すぐ、誰でもアニキのLaravelを拝める方法**を、俺、命懸けで説明させてもらいます！

---

## 🛠 前提条件

> **石原**「テメェ、言い訳すんなよ！必要なもんは揃ってんだろうな！」
> **俺**「へい！Laravel 12のJetstream、Inertia、Vue、Vite…全部キッチリ準備してやす！」

- Windows 11 Pro
- Laravel 12 + Jetstream
- Inertia.js + Vue 3
- Vite使用
- `php artisan serve` / `npm run dev` でローカル確認済み

---

## 🔪 ステップ1：Cloudflare Tunnel を叩き込む

> **石原**「トンネルだと？一体何企んでやがる！」
> **俺**「旦那！こいつをLaravelの足元に…！」

Cloudflare Tunnel のクライアントをダウンロード。

🔗 [Cloudflare Tunnel ダウンロードページ](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/)

Windows → 64-bit版 → ダウンロードしたら、Laravelプロジェクトフォルダに `cloudflared.exe` を配置。

---

## 🌐 ステップ2：アニキのLaravelを外の連中に見せつける

> **石原**「手ぇ間取らせんじゃねぇぞ！URL出せ！」
> **俺**「こ、このコマンドで…！」

```powershell
./cloudflared.exe tunnel --url http://localhost:8000

```

![PowerShell.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/88dcbd9a-15fa-4e75-a88a-d49cf1185971.png)

するとこんな感じのURLが発行されます：

```
https://your-unique-subdomain.trycloudflare.com
```

このURLを他の人に送れば即アクセスOK！


## ステップ3：.env のURL系を書き換え

> **石原**「画面がグチャグチャじゃねぇかコラ！CSSどうなってんだ！」
> **俺**「旦那！.env の URL、今すぐ修正します！」
```powershell
APP_ENV=production
APP_URL=https://your-unique-subdomain.trycloudflare.com
VITE_APP_URL=https://your-unique-subdomain.trycloudflare.com
```
HTTPS強制は以下を追加：
```app/Providers/AppServiceProvider.php
use Illuminate\Support\Facades\URL;


    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {

        if (config('app.env') === 'production') {
            URL::forceScheme('https'); // ← HTTPS強制
        }
    }
```
> **石原**「ほう、今度はちゃんと見えるじゃねぇか。次、しくじったら承知しねぇぞ」

## 🔥 ステップ4：邪魔な虫（CSRF・CORSエラー）を叩き潰す

> **石原**「ログインできねぇじゃねぇかコラ！ナメてんのか！」
> **俺**「旦那！CORSの野郎が…！すぐに始末します！」

axios 設定（resources/js/bootstrap.jsなど）

```powershell
import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.baseURL = import.meta.env.VITE_APP_URL;
axios.defaults.withCredentials = true;
```


![Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/d29fc8f2-9900-461b-8d70-7fba6538bc12.png)

この辺の設定が無いとこんなエラーメッセージが出ます

```
Access to script at 'http://[::1]:5173/...'
from origin 'https://nikon-speakers-trailers-particles.trycloudflare.com'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

このエラーは、Viteの開発サーバー（localhost:5173）とCloudflare Tunnel経由のURLhttp://nikon-speakers-trailers-particles.trycloudflare.com）のオリジンが違うために発生しているCORS（クロスオリジン）制約によるものです。

![Google Chrome_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/529e4ac7-46e3-4e01-940e-fdcd718fd132.png)

この辺を設定すると無事にviteに繋がりcloudflareで外部公開出来ました。

これは、Vite のアジト（localhost:5173）と Cloudflare の縄張り（`http://nikon-speakers-trailers-particles.trycloudflare.com`）の出所が違うために起こる、CORS（クロスオリジン）っちゅう揉め事だ。

この辺をキッチリ片付けとけば、Vite ともスムーズに繋がって、Cloudflare で表のシマにも公開できる。

## 💀 CORS エラーとは？（シノギを守るための用心棒）

> **石原**「CORSだと？一体何が邪魔してやがる！」
> **俺**「へい、旦那。外のモンが勝手にウチのモンに手ぇ出せないようにする、見張り番みたいなもんです」

簡単に言うと、

> サイトA（例：CloudflareのURL）から
> サイトB（例：Viteサーバー）へアクセス
> サイトBが「テメェ、どこのモンだ！」とシャットアウトする

これはブラウザのセキュリティ機構。
信頼されたオリジン間でしか通信させないようにする仕組みです。

> **石原**「つまり、許可したモン以外は通さねぇってコトか。徹底的にやれ」
> **俺**「承知いたしました！」

**終**