コンテンツにスキップ
個人開発者のための Cloudflare CLI 完全攻略ガイド

第8章: cloudflared でローカル環境を安全公開（実践チュートリアル）

個人開発で Stripe Webhook、LINE Bot、GitHub Actions、スマートフォンの実機テストを行う際、ngrok 等の有料プランや時間制限に悩まされた経験はありませんか？ cloudflared（Cloudflare Tunnel） を使えば、完全無料・無制限・高セキュリティ・独自ドメイン対応 でローカル環境を公開できます。

本チュートリアルのゴール

  1. Quick Tunnel（即時公開）:
    • アカウント設定すら不要で10秒でローカルポートを世界へ公開
  2. Named Tunnel（固定ドメイン永続トンネル）:
    • cloudflared tunnel create による永続トンネル作成
    • dev.your-domain.com へのDNSルーティング自動設定
    • 設定ファイル（config.yml）による複数ポート振り分け
【トンネルの仕組み】
[ あなたのMac/PC ] (ポート 3000)
       ↓ (アウトバウンド通信のみで接続)
[ Cloudflare エッジネットワーク ]
       ↓
[ 世界中のユーザー / Webhook ] (https://dev.your-domain.com)
※ ルーターのポート開放（Port Forwarding）は一切不要！

Part 1: Quick Tunnel（今すぐ10秒で公開）

アカウントの認証やドメイン設定を一切行わずに、手元で動いているWebサーバーを即座に公開する手法です。

1. cloudflared のインストール

Terminal window
# macOS (Homebrew)
brew install cloudflared


# Linux
sudo apt-get install cloudflared

2. ローカルサーバーを立ち上げておく

（例: ポート 3000 で Next.js や Vite が動作している状態）

3. ワンライナーで公開

Terminal window
cloudflared tunnel --url http://localhost:3000

ターミナルに以下のような出力が表示されます。

+--------------------------------------------------------------------------------------------+
|  Your quick Tunnel has been created! Visit it at:                                          |
|  https://silent-night-xxxx.trycloudflare.com                                               |
+--------------------------------------------------------------------------------------------+

この trycloudflare.com のURLにブラウザやスマホからアクセスすると、手元の localhost:3000 の画面が表示されます。 Webhookテストが終わったら、ターミナルで Ctrl + C を押すだけで安全に通信が切断されます。

Part 2: Named Tunnel（独自ドメインで永続運用）

「毎回ランダムURLが変わるとWebhookの管理画面で再設定するのが面倒」という場合は、固定のサブドメインを割り当てられる Named Tunnel を作成します。

Step 1: Cloudflareアカウントへログイン

Terminal window
cloudflared tunnel login

ブラウザが立ち上がり、認可画面が表示されます。ご自身のCloudflare管理下にあるゾーン（ドメイン）を選択して「認可」します。

Step 2: 永続トンネルの作成

Terminal window
cloudflared tunnel create my-dev-tunnel

出力例:

Tunnel credentials written to /Users/.../.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json.
Created tunnel my-dev-tunnel with id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

トンネルID（UUID）と認証情報ファイルが作成されます。

Step 3: DNSレコードの自動ルーティング登録

CloudflareのDNSへ、このトンネルへ繋ぐサブドメインを1コマンドで登録します。

Terminal window
# 例: dev.my-saas.com でトンネルに繋げる場合
cloudflared tunnel route dns my-dev-tunnel dev.my-saas.com

CloudflareのDNSダッシュボードを見ると、dev.my-saas.com のCNAMEレコードがトンネル宛てに自動追加されていることが確認できます。

Step 4: 設定ファイル（config.yml）の作成

~/.cloudflared/config.yml を作成し、ローカルのどのポートにルーティングするかを記述します。

~/.cloudflared/config.yml
tunnel: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx # ステップ2で出力されたTunnel ID
credentials-file: /Users/your-username/.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json


ingress:
  # フロントエンド（React / Next.js）
  - hostname: dev.my-saas.com
    service: http://localhost:3000


  # バックエンドAPI（Hono / Express）
  - hostname: api-dev.my-saas.com
    service: http://localhost:8787


  # 一致しないリクエストは404
  - service: http_status:404

Step 5: トンネルの起動

Terminal window
cloudflared tunnel run my-dev-tunnel

これだけで、世界中どこからでも https://dev.my-saas.com にアクセスすると、安全に自宅のMac上の開発サーバーへ通信が届くようになります。

バックグラウンド常駐サービス化（Mac / Linux）

PC起動時に自動でトンネルを動かしたい場合は、サービスとして登録します。

Terminal window
# システムサービスとしてインストール
sudo cloudflared service install


# サービスの開始
sudo systemctl start cloudflared  # Linux
sudo launchctl start com.cloudflare.cloudflared # macOS

まとめ

  • Quick Tunnel: アカウント不要、検証や一時的なスマホ確認に最適。
  • Named Tunnel: 固定の独自ドメインで、Webhookや自宅サーバーを安全に公開。
  • ポート開放ゼロ: 外向きの暗号化コネクションしか張らないため、ルーターに穴を開けるセキュリティリスクが皆無。

次章（第9章）では、このトンネルに対してGoogleログインやGitHubログインの認証壁を設置する Zero Trust（Cloudflare Access） の設定に進みます。

💡 用語解説コラム

[!NOTE] ポート開放 (Port Forwarding)
ルーターの設定で外部からの通信をローカルPCへ通す危険な設定。Cloudflare Tunnelは「外向きの暗号化トンネル」を内側から張るため、ルーターのポートを一切開けずに世界公開できます。

[!NOTE] リバースプロキシ (Reverse Proxy)
クライアントとWebサーバーの間に立ち、リクエストを中継するサーバー。負荷分散、SSL暗号化、セキュリティ保護を一元的に行います。