251 lines
6.7 KiB
Markdown
251 lines
6.7 KiB
Markdown
# 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修正 & 再デプロイ
|
||
|
||
不明点があればサポートします！
|