Cloudflare Tunnel でローカルの React アプリをインターネットに公開する

tunnel には向き先となる稼働中のアプリが必要です。ここでは Vite で React アプリを素早く作成します。dev server は既定の port 5173 で動きます。別 port で動くアプリが既にある場合は、その port を以降の手順で使います。

1. Node.js が入ったマシンでターミナルを開きます。
2. 下のコマンドで Vite の React アプリを作成し、依存関係をインストールします。
3. npm run dev を実行して dev server を起動します。
4. ラボ中は dev server を起動したままにします。

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

npm run dev

インターネットに公開する前に、ローカルで正しく動くことを確認します。この画面は、ラボ最後に公開アドレス経由で再度目にすることになります。

1. ブラウザで http://localhost:5173 を開きます。
2. 既定の React ページに Get started の見出しと Count is 0 ボタンが表示されることを確認します。
3. Count is 0 を押して、静的なページではなく実際に動作していることを確認します。

Cloudflare は tunnel を dashboard の Networking 配下で管理します。後から tunnel の接続状態を確認する場所でもあります。

1. Cloudflare Dashboard にサインインします。
2. 左メニューで Networking を開き、Tunnels を選びます。
3. Get started with Cloudflare Tunnel の画面で Create Tunnel を押します。

Create a Tunnel 画面は非常にシンプルで、名前を付けて作成するだけです。この段階では connector の種類を選びません。cloudflared connector のインストールは直後の手順で行います。

1. Tunnel name に分かりやすい名前（例: react-tunnel）を入力します。
2. Create Tunnel を押します。

Setup Environment では、選んだ OS に応じたインストール手順と tunnel の token が表示されます。token のすぐ上に Security Notice があります。token はアカウントへのアクセス権を持つため、必ず秘密にしてください。

1. Operating System でマシンの OS（例: Windows）を選びます。
2. Architecture で 64-bit または 32-bit を選びます。
3. cloudflared-windows-amd64.msi のリンクからインストーラーをダウンロードし、実行します。
4. macOS/Linux/Docker の場合は、その選択で表示されるコマンドに従います。

service install コマンドは cloudflared を Windows service として登録し、token でこのマシンを作成した tunnel に紐付けます。service を作るため管理者権限が必要です。

1. Command Prompt を管理者として開きます。
2. dashboard の Run the following command のコマンドをそのままコピーします（token が含まれています）。
3. Command Prompt に貼り付けて実行します。コマンドの形は下記のとおりです。
4. ログに Agent service for cloudflared installed successfully が出ることを確認します。

cloudflared.exe service install <YOUR_TUNNEL_TOKEN>

Connection Status は最初 Waiting for your Tunnel to connect... と No connection detected yet を表示します。インストールコマンドを実行すると数秒で handshake が完了し、ページを再読み込みせずに状態が変わります。

1. tunnel のページを開いている dashboard のタブに戻ります。
2. Connection Status が Tunnel connected successfully に変わるのを待ちます。
3. Continue を押してセットアップを完了します。

Tunnels 一覧は後から健全性を確認する場所です。Healthy は connector が Cloudflare への接続を維持している状態、Replicas はこの tunnel で動いている connector の数を示します。

1. Networking → Tunnels を再度開きます。
2. 一覧から react-tunnel の行を探します。
3. Status が Healthy、Replicas が 1 であることを確認します。
4. Routes 列がまだ No routes であることに注目します。次の手順で設定します。

route は tunnel に入ってきた traffic の転送先を決める設定です。route がなければ Healthy な tunnel でも誰にも応答できません。

1. tunnel 名 react-tunnel を押して詳細ページを開きます。
2. Routes タブを選びます。
3. 右上の Add route を押します。

route には 4 種類あります。Published application はローカルアプリを public hostname でインターネットに公開する種類で、本ラボの目的に合致します。残りの 3 種類（Private hostname、Private CIDR、Workers VPC）は内部アクセス用で、公開アドレスは作られません。

1. Add a route ダイアログで Published application のカードを選びます。

この手順で、公開アドレス（自分の domain のサブドメイン）をローカルで動くアプリに紐付けます。Service URL はマシン上の cloudflared が呼び出す先なので、公開アドレスではなく localhost を指定します。

1. Subdomain に react-tunnel を入力します。
2. Domain で自分の domain を選びます（スクリーンショットは devtest.uk）。
3. Full hostname が react-tunnel.devtest.uk になっていることを確認します。
4. Service URL に http://localhost:5173（手順 1 の dev server の port）を入力します。
5. Path は空のまま Add route を押します。

Cloudflare は hostname の DNS record を自動作成するため、DNS タブを開く必要はありません。record は tunnel を指す CNAME で、これによりマシンに公開 IP が不要になります。

1. Route added successfully のメッセージを確認します。
2. Type が Published application、Hostname が react-tunnel.devtest.uk であることを確認します。
3. DNS record created の行に Type: CNAME があることを確認します。
4. メッセージを閉じます。

この時点で公開アドレスを開くと、多くの場合 Blocked request. This host is not allowed. という白い画面になります。これは tunnel の問題ではありません。tunnel は request をマシンまで届けていますが、Vite の dev server は Host が localhost の request しか受け付けず、DNS rebinding 攻撃を防ぐため未知の hostname を拒否します。

1. ブラウザで https://react-tunnel.devtest.uk を開きます。
2. Blocked request. This host ("react-tunnel.devtest.uk") is not allowed が出たら、その下のヒント行を読みます。
3. Vite が報告している hostname を正確に控えます。次の手順で登録します。

Vite では server.allowedHosts で受け付ける hostname を宣言できます。保護機能を丸ごと無効化するのではなく、tunnel の hostname だけを追加するのが最も安全な対処です。

1. my-react-app フォルダの vite.config.js を開きます。
2. 下記のように server.allowedHosts に自分の tunnel hostname を追加します。
3. ファイルを保存すると、Vite が dev server を自動再起動します。
4. 反映されない場合は Ctrl+C で停止し、npm run dev を再実行します。

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ['react-tunnel.devtest.uk'],
  },
})

ブラウザ → Cloudflare → tunnel → マシン上の cloudflared → port 5173 の dev server という経路全体を確認する手順です。HTTPS 証明書は Cloudflare 側が用意するため、自分で管理するものはありません。

1. https://react-tunnel.devtest.uk を再読み込みします。
2. localhost:5173 と同じ React ページが表示されることを確認します。
3. アドレスバーが https で、証明書の警告が出ないことを確認します。
4. モバイル回線のスマートフォンから開き、実際に公開されていることを確認します。

テスト中にすぐ共有したいだけなら、Quick Tunnel が 1 コマンドで公開 URL を作ってくれます。tunnel の作成も domain も不要です。URL は trycloudflare.com 上のランダムな値で、あくまで一時的なものです。

1. ローカルアプリを port 5173 で起動したままにします。
2. 別のターミナルを開き、下のコマンドを実行します。
3. cloudflared が https://<ランダム>.trycloudflare.com 形式の URL を出力します。
4. Vite に再度ブロックされる場合は、その trycloudflare.com の hostname を allowedHosts に追加します。
5. URL を開いて確認し、終わったら Ctrl+C で停止します。

cloudflared tunnel --url http://localhost:5173

使い終わったら tunnel と connector を削除し、マシンへの経路を残さないようにします。

1. tunnel の Routes タブで、作成した react-tunnel の route を削除します。
2. Tunnels 一覧で react-tunnel を削除します。
3. マシン側で cloudflared service uninstall を実行します（または cloudflared パッケージをアンインストール）。
4. React の dev server を停止します（ターミナルで Ctrl+C）。