「個人開発×Claude Code」 ナポレオン開発日記 #5 Supabase速度改善
こんにちは。
このシリーズでは、トランプカードゲーム「ナポレオン」のWebアプリを個人開発していく過程を日記形式でまとめています。
今回はアプリのレスポンスが極端に遅かった原因とその解決策について書きます。
🕒 ある日、APIがやけに遅い
最近、Vercel開発環境用にアプリをデプロイして遊んでみたところ、画面の切り替えやAPIレスポンスがローカルと比較して異常に遅いことに気づきました。
最初はVercelを通すことによる遅さかと思ったのですが、原因はまさかのリージョン設定の不一致でした。
これを突き止めるまでに、
- 速度測定ソースコードを開発してUIに表示
- supabaseアクセス処理の改善
など色々試しましたが、早くならずClaude君に聞くのをやめてPerplexityで調べると解決しました。
2日間ほど費やしましたね。。
🔍 原因：Supabase（東京）× Vercel（アメリカ）
調べてみると、
Supabase: ap-northeast-1（東京）
Vercel: デフォルトで「グローバル」だが、APIは主にアメリカ西海岸リージョンに配置
という構成になっていました。
つまり、フロント（Vercel）→API→Supabase（東京） の通信が、太平洋を往復していたわけです。
これではDBクエリが遅く感じるのも当然でした。
⚡️ 対処：Vercelのリージョンを「東京」に変更
Vercelではvercel.jsonやDashboardから**「Region」を明示的に指定**できます。
今回はAPIルートを含むNext.jsアプリを東京リージョンに固定しました。
Settings -> Functions -> Function Region で設定できます。
hnd1は東京リージョン（Haneda）を指します。
これを設定して再デプロイすると、体感で2倍程度速くなったほどの改善が見られました。
特にゲーム開始時の初期データロードが滑らかになり、「あれ、別アプリみたいに速い」と感じるレベルでした。
💡 学び：リージョンは“目に見えないボトルネック”
クラウド構成では「通信距離」が地味に効いてきます。
特にSupabaseやVercelのようにサーバーレス構成を組み合わせる場合は、
- フロントエンド（Vercel）
- バックエンド（Supabase / Firebase / PlanetScale）
- 認証・ストレージ
などのリージョンを揃えることが非常に重要だと学びました。
📝 今後：リージョンの違いによるコストの違いを学ぶ
us-centralが安いイメージがあるのですが、どうしてそうなっているのか、やっとリージョンの概念をここ2年くらいで掴めてきた気がするので、もっとインフラの設計に落とし込んでいきたいですね。
Discussion