Nuxtでcross-envを使い環境ごとに環境変数を分ける

cross-envはNodeのライブラリでnpmスクリプト実行時に任意の環境変数を設定できます。
これを利用して、開発（ローカル）、検証、本番環境の設定切り替えが可能なビルドを実現します。

各環境の英語と日本語の対応付は以下です。

• 開発環境 = development environment
• 検証環境 = staging environment
• 本番環境 = production environment

利用するファイルは以下です。すべてディレクトリ直下に置いています。

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

npmライブラリのインストール

まずプロジェクトのディレクトリでcross-envをインストールします。

$ npm install --save cross-env

各種設定ファイルの作成

JavaScriptファイルで作ります。
今回はAPIのベースURLを定義します。値は適宜読み替えてください。

• env.development.js

module.exports = {
  apiBaseUrl: 'http://localhost:8000'
}

• env.staging.js

module.exports = {
  apiBaseUrl: 'http://stg.your-api.com/api'
}

• env.production.js

module.exports = {
  apiBaseUrl: 'http://your-api.com/api'
}

package.jsonのnpmスクリプトの記載

npmスクリプトのbuildとstartを、開発、検証、本番環境用に3つに分けます。そして先頭にcross-env NODE_ENV=XXXXXXと足すことで環境変数NODE_ENVを切り替えコマンド実行させます。
コマンドは、開発用にbuild、検証用にbuild:stg、本番用にbuild:prodといった形に分けています。（開発がbuild:devでないのはもともとあるbuildコマンドを消すことで発生する影響のリスク回避です）

{
  ...

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

  ...

}

nuxt.config.jsの修正

nuxt.config.jsではnpmスクリプトで渡された変数を元に読み込むファイルを切り替えます。
テンプレートリテラルを使い、${process.env.NODE_ENV}の部分で読み込む環境を指定します。
その後、Nuxtの設定の1つであるenvプロパティを利用してアプリで利用可能な値として定義します。

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

module.exports = {

  ...

  env: envSet

  ...

}

envで利用した値の利用方法

env プロパティ(Nuxtドキュメント)

コード内でprocess.env.apiBaseUrlと定義することで値を利用できます。

注意点

2018/06/15現在、日本語ドキュメントでは翻訳されていないのですが、Nuxtのprocess.envは少しクセがあります。というのは、上記の設定でprocess.env.apiBaseUrlは問題なく取得できるのですがprocess.envは空のオブジェクトとして認識される点です。

これはNuxtがWebpack内でprocess.env.XXXXXXを実体として変換した状態でビルドを行うからです。

ビルド前

if (process.env.test == 'testing123')

ビルド後

if ('testing123' == 'testing123')

なのでコード内でprocess.envは利用しないで、process.env.XXXXXまで利用するようご注意ください。