Cloudflare Tunnelでローカルホストを安全に公開する

すべての開発者がこのようなシナリオに直面します。localhost:3000で動作する素晴らしいものを構築し、今度は世界中のクライアントに見せたり、サードパーティサービスからのWebhookをテストしたりする必要があります。従来のポートフォワーディングは、ファイアウォールにセキュリティホールを開き、IPアドレスを公開し、複雑なルーター設定が必要です。動的IPはさらに状況を悪化させます。ルーターを再起動すると、デモリンクが壊れてしまいます。

Cloudflare Tunnel:モダンなローカルホスト公開

Cloudflare Tunnelは、インバウンドポートを開くことなく、ローカル開発サーバーとCloudflareのグローバルネットワーク間に安全な接続を作成します。アプリケーションは、Cloudflareのセキュリティインフラストラクチャによって保護されたカスタムドメインでHTTPS経由でアクセス可能になります。

パブリックサーバーを必要とする従来のリバースプロキシ設定とは異なり、Cloudflare Tunnelはcloudflaredデーモンを介してアウトバウンド専用の接続を使用します。これは、ルーター設定がゼロ、自動SSL証明書、攻撃対象領域が公開されないことを意味します。

Cloudflare Tunnelの仕組み

Cloudflare Tunnelを、localhostとCloudflareのZero Trustネットワークを接続する安全なパイプと考えてください。cloudflaredクライアントは、Cloudflareのエッジサーバーへの暗号化されたアウトバウンド接続を確立し、そのトンネルを介して受信リクエストをローカルアプリケーションにリバースプロキシします。

トラフィックは次のように流れます:

1. 訪問者がhttps://demo.yourdomain.comをリクエスト
2. Cloudflareのエッジネットワークがリクエストを受信
3. リクエストは暗号化されたトンネルを通じてcloudflaredデーモンに送信
4. デーモンがローカルアプリ(例:localhost:3000)に転送
5. レスポンスが同じ安全な経路を通じて戻る

クイックセットアップ: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でアクセス可能になります。

ドメインなしでのクイックテスト

ドメイン設定なしで迅速にプロトタイピングする場合:

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オプションから始めて、クライアントプレゼンテーション用にカスタムドメインに移行してください。ローカル開発環境は、デプロイされたアプリケーションと同じように共有可能になりました。

よくある質問

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.