📖

Cloudflare QuickTunnelsを使って無料でテスト用のローカルサーバーを公開してみたメモ

に公開
Cloudflare
Cloudflare Tunnel
quicktunnels
tech

概要

Cloudflare Tunnelを使うと、下記のように外部へ自分がローカルで実行しているWebサービスをトンネル経由で外部に公開することができる。
普通に使うとドメインの取得など料金がかかる。
Quick Tunnelsの機能を使うとドメイン不要で無料のトンネルを利用することができる。開発用の機能なので制限があるが、お試しする分には十分に思えた。
少しハマったので備忘録を残す。

環境

  • Windows 11 Home 25H2

準備

cloudflaredのダウンロード

これはDownloadの手順に従って問題なく導入できた。
Powershell(ターミナル(管理者)で下記を実行。

winget install --id Cloudflare.cloudflared

実施

ここで少しハマった。
結論から言うと、viteでローカルサーバを立てるときにはvite.config.tsに追加設定が必要で、angularでローカルサーバーを立てるときにはcloudflaredのコマンドにオプションの追加が必要だった。

viteの場合

まず、QuickTunnelを作成する。

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

起動後、トンネル用のURLが発行されるのでこれを控えておく。

2025-11-09T04:32:07Z INF +--------------------------------------------------------------------------------------------+
2025-11-09T04:32:07Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2025-11-09T04:32:07Z INF |  https://xxx-xxx-xxx.trycloudflare.com                               |
2025-11-09T04:32:07Z INF +--------------------------------------------------------------------------------------------+

起動時の下記エラーは無視してもトンネルを使うことができたのでいったん無視する。

ERR Cannot determine default origin certificate path. No file cert.pem in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp]. You need to specify the origin certificate path by specifying the origincert option in the configuration file, or set TUNNEL_ORIGIN_CERT environment variable originCertPath=

次に、viteの設定を追加する。server.allowedHostsに控えておいたURLのドメインを追加。

vite.config.ts
 export default defineConfig({
+   server: {
+     allowedHosts: ['xxx-xxx-xxx.trycloudflare.com'],
+   },
});

この状態で、viteの開発サーバを起動する。

npm run dev

起動したら、
https://xxx-xxx-xxx.trycloudflare.com にアクセス。これで、外部端末から確認できる。

angularの場合

--http-host-headerオプションで実行

cloudflared tunnel --url http://localhost:4200  --http-host-header localhost:4200

angularのサーバーを起動

npm run start

viteの場合と同様に、
https://xxx-xxx-xxx.trycloudflare.com にアクセス。これで、外部端末から確認できる。

無料で使える理由

下記が理由の模様

Cloudflare がこのサービスを無料で提供しているのはなぜですか?

  • Cloudflare Tunnel（およびArgo Smart Routing）の速度とセキュリティの向上を、より多くのユーザーに体験していただきたいと考えています。TryCloudflareでテストしていただき、本番サイトへの導入をご検討いただければ幸いです。
  • Cloudflareの機能をご利用いただくには、これまでドメインを所有し、そのドメインのDNSをCloudflareのネームサーバーに設定し、DNSレコードを設定する必要がありました。今後は、こうした煩わしさなく、より多くの製品をトライアルでご利用いただけるようにしたいと考えています。
  • TryCloudflareのSLAや稼働時間を保証するものではありません。これらの無料トンネルで、Cloudflare Tunnelの新機能や改善点をテストする予定です。これにより、本番環境のお客様に展開する前に、テスト用の接続群を確保できます。無料トンネルはテストと開発を目的としており、本番環境のウェブサイトの展開にはご利用いただけません。

We want more users to experience the speed and security improvements of Cloudflare Tunnel (and Argo Smart Routing). We hope you test it with TryCloudflare and decide to add it to your production sites.
Cloudflare's features historically require you to own a domain, set that domain's DNS to Cloudflare's nameservers, and configure its DNS records before you can begin to use any services. We hope to make more and more of our products available to trial without that burden.
We don't guarantee any SLA or uptime of TryCloudflare - we plan to test new Cloudflare Tunnel features and improvements on these free tunnels. This provides us with a group of connections to test before we deploy to production customers. Free tunnels are meant to be used for testing and development, not for deploying a production website.

ハマりログ

viteの場合

  • viteの開発者モードで実行 npm run dev
  • トンネルの作成
cloudflared tunnel --url http://localhost:5173

下記のようなURLが表示されるので、そこにブラウザでアクセス。

2025-11-09T04:32:07Z INF +--------------------------------------------------------------------------------------------+
2025-11-09T04:32:07Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2025-11-09T04:32:07Z INF |  https://xxx-xxx-xxx.trycloudflare.com                               |
2025-11-09T04:32:07Z INF +--------------------------------------------------------------------------------------------+

下記のエラーがでた。viteの設定が足りていない模様。

Blocked request. This host ("xxx-xxx-xxx.trycloudflare.com") is not allowed.
To allow this host, add "xxx-xxx-xxx.trycloudflare.com" to `server.allowedHosts` in vite.config.js.
vite.config.ts
 export default defineConfig({
+   server: {
+     allowedHosts: ['xxx-xxx-xxx.trycloudflare.com'],
+   },
});

設定変更後、npm run devを再度行い、アクセスしたところ表示されることを確認した。

また、cloudflaredを起動したときに下記エラーがコンソールに表示されるが、これは無視してもトンネル自体は動作した。

ERR Cannot determine default origin certificate path. No file cert.pem in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp]. You need to specify the origin certificate path by specifying the origincert option in the configuration file, or set TUNNEL_ORIGIN_CERT environment variable originCertPath=

angularの場合

ブラウザでアクセスすると、下記のエラーがでた。

Invalid Host Header

参考記事によると、下記のオプションを付ければいいとある。

cloudflared tunnel --url http://localhost:4200  --http-host-header localhost:4200

参考

Cloudflare Tunnel
Quick Tunnels

Discussion