vue-cliのwebpackテンプレートで環境別に`npm run build`が出来るようにする

はじめに

表題のことをやりたくて色々と試しながら一旦落ち着く形となったので、備忘録として残しておきます。

ここに書いている設定は、以下のような環境をイメージして書いています。

• ローカル環境(local)　→　自身の作業PCに構築した環境とか
• 開発サーバ(dev)　→　チームメンバーで共有して使用するサーバに構築した環境とか
• 本番サーバ(prod)

ビルド設定

環境別に環境変数ファイルを用意する

config/local.env.js

'use strict'
// local環境用の環境変数

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"local"',
  API_ENDPOINT: '"http://127.0.0.1:9000/api"'
})

config/dev.env.js

'use strict'
// 開発サーバ用の環境変数 ※webpack-dev-server用の環境変数も兼ねている

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ENDPOINT: '"https://dev.hoge.com/api"'
})

config/prod.env.js

'use strict'
// 本番環境用の環境変数

module.exports = {
  NODE_ENV: '"production"',
  API_ENDPOINT: '"https://hoge.com/api"'
}

buildスクリプトの引数に環境を指定できるようにする

package.json（変更前）

{
  ...
  "scripts": {
    ...
    "build": "node build/build.js"
  },
  ...
}

package.json（変更後）

{
  ...
  "scripts": {
    ...
    "build": "npm run build_local",
    "build_local": "node build/build.js local",
    "build_dev": "node build/build.js dev",
    "build_prod": "node build/build.js production"
  },
  ...
}

↑ではnpm run buildでローカル環境のビルドをするようにしているけど、ここはお好みで変えてしまってOK

build/build.js（変更前）

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'
...

build/build.js（変更後）

'use strict'
require('./check-versions')()

const envCheck = (env) => {
    return env
      && (env === 'local' || env === 'dev' || env === 'production')
}

process.env.NODE_ENV = envCheck(process.argv[2]) ? process.argv[2] : 'production'
...

build時のwebpackConfig(webpack.prod.conf)が使用する環境変数ファイルを制御する

build/webpack.prod.conf（変更前）

...
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
...

build/webpack.prod.conf（変更後）

...
const getEnv = {
  'local': () => {
    return require('../config/local.env')
  },
  'dev': () => {
    return require('../config/dev.env')
  },
  'production': () => {
    return require('../config/prod.env')
  }
}

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : getEnv[process.env.NODE_ENV]()

console.log(env)
...

ビルド

ローカル環境

$ npm run build
$ npm run build_local

開発サーバ

$ npm run build_dev

本番サーバ

$ npm run build_prod

参考

vue-cli の webpack テンプレートでテスト環境向けにビルドしたい - kntmr-blog