Zenn
🐸

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

2021/02/27に公開
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"
  }

参考

Discussion