[NuxtJS]環境ごとに設定ファイルを切り替える方法( coross-env )

NuxtJS で開発環境や本番環境などの環境に応じて変数の設定値の切り替えを行うために「 cross-env 」という Node のライブラリを使用してみたいと思います。
これを利用することで、開発、検証、本番環境の設定の切り替えが可能なビルドができるようになります。
今回は下記の環境を切り替えられるように設定してみたいと思います。

開発環境 : development
検証環境 : staging
本番環境 : production

前提条件
利用するファイル
cross-env インストール
各種設定ファイルを作成する
package.json 編集
nuxt.config.js の編集
注意点
最後に

前提条件

nuxt : ^2.15.7
vue : ^2.6.14
vuetify : ^2.5.5
cross-env : ^7.0.3

利用するファイル

今回利用するファイルは下記の通りです。プロジェクトのディレクトリ直下に全て配置しています。

env.development.js : 開発環境用ファイル
env.staging.js : 検証環境用ファイル
env.production.js : 本番環境用ファイル
package.json : npmスクリプトを記述したファイル
nuxt.config.js : 環境変数に応じた設定ファイルを読み込む

cross-env インストール

cross-env を下記のコマンドでインストールします。

$ npm install --save--dev cross-env

各種設定ファイルを作成する

設定ファイルを作成していきます。

env.development.js

module.exports = {
  VUE_APP_API_URL: 'http://localhost:8080/'
}

env.staging.js

module.exports = {
  VUE_APP_API_URL: 'http://stg.sample.com/'
}

env.production.js

module.exports = {
  VUE_APP_API_URL: 'http://sample.com/'
}

package.json 編集

package.json の npm スクリプトを下記のように編集します。

  "scripts": {
    "dev": "cross-env NODE_ENV=development nuxt",
    "build": "nuxt build",
    "build:dev": "cross-env NODE_ENV=\"development\" nuxt build",
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    "start:dev": "cross-env NODE_ENV=\"development\" nuxt start",
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "generate:dev": "cross-env NODE_ENV=\"development\" nuxt generate",
    "generate:stg": "cross-env NODE_ENV=\"staging\" nuxt generate",
    "generate:prod": "cross-env NODE_ENV=\"production\" nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest",
  },

nuxt.config.js の編集

nuxt.config.js では npm スクリプト実行時に設定された「 NODE_ENV 」の値を元に読み込むファイルを切り替えられるように修正を行います。

const environment = process.env.NODE_ENV || 'development'
const envSettings = require(`./env.${environment}.js`)

export default {
  env: envSettings,

  axios: {
    baseURL: envSettings.VUE_APP_API_URL
  },
}

上記の baseURL で使っているように env で設定した変数を使用することができます。

注意点

NODE_ENV に設定する値と env.development.js などのファイル名の値は同じになるように注意しましょう。
NODE_ENV が dev で js ファイルが env.development.js となっていると設定が正しく機能しません。
逆に今回設定している「 develop 」「 staging 」「 production 」以外でも NODE_ENV と js の設定ファイルのファイル名と値が一致していれば環境の切り替えは正しく機能します。
今回使用している名称が長いと思う場合は、 NODE_ENV に設定する値を「 dev 」「 stg 」「 prod 」とすることもできます。その際 js ファイルのファイル名はそれぞれ、「 env.dev.js 」「 env.stg.js 」「 env.prod.js 」とします。

最後に

開発環境と検証、本番環境の切り替えを手動で行ったりしているとミスの原因になりがちなので、今回のように npm スクリプトで環境を切り替えることができれば検証環境や本番環境構築時の手間を省いたり、ミスをなくすことができそうですね。