vercel devの際にローカルで環境変数を指定したい！

はじめに

Vercel Functions を使ってサーバーレス関数で DB 接続を行っています。

その際に、ローカルでは localhost でたてた PostgreSQL に接続するようにしたい、ということがありました。
その時にぶつかった問題の解決メモです。

環境

• ホスティング：Vercel
• サーバーレス関数：Vercel Functions（Go）
• フロントエンド：Next.js
• DB：PostgreSQL
  （本番は Neon、ローカルでは localhost の PostgreSQL）

先に解決方法

.envファイルを使うことで、ローカルでは.envの内容が使用されます。

.envファイルを使用する場合は、環境変数全てを記載する必要があります。
Vercel で設定している環境変数の存在自体が.envの内容に置き換わります。

.envにない環境変数は未定義になるので注意です！

※.envは機密の塊なので.gitignoreに追加し、絶対にコミットなどをしないようにしてください！

なにで困った？

環境変数で DB の接続 URL を設定していたので、環境変数のローカルでの出し分けに困りました。
ずっとnext dev を使っており.env.localを使用していたので.envを使えばいける、という単純なところに気づきませんでした。

まとめ

vercel devで実行する際の環境変数は.envで変更できることがわかりました！

vercel devだと環境変数をメモリに自動で読み込んでくれる、というありがたい仕様があり、それで少し悩みました。
解決できてよかったです！

参考

• Local Development Environments