Nuxtでdotenvとcross-envを使って環境ごとに環境変数を切り替える

2 min read読了の目安（約1900字）
nuxt
#
dotenv
#
crossenv
tech

Nuxtを使っていて環境ごとにそっくり環境変数を切り替えたい場合はよくあると思います。開発環境と本番環境で分けたりとか。そうした場合にどうするのがいいのかなーと調べてみた結果をまとめました。

概要

大まかな方法としては以下になります。

  1. dotenvで.env_xxxファイルで環境変数を管理できるようにする
  2. cross-envでenv_xxxを切り替えられるようにする

環境

  • Nuxt 2.14.12
  • @nuxtjs/dotenv 1.4.1
  • cross-env 7.0.3

dotenvの導入

$ yarn add @nuxtjs/dotenv

環境ごとの.envファイルを用意する

プロジェクトのルート直下に.envファイルを環境ごとに作成します。
※あとでパス指定すればいいので.envファイルの名前や場所は任意です。ここではよくある.env_xxxといったファイル名を採用しています。

your_project
├── .env_local
├── .env_dev
└── .env_prod

nuxt.config.jsにdotenv用の設定を追記する

nuxt.config.jsのmodulesにdotenvの設定を追記します。
process.env.NODE_ENVの値に応じて取得する.envが変わるようにしています。

nuxt.config.js
//  省略
modules: [
   // 省略
   // NODE_ENVに応じた.envファイルを取得します。
    ['@nuxtjs/dotenv',
      { filename: `.env_${process.env.NODE_ENV}` }]
],
//  省略
env: {
  // これを設定しないとNuxtでprocess.env.NODE_ENVを取得したときにデフォルトの値になってしまう
  NODE_ENV: process.env.NODE_ENV
}

cross-envの導入

$ yarn add cross-env

package.jsonのnpm scriptsを修正する

yarn devで動かした場合はNODE_ENVの値がdevになるように設定します。本番環境用にyarn build, yarn startした場合はデフォルトでproductionが設定されます。

package.json
  "scripts": {
    "local": "cross-env NODE_ENV=local nuxt",
    "dev": "cross-env NODE_ENV=dev nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
  • yarn startと同じように、yarn devした場合は同じようにデフォルトでdevelopmentが設定されるようになっているので、ファイル名を.env_developmentにしても読み込まれるはずです。今回は.env_devとして短くしたかったのでNODE_ENVを上書きしました。
  • また、NODE_ENV=testだとNuxtが起動しなくなるという現象に遭遇しました。NODE_ENV=build やNODE_ENV=startだと起動できたのですが原因不明。。。
    • node.jsとかのソース読んでみないとわからないかも。どなたかご存知の方いらしたら教えて下さい！

参考