npm scriptで環境変数を切り換える -Webpack4 -

Tatsuya Asami

6 min readOct 3, 2019

【所要時間】

2時間（2019年9月日）

【概要】

・開発環境と本番環境でリクエスト先のURLを変えたい。

・create-react-appやvue/cliにあるように、コードはまったく書き変えずに npm scriptsで捜査したい。

・TypeScriptで書かれたプロジェクト。 Webpack4を使用している。

Webpack4とdotenv-webpackを使用する。
難しくないのに方法調べるのにとても時間がかかった。

【要約・学んだこと】

dotenv-webpackをインストール
.envを必要なだけ用意
webpack.configを必要な分だけ用意し、dotenv-webpackのプロパティを設定
npm scriptを追記
環境によって変えたい箇所を環境変数に変更
公開したくない情報の取り扱い。

dotenv-webpackをインストール

npm install dotenv-webpack --save-dev

2. .envを必要なだけ用意

vue/cli等にならって、.env.development , .env.production という名前でファイルを作成する。

変数名も大文字、アンダースコアで記載。まずは動作確認のためにわかりやすい値を代入。

開発用

//  .env.development
API_URL=development

本番用

// .env.procution
API_URL=production

3. webpack.configを必要な分だけ用意し、dotenv-webpackのプロパティを設定。詳しくはhttps://github.com/mrsteele/dotenv-webpack

開発用のwebpack.configファイル

// webpack.config.development.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv('./.env.development')
  ]
  ...
};

本番様のwebpack.configファイル

// webpack.config.production.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv('./.env.production')
  ]
  ...
};

共通のwebpackの設定はwebpack-mergeで書いた方がいいが、今回は省略。

4. npm scriptを追記

package.jsonのscriptsにコマンドを追記。 --config webpack~ がどのwebpack.configファイルを読むかの指定。ちなみにnpxはローカルでインストールしたモジュールを実効する場合のcommand。

// package.json"build:development": "npx webpack --config webpack.config.development.js", "build:production": "npx webpack --config webpack.config.production.js","watch:development": "npx webpack --watch --config webpack.config.development.js","watch:production": "npx webpack --watch --config webpack.config.production.js",

ちなみに --env とつけると、webpackの環境変数が指定できる。webpackの設定の引数にも文字列やブーリアンが載せられる。詳しくはhttps://webpack.js.org/guides/environment-variables/

// package.json"build:development": "npx webpack --env development --config webpack.config.development.js","build:production": "npx webpack --env production --config webpack.config.production.js","watch:development": "npx webpack --env development --watch --config webpack.config.development.js","watch:production": "npx webpack --env production --watch --config webpack.config.production.js",

こんな感じ。今後作り直しすることが決まっていたので、最初は１つのwebpackファイルだけをつかって、環境変数を変更して読み込み先を替えたかったが、TypeScriptの読み込みエラーが発生してしまい、watchではエラーが出ながらも読めていたが、普通のビルドでは失敗した。

// webpack.config.development.jsmodule.exports = env => {
 alias: {
   TweenMax:  path.resolve(
     'node_modules',
     `gsap/src/${env}.js`  // gsap/src/development.js 
   )
 }
}

5. 環境によって変えたい箇所を環境変数に変更

まずはテスト。最初に読まれるページなどわかりやすい場所に書いてみる。dotenv-webpackでは process.env.変数名 で環境変数が呼べる。

console.log(process.env.API_URL);

それぞれのnpm scriptを実行して、developmentとproductionが切り替えられたら成功。

あとは各 .env ファイルに環境変数化したい内容を追記して、呼び出したい箇所でprocess.envを書くのみ。

6. 公開したくない情報の取り扱い。

該当する.envファイルをgit ignoreに追加する。その場合 .env.example のようなものを仮に作ってあげて、そのファイルはgithubで共有してあげると優しい。githubのread meやwikiにも書いてあげたい。

// .env.example*各自.envファイルをディレクトリ直下に作成、追記してください。I AM情報は絶対に公開しないようにしてください。AWS_I_AM=

【わからなかったこと】

なし

【感想】

vue/cliやcreate-react-appでできるから絶対できるはず。と思っていたが、dotenv-webpackでpathを変えられることに気がつくまでにとても時間がかかった。

動作確認が気軽にできるうちに環境変数の切り替えは必ず実装するようにしたい。

npm scriptで環境変数を切り換える -Webpack4 -

Written by Tatsuya Asami

No responses yet