Nuxt.js + Heroku で環境変数が通らない時の確認事項

3627 ワード
Heroku Firebase nuxt.js 環境変数 .env Heroku テキストリンク

heroku で環境変数がうまく通らなかったことがあったので自分用にメモ。

1. nuxt.configに正しく env が設定されていますか？

nuxt.config.js
  env: {
    API_KEY: process.env.API_KEY || '',
    AUTH_DOMAIN: process.env.AUTH_DOMAIN || '',
    DATABASE_URL: process.env.DATABASE_URL || '',
    PROJECT_ID: process.env.PROJECT_ID || '',
    STORAGE_BUCKET: process.env.STORAGE_BUCKET || '',
    MESSAGING_SENDER_ID: process.env.MESSAGING_SENDER_ID || '',
    APP_ID: process.env.APP_ID || '',
  },

2. herokuに正しく環境変数が設定されていますか？

https://dashboard.heroku.com/apps/{app-name}/settings で確認できます。
Firebaseの場合、valueは'abc'だと通らないかもです。
abcと言う書き方になっているかチェックしましょう。

3. herokuの環境変数を設定した後、コンパイルし直しましたか？

webpackなどを使っている場合、herokuで環境変数をセットした後、 コンパイルし直す必要があります。再起動ではダメみたいです。
プッシュせずにコンパイルする方法はいくつかあるようですが一番簡単なのは空のコミットを作ってプッシュしちゃうのが良いでしょう。

git commit --allow-empty -m "empty commit"
git push heroku master

もし何か間違いあれば教えてください。