メモ: dotenv を使って環境変数を設定した Nuxt.js プロジェクトを Netlify にデプロイするときの注意点

github.com

↑コメントがわかりやすいのだけど、dotenv は .env から環境変数を生成するためのモジュールなので、Netlify とかにデプロイするときに .env ファイルを .gitignore とかしてると当然環境変数が作られないことになる。 Netlify のための環境変数は設定から Environment 項目で設定できて、 process.env.XXX で設定できるんだけど、そもそも process.env.XXX は nuxt.config.js の env 項目で設定してないとサーバサイドのときしか読めない。 という前提の上で、 nuxt.config.js の env に require('dotenv').config().parsed を置くとどうなるか？

1. ローカルの開発環境では dotenv のおかげで環境変数読める
2. Netlify 上で nuxt generate すると .env ファイルがないので nuxt.config.js 上の env が展開できない
3. Netlify 上でサーバサイドのみ変数が読めてクライアントサイドは読めないという状況になる

というわけでどうするべきか？ nuxt.config.js の env 項目を require('dotenv').config().parsed で展開せず個別に書くこと。