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

開発環境や本番環境などの環境に応じて変数の設定値の切り替えを行うために「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スクリプトで環境を切り替えることができれば検証環境や本番環境構築時の手間を省いたり、ミスをなくすことができそうですね。