Cloudflare Tunnel 開発環境セットアップ

構成図

flowchart TB
    client["Mac / iPhone"]

    subgraph Cloudflare
        waf["WAF + Access 認証"]
        tunnel["Cloudflare Tunnel"]
    end

    subgraph Docker["Docker (tunnel-net)"]
        cloudflared["cloudflared"]
        nginx["nginx"]
    end

    subgraph Host["ホスト: 開発サーバー"]
        app1["localhost:3000"]
        app2["localhost:5173"]
        app3["localhost:8080"]
    end

    client -->|HTTPS| waf
    waf --> tunnel
    tunnel --> cloudflared
    cloudflared --> nginx

    nginx -->|"app1.ryuki-sasaki.com"| app1
    nginx -->|"app2.ryuki-sasaki.com"| app2
    nginx -->|"app3.ryuki-sasaki.com"| app3

Loading

---

1. 前提条件

• Docker Desktop がインストール済み
• Cloudflare アカウントを持っている
• ドメインが Cloudflare の DNS に登録済み

---

2. Cloudflare 側の設定

2.1 Tunnel の作成

1. Cloudflare Zero Trust Dashboard にログイン
2. Networks → Tunnels → Create a tunnel
3. Tunnel type: Cloudflared を選択
4. Tunnel 名を入力（例: dev-tunnel）
5. 表示される TUNNEL_TOKEN をコピー

2.2 Public Hostname の設定

Tunnel の設定画面で、各プロジェクトのホスト名を追加:

Subdomain	Domain	Service Type	URL
app1	ryuki-sasaki.com	HTTP	nginx:80
app2	ryuki-sasaki.com	HTTP	nginx:80
app3	ryuki-sasaki.com	HTTP	nginx:80

すべてのサブドメインの Service URL は nginx:80（Docker ネットワーク内の nginx コンテナ）

2.3 Cloudflare Access の設定（認証）

1. Access → Applications → Add an application
2. Self-hosted を選択
3. 設定:
   • Application name: Dev Apps
   • Session Duration: 任意（例: 24 hours）
   • Application domain: *.ryuki-sasaki.com（またはサブドメインごとに個別設定）
4. Policy を追加:
   • Policy name: Allow me
   • Action: Allow
   • Include rule:
     • Emails: 自分のメールアドレスを入力
     • または Login Methods: Google / GitHub を選択
5. Save

これにより、アクセス時に認証画面が表示され、許可されたユーザーのみ閲覧可能になる

---

3. ローカルの設定

3.1 環境変数の設定

cd ~/documents/tunnel
cp .env.example .env

.env を編集し、コピーした TUNNEL_TOKEN を設定:

TUNNEL_TOKEN=eyJhIjoixxxxxxxxx...

3.2 ドメイン名の変更

nginx/default.conf の server_name は app1.* のようなワイルドカードになっているため、 ドメインに関係なく動作する。変更不要。

---

4. 起動・停止

起動

cd ~/documents/tunnel
docker compose up -d

状態確認

docker compose ps
docker compose logs -f          # 全コンテナのログ
docker compose logs -f cloudflared  # cloudflared のみ
docker compose logs -f nginx        # nginx のみ

停止

docker compose down

---

5. プロジェクトの追加

例: app4.ryuki-sasaki.com → localhost:4000 を追加する場合

Step 1: nginx 設定を追加

nginx/default.conf に以下の server ブロックを追加:

server {
    listen 80;
    server_name app4.*;

    include /etc/nginx/conf.d/security.inc;

    location / {
        proxy_pass http://host.docker.internal:4000;
        include /etc/nginx/conf.d/proxy.inc;
    }
}

Step 2: Cloudflare Dashboard でホスト名を追加

Tunnels → 対象 Tunnel → Public Hostname → Add a public hostname:

• Subdomain: app4
• Domain: ryuki-sasaki.com
• Service Type: HTTP
• URL: nginx:80

Step 3: cloudflared/config.yml を更新（ドキュメント用）

リファレンスとしてエントリを追加。

Step 4: nginx を再起動

docker compose restart nginx

---

6. プロジェクトの削除

1. nginx/default.conf から該当の server ブロックを削除
2. Cloudflare Dashboard から該当の Public Hostname を削除
3. docker compose restart nginx

---

7. トラブルシューティング

Tunnel が接続されない

docker compose logs cloudflared

• TUNNEL_TOKEN が正しいか確認
• Docker ネットワークが正常か確認: docker network ls

アプリにアクセスできない

1. ローカルの開発サーバーが起動しているか確認
2. nginx のログを確認: docker compose logs nginx
3. ホストからのアクセスを確認: curl http://localhost:3000

HMR（ホットリロード）が動かない

• Vite の場合、vite.config.ts で以下を設定:

export default defineConfig({
  server: {
    hmr: {
      // Cloudflare Tunnel 経由の場合
      clientPort: 443,
      protocol: 'wss',
    },
  },
})

• Next.js / Webpack の場合は通常設定不要（WebSocket は nginx 経由で通る）

WSL2 環境での注意

Windows + WSL2 の場合、開発サーバーは 0.0.0.0 でリッスンする必要がある:

# Vite の場合
vite --host 0.0.0.0

# Next.js の場合
next dev -H 0.0.0.0

---

8. セキュリティについて

この構成では以下のレイヤーで保護されている:

1. Cloudflare Access: Google/GitHub 認証で自分だけがアクセス可能
2. Cloudflare WAF: 基本的な攻撃を自動ブロック
3. nginx セキュリティヘッダ: X-Frame-Options, X-Content-Type-Options 等
4. 機密パスブロック: .env, .git, node_modules へのアクセスを 403 で拒否
5. Docker ネットワーク分離: cloudflared と nginx のみが通信
6. デフォルト拒否: 未定義のサブドメインは 444 で切断