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

🚀 はじめに

石原「おい！あの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 ダウンロードページ

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

---

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

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

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

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

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

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

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

石原「画面がグチャグチャじゃねぇかコラ！CSSどうなってんだ！」
俺「旦那！.env の URL、今すぐ修正します！」

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など）

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;

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

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（クロスオリジン）制約によるものです。

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

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

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

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

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

簡単に言うと、

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

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

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

終