mai
/
ponshu-room-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 31 Wiki Activity
ponshu-room-lite/web/download/DEPLOYMENT_GUIDE.md

8.7 KiB
Raw Blame History

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を配置

# ローカル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 (推奨):

# 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 の18行目を編集:

// 変更前
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にデプロイ

# 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の無料プランはファイルサイズ制限があるため、非推奨ですが可能です。

# 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 に追加:

{
  "headers": [
    {
      "source": "/apks/:path*",
      "headers": [
        {
          "key": "WWW-Authenticate",
          "value": "Basic realm=\"APK Download\""
        }
      ]
    }
  ]
}

Option 2: アクセストークン (推奨)

URLに簡易トークンを追加:

// 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 でトークン検証:

RewriteEngine On
RewriteCond %{QUERY_STRING} !token=(MAITA_SECRET_123|EIJI_SECRET_456)
RewriteRule ^apks/.* - [F,L]

🧪 動作確認

ローカルテスト

# 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バージョンをリリースする場合

# 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の共有設定が誤っている

解決策:

# 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で改善