Cloudflare Tunnelでローカルホストを安全に公開する
  すべての開発者がこのようなシナリオに直面します。localhost:3000で動作する素晴らしいものを構築し、今度は世界中のクライアントに見せたり、サードパーティサービスからのWebhookをテストしたりする必要があります。従来のポートフォワーディングは、ファイアウォールにセキュリティホールを開き、IPアドレスを公開し、複雑なルーター設定が必要です。動的IPはさらに状況を悪化させます。ルーターを再起動すると、デモリンクが壊れてしまいます。
重要なポイント
- Cloudflare Tunnelは、インバウンドポートを開いたりIPアドレスを公開したりすることなく、安全な接続を作成します
 - 自動SSL証明書とDDoS保護により、最小限の設定でセットアップできます
 - ステージング環境にデプロイすることなく、クライアントデモ、Webhookテスト、モバイル開発に最適です
 - クイックテスト用の一時URLと無料プランでのカスタムドメインをサポート(高度なサブドメインや証明書オプションには有料プランが必要な場合があります)
 
Cloudflare Tunnel:モダンなローカルホスト公開
Cloudflare Tunnelは、インバウンドポートを開くことなく、ローカル開発サーバーとCloudflareのグローバルネットワーク間に安全な接続を作成します。アプリケーションは、Cloudflareのセキュリティインフラストラクチャによって保護されたカスタムドメインでHTTPS経由でアクセス可能になります。
パブリックサーバーを必要とする従来のリバースプロキシ設定とは異なり、Cloudflare Tunnelはcloudflaredデーモンを介してアウトバウンド専用の接続を使用します。これは、ルーター設定がゼロ、自動SSL証明書、攻撃対象領域が公開されないことを意味します。
Cloudflare Tunnelの仕組み
Cloudflare Tunnelを、localhostとCloudflareのZero Trustネットワークを接続する安全なパイプと考えてください。cloudflaredクライアントは、Cloudflareのエッジサーバーへの暗号化されたアウトバウンド接続を確立し、そのトンネルを介して受信リクエストをローカルアプリケーションにリバースプロキシします。
トラフィックは次のように流れます:
- 訪問者が
https://demo.yourdomain.comをリクエスト - Cloudflareのエッジネットワークがリクエストを受信
 - リクエストは暗号化されたトンネルを通じて
cloudflaredデーモンに送信 - デーモンがローカルアプリ(例:
localhost:3000)に転送 - レスポンスが同じ安全な経路を通じて戻る
 
クイックセットアップ:Cloudflaredのインストールと設定
ステップ1:Cloudflaredのインストール
Cloudflareの公式ページからダウンロード:
macOS:
brew install cloudflared
Linux:
Cloudflare Package Repository ↗経由でcloudflaredをダウンロードしてインストールできます。
または、上記のリンクから最新リリースを直接ダウンロードしてください。
Windows:
ダウンロードページから.msiインストーラーをダウンロードします。
ステップ2:Cloudflareで認証
cloudflared tunnel login
これによりブラウザが開き、認証が行われます。ドメインを選択すると、Cloudflareが認証情報をローカルに保存します。
ステップ3:トンネルの作成
cloudflared tunnel create dev-tunnel
これにより、一意のトンネルIDと認証情報ファイルが~/.cloudflared/に生成されます。
ステップ4:ルーティングの設定
~/.cloudflared/config.ymlを作成:
tunnel: YOUR_TUNNEL_ID
credentials-file: /home/user/.cloudflared/YOUR_TUNNEL_ID.json
ingress:
  - hostname: demo.yourdomain.com
    service: http://localhost:3000
  - service: http_status:404
ステップ5:DNSのルーティング
cloudflared tunnel route dns dev-tunnel demo.yourdomain.com
これにより、サブドメインをトンネルに向けるCNAMEレコードが作成されます。
ステップ6:トンネルの起動
cloudflared tunnel run dev-tunnel
これで、ローカルアプリケーションがCloudflareのエッジネットワークを介した自動HTTPS暗号化により、https://demo.yourdomain.comでアクセス可能になります。
Discover how at OpenReplay.com.
ドメインなしでのクイックテスト
ドメイン設定なしで迅速にプロトタイピングする場合:
cloudflared tunnel --url http://localhost:3000
これにより、クイックデモやWebhookテストに最適なhttps://random-words.trycloudflare.comのような一時URLが生成されます。
ポートフォワーディングに対するセキュリティ上の利点
開放ポートなし: 従来のポートフォワーディングはファイアウォールに穴を開けます。Cloudflare Tunnelはアウトバウンド専用接続でセキュリティを維持します。
オリジンIPの非表示: 実際のIPアドレスは非公開のままです。攻撃者はホームネットワークを直接標的にできません。
組み込みのDDoS保護: すべてのトラフィックはCloudflareのネットワークを経由し、悪意のあるリクエストを自動的にフィルタリングします。
Zero Trust統合: Cloudflare Accessで認証を追加し、アプリケーションに到達する前にログインを要求できます。
Webアプリテストの一般的なユースケース
- クライアントデモ: ステージング環境にデプロイせずに進行中の作業を共有
 - Webhook開発: ローカルコードに対してStripe、GitHub、SlackのWebhookをテスト
 - モバイルテスト: スマートフォンやタブレットからローカル開発サーバーにアクセス
 - チームコラボレーション: リモート開発者がローカル環境にアクセスできるようにする
 - API開発: サードパーティ統合テスト用にローカルAPIを公開
 
Cloudflaredをサービスとして実行
再起動後も存続する永続的なトンネルの場合:
Linux/macOS:
sudo cloudflared service install
sudo systemctl start cloudflared  # Linux
sudo launchctl start com.cloudflare.cloudflared  # macOS
Windows:
cloudflared service install
セキュリティ上の理由から古いバージョンは定期的に非推奨になるため、常にcloudflaredを最新バージョンに更新してください(cloudflared update)。
まとめ
Cloudflare Tunnelは、ローカル開発の共有をセキュリティの悪夢から簡単なコマンドに変えます。ポートフォワーディング、動的DNSサービス、自己署名証明書の警告はもう必要ありません。localhostはインターネット上の第一級市民になります。安全にアクセス可能で、プロフェッショナルに提示され、エンタープライズグレードのインフラストラクチャによって保護されます。
テストにはtrycloudflare.comオプションから始めて、クライアントプレゼンテーション用にカスタムドメインに移行してください。ローカル開発環境は、デプロイされたアプリケーションと同じように共有可能になりました。
よくある質問
はい、Cloudflare Tunnelは本番デプロイメントに使用できます。多くのチームがサーバーを直接公開することなく、オンプレミスアプリケーションをインターネットに接続するために使用しています。開発ユースケースと同じセキュリティとパフォーマンスの利点を提供します。
接続が復元されると、トンネルは自動的に再接続されます。Cloudflaredは永続的な接続を維持し、ネットワークの中断を適切に処理します。再接続後もトンネルURLは同じままです。
無料アカウントには、開発や小規模な本番ワークロードに適した寛大な制限があります。厳密な帯域幅制限はありませんが、過度の使用には、より良いパフォーマンスとサポートのために有料プランへのアップグレードが必要になる場合があります。
各トンネルには、Cloudflareアカウントに紐付けられた一意の認証情報が必要です。チームコラボレーションの場合は、開発者ごとに個別のトンネルを作成するか、Cloudflare Accessを使用して適切な認証で共有トンネルアクセスを管理してください。
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.