Nuxtでdotenvとcross-envを使って環境ごとに環境変数を切り替える
Nuxtを使っていて環境ごとにそっくり環境変数を切り替えたい場合はよくあると思います。開発環境と本番環境で分けたりとか。そうした場合にどうするのがいいのかなーと調べてみた結果をまとめました。
概要
大まかな方法としては以下になります。
- dotenvで
.env_xxx
ファイルで環境変数を管理できるようにする - 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とかのソース読んでみないとわからないかも。どなたかご存知の方いらしたら教えて下さい!