Cloudfrare Tunnel

NISHIO Hirokazu [Translate]

Cloudfrare Tunnel
ngrok的なやつ

ngrok的なことを2025年にやる場合のおすすめは？
西尾さん、2025年版の「ngrok的にローカルを外に出す」選択肢を用途別にまとめました（どれも実運用でよく使われています）。
まず結論（用途別おすすめ）
ゼロ設定で安定・無料枠重視 → Cloudflare Tunnel (cloudflared)。常時公開やSSH/任意TCPもOK、アウトバウンド接続だけで安全。Zero Trust 認証も載せやすい。
...
もう少し補足するとローカルで動いている開発中のサービスにスマホからアクセスしたい、Cloudfrare Tunnel興味ある
Cloudflare Tunnel（旧 Argo Tunnel）を使うと、あなたのローカル環境で動いている開発中サービスをスマホや他端末から安全にアクセスできるようになります。


Macでinstall
$ brew install cloudflare/cloudflare/cloudflared

開発サーバが http://localhost:5173/ で動いている
$ cloudflared tunnel --url http://localhost:5173/
>Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):
> aaa-bbb-ccc-ddd.trycloudflare.com

スマホでアクセス
>Blocked request. This host ("aaa-bbb-ccc-ddd.trycloudflare.com") is not allowed.
>To allow this host, add "refer-hearts-throwing-phenomenon.trycloudflare.com" to  server.allowedHosts  in vite.config.js.
Cloudflareトンネル経由でアクセスしているようですね。Viteの設定でこのホストを許可する必要があります。
→見れた
しかしいまどきフロントエンドからAPIを叩くからそれもトンネルする必要がある

API_BASE_PATHに書いたりとかめんどくさい
とりあえず無理やり2つトンネルしたけど、王道はnginxで一つのドメインに束ねてそれをトンネルする方法だね
無理やりだけどiPhoneから使うことができた

"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]

(C)NISHIO Hirokazu / Converted from [Scrapbox] at 11/23/2025, 4:46:35 PM[Edit]

Related Pages