370 lines
8.7 KiB
Markdown
370 lines
8.7 KiB
Markdown
# Ponshu Room 配布ページ - デプロイガイド
|
||
|
||
**作成日**: 2026-02-23
|
||
**対象**: Vercel配布ページのセットアップ
|
||
|
||
---
|
||
|
||
## 🎯 **目的**
|
||
|
||
日本酒アプリの4つのAPK(Maita/Eiji × Lite/Pro)を、美しい配布ページ経由でダウンロード可能にする。
|
||
|
||
---
|
||
|
||
## 📂 **ファイル構成**
|
||
|
||
### **配布ページ** (`web/download/`)
|
||
|
||
```
|
||
web/download/
|
||
├── index.html # 旧バージョン (v1.0.12)
|
||
├── index_v2.html # 新バージョン (v1.0.16) ← 今回作成
|
||
├── style.css # スタイルシート (共通)
|
||
└── DEPLOYMENT_GUIDE.md # このガイド
|
||
```
|
||
|
||
### **APKファイル** (`build/apk_releases/2026-02-23_13-17-01/`)
|
||
|
||
```
|
||
build/apk_releases/2026-02-23_13-17-01/
|
||
├── ponshu_room_lite_maita.apk (90MB)
|
||
├── ponshu_room_lite_eiji.apk (90MB)
|
||
├── ponshu_room_pro_maita.apk (90MB)
|
||
├── ponshu_room_pro_eiji.apk (90MB)
|
||
└── README.md
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 **デプロイ方法**
|
||
|
||
### **Option A: Synology File Station + Vercel (推奨)**
|
||
|
||
APKは大容量(90MB×4)なので、Synologyでホスティングし、Vercelは配布ページのみ。
|
||
|
||
#### **Step 1: SynologyにAPKを配置**
|
||
|
||
```bash
|
||
# ローカルPCから Synology へ転送
|
||
scp -r build/apk_releases/2026-02-23_13-17-01/ \
|
||
admin@synology.local:/volume1/web/ponshu/apks/
|
||
|
||
# または Synology File Station の Web UI でアップロード
|
||
# ディレクトリ: /volume1/web/ponshu/apks/2026-02-23_13-17-01/
|
||
```
|
||
|
||
**Synology File Station設定**:
|
||
1. File Station を開く
|
||
2. `/volume1/web/ponshu/apks/` を作成
|
||
3. APKファイルをアップロード
|
||
4. 右クリック → 「共有リンクを作成」
|
||
5. 公開URLを取得 (例: `https://your-nas.synology.me/sharing/xxxxx`)
|
||
|
||
#### **Step 2: Tailscale Funnel or DDNS設定**
|
||
|
||
**Tailscale Funnel (推奨)**:
|
||
```bash
|
||
# Synology SSH で実行
|
||
tailscale funnel on 443
|
||
# アクセス先: https://YOUR-TAILSCALE-NAME.ts.net/ponshu/apks/
|
||
```
|
||
|
||
**または Synology DDNS**:
|
||
- Control Panel → External Access → DDNS
|
||
- プロバイダー: Synology
|
||
- ホスト名: `your-nas.synology.me`
|
||
- SSL証明書設定
|
||
|
||
#### **Step 3: index_v2.html のURL更新**
|
||
|
||
[index_v2.html](./index_v2.html) の18行目を編集:
|
||
|
||
```javascript
|
||
// 変更前
|
||
const APK_BASE_URL = 'https://YOUR_SYNOLOGY_OR_VERCEL_URL/apks/2026-02-23_13-17-01';
|
||
|
||
// 変更後 (Tailscale Funnel)
|
||
const APK_BASE_URL = 'https://YOUR-TAILSCALE-NAME.ts.net/ponshu/apks/2026-02-23_13-17-01';
|
||
|
||
// または (Synology DDNS)
|
||
const APK_BASE_URL = 'https://your-nas.synology.me/ponshu/apks/2026-02-23_13-17-01';
|
||
```
|
||
|
||
#### **Step 4: Vercelにデプロイ**
|
||
|
||
```bash
|
||
# web/downloadディレクトリに移動
|
||
cd web/download
|
||
|
||
# vercel.jsonを作成 (既に存在する場合はスキップ)
|
||
cat > vercel.json << 'EOF'
|
||
{
|
||
"buildCommand": "echo 'Static files'",
|
||
"outputDirectory": ".",
|
||
"framework": null
|
||
}
|
||
EOF
|
||
|
||
# index_v2.html を index.html にリネーム
|
||
mv index.html index_old.html
|
||
mv index_v2.html index.html
|
||
|
||
# Vercel CLI でデプロイ
|
||
vercel --prod
|
||
|
||
# または Vercel Dashboard から GitHub連携
|
||
```
|
||
|
||
**Vercel Dashboard経由**:
|
||
1. https://vercel.com/dashboard
|
||
2. "Add New Project"
|
||
3. GitHub リポジトリを選択
|
||
4. Root Directory: `web/download`
|
||
5. Deploy
|
||
|
||
---
|
||
|
||
### **Option B: Vercel単独 (APKも含める)**
|
||
|
||
Vercelの無料プランはファイルサイズ制限があるため、**非推奨**ですが可能です。
|
||
|
||
```bash
|
||
# web/download ディレクトリ構成
|
||
web/download/
|
||
├── index.html
|
||
├── style.css
|
||
└── apks/
|
||
└── 2026-02-23_13-17-01/
|
||
├── ponshu_room_lite_maita.apk
|
||
├── ponshu_room_lite_eiji.apk
|
||
├── ponshu_room_pro_maita.apk
|
||
└── ponshu_room_pro_eiji.apk
|
||
|
||
# .vercelignore を作成 (不要ファイル除外)
|
||
cat > .vercelignore << 'EOF'
|
||
*.md
|
||
DEPLOYMENT_GUIDE.md
|
||
index_old.html
|
||
EOF
|
||
|
||
# デプロイ
|
||
vercel --prod
|
||
```
|
||
|
||
**注意**: Vercel無料プランはデプロイサイズ制限があるため、4つ全てのAPK(360MB)を含めると失敗する可能性あり。
|
||
|
||
---
|
||
|
||
## 🔐 **セキュリティ設定**
|
||
|
||
### **Option 1: Basic認証 (Vercel)**
|
||
|
||
`vercel.json` に追加:
|
||
|
||
```json
|
||
{
|
||
"headers": [
|
||
{
|
||
"source": "/apks/:path*",
|
||
"headers": [
|
||
{
|
||
"key": "WWW-Authenticate",
|
||
"value": "Basic realm=\"APK Download\""
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### **Option 2: アクセストークン (推奨)**
|
||
|
||
URLに簡易トークンを追加:
|
||
|
||
```javascript
|
||
// index.html 内
|
||
const APK_URLS = {
|
||
maita: {
|
||
lite: `${APK_BASE_URL}/ponshu_room_lite_maita.apk?token=MAITA_SECRET_123`,
|
||
pro: `${APK_BASE_URL}/ponshu_room_pro_maita.apk?token=MAITA_SECRET_123`
|
||
},
|
||
eiji: {
|
||
lite: `${APK_BASE_URL}/ponshu_room_lite_eiji.apk?token=EIJI_SECRET_456`,
|
||
pro: `${APK_BASE_URL}/ponshu_room_pro_eiji.apk?token=EIJI_SECRET_456`
|
||
}
|
||
};
|
||
```
|
||
|
||
Synology側で `.htaccess` でトークン検証:
|
||
|
||
```apache
|
||
RewriteEngine On
|
||
RewriteCond %{QUERY_STRING} !token=(MAITA_SECRET_123|EIJI_SECRET_456)
|
||
RewriteRule ^apks/.* - [F,L]
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 **動作確認**
|
||
|
||
### **ローカルテスト**
|
||
|
||
```bash
|
||
# Simple HTTP Server で確認
|
||
cd web/download
|
||
python -m http.server 8000
|
||
|
||
# ブラウザで開く
|
||
# http://localhost:8000/index.html
|
||
```
|
||
|
||
**確認項目**:
|
||
- [ ] ユーザー選択画面が表示される
|
||
- [ ] Maita/Eiji選択後、適切なダウンロードリンクが表示
|
||
- [ ] Lite/Proボタンクリックでダウンロード開始
|
||
- [ ] ダークモード切り替えで見た目が変わる
|
||
|
||
### **本番確認**
|
||
|
||
Vercelデプロイ後:
|
||
```
|
||
https://your-project.vercel.app/
|
||
```
|
||
|
||
**確認項目**:
|
||
- [ ] Synology上のAPKファイルにアクセス可能
|
||
- [ ] CORSエラーが出ない
|
||
- [ ] ダウンロード速度が許容範囲
|
||
- [ ] スマホ/PCどちらからもアクセス可能
|
||
|
||
---
|
||
|
||
## 📊 **配布ページの特徴**
|
||
|
||
### **実装済み機能**
|
||
|
||
1. **ユーザー選択**
|
||
- Maita/Eiji 選択画面
|
||
- LocalStorageに保存 (次回訪問時は自動選択)
|
||
- ユーザー変更ボタン
|
||
|
||
2. **バージョン選択**
|
||
- Lite版 (Free)
|
||
- Pro版 (Pro Badge)
|
||
|
||
3. **デザイン**
|
||
- 和風 (和紙×墨×琥珀)
|
||
- ダークモード自動切替
|
||
- レスポンシブ (モバイル/デスクトップ)
|
||
|
||
4. **情報表示**
|
||
- バージョン: v1.0.16
|
||
- ファイルサイズ: 90MB
|
||
- 対応OS: Android 8.0+
|
||
- 主要機能アイコン (撮影/AI解析/コレクション/マップ)
|
||
|
||
---
|
||
|
||
## 🔄 **更新手順**
|
||
|
||
### **新しいAPKバージョンをリリースする場合**
|
||
|
||
```bash
|
||
# 1. 新しいAPKをビルド
|
||
bash build_4_apks.sh
|
||
|
||
# 2. Synologyに新しいディレクトリで配置
|
||
scp -r build/apk_releases/NEW_TIMESTAMP/ \
|
||
admin@synology.local:/volume1/web/ponshu/apks/
|
||
|
||
# 3. index.html のAPK_BASE_URLを更新
|
||
# APK_BASE_URL = '.../apks/NEW_TIMESTAMP'
|
||
|
||
# 4. バージョン番号更新
|
||
# <footer><p>vX.X.X (YYYY-MM-DD)</p></footer>
|
||
|
||
# 5. Vercel再デプロイ
|
||
vercel --prod
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 **トラブルシューティング**
|
||
|
||
### **問題1: APKダウンロードが403エラー**
|
||
|
||
**原因**: Synology File Stationの共有設定が誤っている
|
||
|
||
**解決策**:
|
||
```bash
|
||
# SSHでパーミッション確認
|
||
ls -la /volume1/web/ponshu/apks/
|
||
|
||
# 644に変更
|
||
chmod 644 /volume1/web/ponshu/apks/*/*.apk
|
||
```
|
||
|
||
### **問題2: CORSエラー**
|
||
|
||
**原因**: Synology NginxがCORSヘッダーを返していない
|
||
|
||
**解決策**:
|
||
Synology Control Panel → Application Portal → Reverse Proxy → Custom Header:
|
||
```
|
||
Access-Control-Allow-Origin: *
|
||
```
|
||
|
||
### **問題3: Vercelデプロイが失敗**
|
||
|
||
**原因**: APKファイルサイズが大きすぎる
|
||
|
||
**解決策**:
|
||
- `.vercelignore` にAPKを追加
|
||
- APKはSynologyでホスティング (Option A)
|
||
|
||
---
|
||
|
||
## 📝 **配布URLの共有方法**
|
||
|
||
### **Eijiへの共有**
|
||
|
||
```
|
||
件名: Ponshu Room APKダウンロード
|
||
|
||
本文:
|
||
日本酒アプリの最新版をビルドしました。
|
||
以下のURLからダウンロードできます。
|
||
|
||
https://your-project.vercel.app/
|
||
|
||
ユーザー選択画面で「Eiji」を選択してください。
|
||
- Lite版: 基本機能のみ
|
||
- Pro版: 将来的に追加機能を予定
|
||
|
||
インストール方法:
|
||
1. APKをダウンロード
|
||
2. 「提供元不明のアプリ」を許可
|
||
3. インストール実行
|
||
|
||
何か問題があればお知らせください。
|
||
```
|
||
|
||
---
|
||
|
||
## 🎉 **完成後のチェックリスト**
|
||
|
||
- [ ] SynologyにAPKファイル配置完了
|
||
- [ ] Tailscale Funnel または DDNS設定完了
|
||
- [ ] index.html のURL更新完了
|
||
- [ ] Vercelにデプロイ完了
|
||
- [ ] ローカルテスト完了
|
||
- [ ] 本番環境でMaita用Lite版ダウンロード確認
|
||
- [ ] 本番環境でEiji用Lite版ダウンロード確認
|
||
- [ ] スマホからアクセス確認
|
||
- [ ] ダークモード確認
|
||
- [ ] EijiへURL共有
|
||
|
||
---
|
||
|
||
**次のステップ**: フィードバック収集 → v1.0.17で改善
|