nuxtでdotenv-module利用時にCircleCIで環境変数を指定する

nuxt-community/dotenv-moduleを利用して、ローカルでは.envに環境変数を指定して利用していた。

CircleCI上のGUIから環境変数を設定して、CircleCIからFirebaseHostingにデプロイしたところ環境変数が設定されていないとエラーが出てしまった。

そこで対応方法を調べてみたところ以下の2通りの方法があった。

方法1：CI実行時に.envを作成する

[[.circleci/config.yml]]に以下を追加してbuild前に.envを生成すると環境変数が設定された。

- run:
    name: Add env
    command: |
      echo "BASE_URL=$BASE_URL" > .env
      echo "FIREBASE_APIKEY=$FIREBASE_APIKEY" >> .env
      echo "FIREBASE_AUTH_DOMAIN=$FIREBASE_AUTH_DOMAIN" >> .env
      echo "FIREBASE_DATABASE_URL=$FIREBASE_DATABASE_URL" >> .env
      echo "FIREBASE_PROJECT_ID=$FIREBASE_PROJECT_ID" >> .env
      echo "FIREBASE_STORAGE_BUCKET=$FIREBASE_STORAGE_BUCKET" >> .env
      echo "FIREBASE_MESSAGING_SENDER_ID=$FIREBASE_MESSAGING_SENDER_ID" >> .env
      echo "FIREBASE_APP_ID=$FIREBASE_APP_ID" >> .env
      echo "FIREBASE_MEASUREMENT_ID=$FIREBASE_MEASUREMENT_ID" >> .env
- run: yarn build

方法2：nuxt.config.tsのenvを設定する

[[nuxt.config.ts]]のenvで環境変数を再設定するとCircleCI上の環境変数を認識してくれた。

export default {
  env: {
    BASE_URL: process.env.BASE_URL,
    FIREBASE_APIKEY: process.env.FIREBASE_APIKEY,
    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
    FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
    FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
    FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
    FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID
  }
}

[[nuxt.config.ts]]の方が変更頻度が高いので方法2のやり方で対応した。

参考

• API: env プロパティ - NuxtJS