Vercelに環境変数を正しく設定する

料理をするとき、レシピ帳には「塩少々」と書いてあっても、実際に使う塩の量は家庭ごとに違いますよね。Webアプリにも同じように、コード本体とは別に「このアプリ専用の設定値」を渡す仕組みがあります。それが環境変数（＝アプリが裏側で読み取る、パスワードやAPIキーなどの秘密のメモ帳）です。

このレッスンでは、あなたのWebアプリを公開している Vercel（＝Webアプリを簡単にインターネットに公開できるサービス）に環境変数を正しく設定し、アプリが問題なく動くことを確認するところまでを15分で終わらせます。

環境変数は、次のような「アプリに渡したいけれど、コードには直接書きたくない情報」を管理するために使います。

• データベースに接続するためのパスワード
• 外部サービス（Supabase、Stripeなど）と通信するための鍵（APIキー ＝外部サービスを使うための合言葉）
• 公開したくない内部の設定値（管理者メールアドレスなど）

良い例と悪い例

• ✅ 良い例：APIキーを環境変数に入れておき、コードには process.env.API_KEY とだけ書く
• ❌ 悪い例：APIキーをコードに直接書いて、GitHubなどの公開場所にアップしてしまう → 誰でもあなたのAPIキーが見えてしまい、悪用される危険があります

どの環境変数を設定すればいいかわからないときは、AIツールに聞くのが一番早い方法です。

Claude Code / ChatGPT に聞くプロンプト例

私のプロジェクトで使っている .env.local ファイルの中身を確認して、
Vercelに設定が必要な環境変数の一覧を教えてください。
それぞれの変数が何に使われているかも簡単に説明してください。

Cursor で聞く場合

Cursorのチャットパネルを開き、次のように聞きます。

このプロジェクトの .env.local にある環境変数をすべてリストアップして、
それぞれの用途を教えてください。
Vercelに設定するとき、NEXT_PUBLIC_ がつくものとつかないものの違いも説明してください。

AIが一覧を返してくれたら、それをメモしておきましょう。次のステップでそのままVercelに入力できます。

ポイント: NEXT_PUBLIC_ で始まる変数はブラウザ側（ユーザーに見える側）でも使えます。逆に NEXT_PUBLIC_ がつかない変数はサーバー側（裏側）だけで使われ、ユーザーには見えません。APIキーなどの秘密にしたい値には NEXT_PUBLIC_ をつけないのが基本です。

1. ブラウザで vercel.com にアクセスしてログインします
2. 環境変数を設定したいプロジェクトをクリックします
3. 画面上部の Settings（＝設定）タブを開きます
4. 左側のメニューから Environment Variables（＝環境変数）を選びます

Environment Variablesの画面で、次の3つを入力します。

環境の選び方を知る

Vercelには3つの環境（＝アプリが使われる場面）があります。

• Production（本番）：実際にユーザーがアクセスする公開中のサイト
• Preview（プレビュー）：公開前に動作を確認するテスト版
• Development（開発）：あなたのパソコン上での開発中に使う値

迷ったら3つすべてにチェックを入れましょう。 これが最も安全な選択です。

良い例と悪い例

• ✅ 良い例：3つの環境すべてにチェックを入れて、どの場面でも動くようにする
• ❌ 悪い例：Productionだけに設定して、プレビューや開発中に「動かない！」と悩む

入力が終わったら Add（追加）ボタンを押して保存します。残りの環境変数も同じ手順で1つずつ追加していきます。

すべての環境変数を追加し終えたら、一覧画面で次の3点をチェックしましょう。

1. Key の名前 — コードで使っている名前とスペルが完全に一致しているか（大文字・小文字も区別されます）
2. Value の値 — 前後に余分なスペースや改行が入っていないか
3. 環境のチェック — 3つの環境すべてにチェックが入っているか

AIで確認するプロンプト例

設定が正しいか不安なときは、AIに確認を頼みましょう。

以下がVercelに設定した環境変数の一覧です。
.env.local の内容と照らし合わせて、漏れや名前の間違いがないかチェックしてください。

- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
- SUPABASE_SERVICE_ROLE_KEY

環境変数を追加・変更しただけでは、動いているサイトにはまだ反映されていません。サイトをもう一度公開し直す「リデプロイ（＝もう一度ビルドして公開し直すこと）」が必要です。

1. 画面上部の Deployments（＝公開履歴）タブを開く
2. 一番上にある最新の公開記録の右側にある「…」メニューをクリック
3. Redeploy（再公開）を選ぶ
4. 確認画面で Redeploy ボタンを押す

2〜3分ほど待つと、新しい環境変数が反映されたサイトが公開されます。

リデプロイが終わったら、実際にサイトにアクセスして動作を確認します。

• ログイン機能がある場合 → ログインしてみる
• データベースからデータを取得している場合 → データが表示されるか見る
• 外部サービス連携がある場合 → その機能を使ってみる

もし動かなかった場合は、次の「つまずきポイント」を確認してください。

「変数を追加したのに反映されない」

リデプロイ（再公開）を忘れていないか確認しましょう。環境変数の変更は自動では反映されません。必ずリデプロイが必要です。

「名前が合っているか不安」

コードで使っている名前と、Vercelに設定した名前が1文字も違わず一致している必要があります。よくあるミス：

• ✅ コード: process.env.NEXT_PUBLIC_SUPABASE_URL → Vercel: NEXT_PUBLIC_SUPABASE_URL
• ❌ コード: process.env.NEXT_PUBLIC_SUPABASE_URL → Vercel: SUPABASE_URL（NEXT_PUBLIC_ が抜けている）
• ❌ コード: process.env.NEXT_PUBLIC_SUPABASE_URL → Vercel: NEXT_PUBLIC_SUPABASE_url（大文字/小文字が違う）

「Valueをコピーしたら前後にスペースが入った」

APIキーやURLをコピー＆ペーストするとき、先頭や末尾に余分なスペースや改行が紛れ込むことがあります。Valueの入力欄をクリックして、先頭と末尾をよく確認しましょう。

「APIキーを間違えてコードに書いて公開してしまった」

落ち着いて次の手順を踏みます。

1. そのAPIキーをサービス側で無効化（＝使えなくする）する
2. 新しいキーを発行し直す
3. 新しいキーをVercelの環境変数に設定する
4. リデプロイする
5. GitHubの公開コードからもAPIキーを削除してコミットする

AIに助けてもらうプロンプト例

エラーが出て原因がわからないときは、AIに状況を伝えましょう。

Vercelにデプロイしたサイトで以下のエラーが出ています。
環境変数の設定ミスが原因かもしれません。考えられる原因と対処法を教えてください。

[エラーメッセージをここに貼り付ける]

以下をすべて確認できたら、このレッスンは完了です。

• 必要な環境変数をすべてVercelに追加した
• 3つの環境（Production / Preview / Development）すべてにチェックを入れた
• リデプロイを実行した
• サイトにアクセスして、機能が正しく動いていることを確認した
• 環境変数の設定画面のスクリーンショットを撮った（Valueは隠れた状態でOK）