ブログ一覧

Vercelで環境変数を設定する

環境変数を使っているNext.jsのサイトをVercelにデプロイする場合、事前にVercel側にも環境変数を設定する必要があります。ローカルの.env.localはデプロイされないので、設定を忘れるとprocess.env.XXXがundefinedになります。Next.jsに限らず、AstroやNuxtなど他のフレームワークでも同じです。

この記事は2021年に書いたものですが、設定画面の場所は当時から変わっていません。CLIでの管理（vercel env）など、現在の状況に合わせて加筆しました。

ダッシュボードから設定する

設定場所は、プロジェクトのSettingsメニューにあるEnvironment Variablesのページです。

NAMEに変数名、VALUEに値をそれぞれ入力し、「Add」ボタンを押せば完了です。

設定時に、どの環境に適用するかを選べます。

  • Production：本番デプロイ（mainブランチへのpushやvercel --prod）で使われる
  • Preview：本番以外のブランチのデプロイで使われる。ブランチを指定して、そのブランチだけ別の値で上書きすることもできます
  • Development：vercel devでのローカル開発で使われる

環境別に.envファイルを分けて運用している場合は、ここのチェックボックスを対応させてください。

ハマりどころ：設定変更は「次のデプロイから」

環境変数を追加・変更しても、すでにデプロイ済みのサイトには反映されません。反映されるのは次のデプロイからです。

「設定したのにundefinedのまま」というときは、たいていこれが原因なので、設定後に再デプロイしてください。あわせてNext.jsの場合は、ブラウザ側で参照する変数にNEXT_PUBLIC_プレフィックスが必要という仕様にも注意です（サーバー側だけで使う変数には不要）。

CLIで管理する（vercel env）

現在はVercel CLIからも環境変数を管理できます。

# 追加（対話形式で値と環境を聞かれる）
vercel env add MY_SECRET

# 一覧
vercel env ls

# 削除
vercel env rm MY_SECRET

便利なのがvercel env pullで、Vercel上のDevelopment環境の変数をローカルの.envファイルに書き出してくれます。

vercel env pull

チーム開発で「.envファイルを誰かからもらう」運用をしているなら、Vercelを変数の置き場所にして各自vercel env pullする方が、漏れも齟齬もなくなります。なおvercel devを使っている場合は、Development環境の変数を自動で読み込むのでpullすら不要です。

ブログ一覧