開発環境や本番環境などの環境に応じて変数の設定値の切り替えを行うために「cross-env
」というNode
のライブラリを使用してみたいと思います。
これを利用することで、開発、検証、本番環境の設定の切り替えが可能なビルドができるようになります。
今回は下記の環境を切り替えられるように設定してみたいと思います。
- 開発環境:development
- 検証環境:staging
- 本番環境:production
前提条件
- 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
スクリプトで環境を切り替えることができれば検証環境や本番環境構築時の手間を省いたり、ミスをなくすことができそうですね。