トップ / 応用の紹介

👉 このページは「Surgeでは足りなくなってから読めばいい」ページです。今は、次の段階があると知っていれば十分です。

どう繋がるのか

手順書で使ったSurgeは、完成したHTMLをそのまま配るサービスです。速くて簡単ですが、できないことがあります。

• 誰かが送信したデータを保存する
• ログインした人にだけ違う画面を見せる
• 裏側でAPIキーを使って外部サービスを呼ぶ

これらは「見る人ごとに中身が変わる」動きです。配るだけのSurgeでは扱えません。そこで登場するのが Vercel です。

Vercelは、GitHubと繋がります。git push をすると、Vercelがそれを検知して自動で公開まで済ませます。Surgeのように毎回コマンドを打つ必要がなくなります。

つまり、こういう住み分けです。

実際にやるとどんな感じか

Vercelにサインアップし、GitHubのリポジトリを選ぶと、あとは自動です。

git push

これだけで、Vercelがビルド（本番用に組み立てる工程）を実行し、URLを更新します。手元で確認してからpushする、という流れはGitHubと同じです。

そしてもう1つ、必ず出会う論点があります。秘密の値の置き場所です。

.env.local はGitHubに上げません。Vercelが受け取れるのはGitHubにある中身だけです。つまり本番には .env.local が存在しません。

これが「ローカルでは動くのに本番で動かない」の最大の原因です。

本番用の値は、Vercelのプロジェクト画面（Settings → Environment Variables）に、ローカルと同じ名前で登録します。登録しただけでは反映されないので、もう一度pushするか、画面から再デプロイしてください。環境変数はビルドの時に読み込まれるためです。

始めるなら

• Vercel 公式ドキュメント
• 環境変数の扱い（公式）

「置き場所が2つある」ことさえ覚えていれば、その日に困りません。データベース（Supabase）に進む時、この知識が前提になります。