ponshu-room-lite/docs/CLOUDFLARE_TUNNEL_SETUP.md

# Cloudflare Tunnel セットアップガイド

## 概要
Tailscale Funnelの不安定性を解決するため、Cloudflare Tunnelを使用してSynology上のサービスを安全に公開します。

## メリット
- ✅ 完全無料（Cloudflare無料プラン）
- ✅ 99.99%稼働率（Cloudflareのグローバルインフラ）
- ✅ 自動HTTPS（SSL証明書不要）
- ✅ DDoS保護付き
- ✅ Synology再起動時も自動再接続
- ✅ 知人に展開しても安心の安定性

## 前提条件
1. Cloudflareアカウント（無料）
2. ドメイン名（既存ドメインまたはCloudflare Pagesの無料ドメイン）
3. Synology Docker環境

---

## Step 1: Cloudflareアカウントとドメイン設定

### 1-1. Cloudflareアカウント作成
https://dash.cloudflare.com/sign-up

### 1-2. ドメイン追加
既存ドメインをCloudflareに追加、またはCloudflare Pagesで無料ドメイン取得

**既存ドメインの場合:**
1. Cloudflareダッシュボード → 「Add a Site」
2. ドメイン入力（例: example.com）
3. ネームサーバーをCloudflareに変更（ドメイン registrarで設定）

**無料ドメインの場合:**
1. Cloudflare Pages → 「Create a project」
2. 適当なプロジェクト作成 → `xxx.pages.dev` が発行される
3. このサブドメインを使用可能

---

## Step 2: Cloudflare Tunnel作成

### 2-1. Zero Trustダッシュボードへ移動
https://one.dash.cloudflare.com/

### 2-2. トンネル作成
1. 左メニュー → **「Access」** → **「Tunnels」**
2. 「Create a tunnel」をクリック
3. トンネル名を入力（例: `posimai-synology`）
4. 「Save tunnel」

### 2-3. トークン取得
トンネル作成後、**トンネルトークン**が表示されます（後で使用）

```
eyJhIjoiNzQ5YmJhMGVhZjU5NDhhNWFkZGM3MTk3YTcxNTRmOGQiLCJ0IjoiOGE5YzEyMzQtNTY3OC05MGFiLWNkZWYtMTIzNDU2Nzg5MGFiIiwicyI6Ik5UQTBPVEl4TXpRdE5qY3lNUzAwTmpkbExXRTBNRFF0WkRJNU1qWTRNREkyWWpFMSJ9
```

このトークンをメモ（次のステップで使用）

---

## Step 3: Synology Dockerでトンネル起動

### 3-1. SSH接続
```bash
ssh admin@192.168.x.x
```

### 3-2. Dockerコンテナ起動
```bash
sudo docker run -d \
  --name cloudflared-tunnel \
  --restart=unless-stopped \
  cloudflare/cloudflared:latest tunnel \
  --no-autoupdate run \
  --token eyJhIjoiNzQ5YmJhMGVhZjU5NDhhNWFkZGM3MTk3YTcxNTRmOGQiLCJ0IjoiOGE5YzEyMzQtNTY3OC05MGFiLWNkZWYtMTIzNDU2Nzg5MGFiIiwicyI6Ik5UQTBPVEl4TXpRdE5qY3lNUzAwTmpkbExXRTBNRFF0WkRJNU1qWTRNREkyWWpFMSJ9
```

**注意:** `--token` の後ろに先ほどメモしたトークンを貼り付け

### 3-3. 起動確認
```bash
sudo docker ps | grep cloudflared
```

以下のように表示されればOK:
```
CONTAINER ID   IMAGE                          STATUS
abc123def456   cloudflare/cloudflared:latest  Up 2 minutes
```

---

## Step 4: Public Hostname設定（サービス公開）

### 4-1. Cloudflare Zero Trustダッシュボードに戻る
https://one.dash.cloudflare.com/ → **「Tunnels」** → 先ほど作成したトンネルをクリック

### 4-2. Public Hostnamesタブ → 「Add a public hostname」

#### 例1: Posimai Brain API
| 項目 | 設定値 |
|------|--------|
| Subdomain | `posimai-brain` |
| Domain | `example.com`（あなたのドメイン） |
| Path | （空欄） |
| Type | `HTTP` |
| URL | `localhost:8080`（Synology上のPosimai Brain APIポート） |

→ アクセス先: `https://posimai-brain.example.com`

#### 例2: Gitea
| 項目 | 設定値 |
|------|--------|
| Subdomain | `gitea` |
| Domain | `example.com` |
| Path | （空欄） |
| Type | `HTTP` |
| URL | `localhost:3000` |

→ アクセス先: `https://gitea.example.com`

#### 例3: Posimai API（Flask）
| 項目 | 設定値 |
|------|--------|
| Subdomain | `posimai-api` |
| Domain | `example.com` |
| Path | （空欄） |
| Type | `HTTP` |
| URL | `localhost:5000` |

→ アクセス先: `https://posimai-api.example.com`

### 4-3. 保存して完了
「Save hostname」をクリック

---

## Step 5: 動作確認

### 5-1. ブラウザでアクセス
```
https://posimai-brain.example.com/health
```

正常にレスポンスが返ればOK！

### 5-2. Posimai Brain UIのAPI URLを変更

#### 修正前:
```javascript
const SYNOLOGY_API = 'https://posimai-lab.tail72e846.ts.net/brain/api';
```

#### 修正後:
```javascript
const SYNOLOGY_API = 'https://posimai-brain.example.com';
```

### 5-3. Vercel再デプロイ
```bash
cd /c/Users/maita/posimai-project/posimai-brain
vercel --prod
```

---

## Step 6: 複数サービスの公開（オプション）

同じトンネルで複数サービスを公開可能:

| サービス | URL | Synologyポート |
|---------|-----|---------------|
| Posimai Brain API | `https://posimai-brain.example.com` | `localhost:8080` |
| Gitea | `https://gitea.example.com` | `localhost:3000` |
| Posimai API (Flask) | `https://posimai-api.example.com` | `localhost:5000` |
| Ponshu Room Lite AI Proxy | `https://ponshu-ai.example.com` | `localhost:8000` |

すべて同じトンネルで公開可能（追加コストなし）

---

## トラブルシューティング

### Q1. トンネルが起動しない
```bash
# ログ確認
sudo docker logs cloudflared-tunnel

# 再起動
sudo docker restart cloudflared-tunnel
```

### Q2. 502 Bad Gateway
- Synology上のサービスが起動しているか確認
- ポート番号が正しいか確認（`localhost:8080` など）

### Q3. SSL証明書エラー
- Cloudflareが自動でHTTPS証明書を発行するため、特に設定不要
- ドメインのDNSがCloudflareを向いているか確認

---

## Tailscale Funnelからの移行手順

### 移行前の確認
```bash
# 現在のTailscale Funnel設定を確認
tailscale funnel status
```

### 移行手順
1. Cloudflare Tunnel設定完了
2. Posimai Brain UIのAPI URL変更（上記参照）
3. Vercel再デプロイ
4. 動作確認後、Tailscale Funnelを停止
   ```bash
   tailscale funnel off
   ```

### ロールバック方法
万が一問題があれば、元のTailscale Funnel設定に戻せます:
```bash
tailscale funnel on 8080
```

---

## まとめ

### メリット
- ✅ Synology再起動時も自動再接続（`--restart=unless-stopped`）
- ✅ 無料で複数サービス公開可能
- ✅ Cloudflareの高速CDN経由でアクセス
- ✅ DDoS保護、WAF（Web Application Firewall）付き
- ✅ 知人に展開しても安心の安定性

### デメリット
- Cloudflareアカウント設定が必要（初回のみ1時間程度）
- ドメイン設定が必要（既存ドメインまたは無料ドメイン）

### 次のステップ
1. Cloudflareアカウント作成
2. トンネルトークン取得
3. Synology Dockerで起動
4. 動作確認
5. Posimai Brain UI修正 & 再デプロイ

不明点があればサポートします！