TypeScript, webpackあたりで環境別に設定値を設ける

概要

開発、ステージング、本番など環境に応じて値を変えたい場面がある。
webpackの特性なども絡み少しつまづいたのでメモしとく

方法

npm run buildが動くようにしとく

詳しくは前に書いたブログを参照

{
...
  "scripts": {
    "build": "webpack",
    "build:prod": "webpack --mode=production",
  },
}

process.env.NODE_ENVを有効化

NODE_ENV=stagingを指定するとtsファイルにてprocess.env.NODE_ENVを取得できる
しかし、何もしないとwebpack.configのmodeに指定された値が優先されてしまう。

NODE_ENV=staging npm run build -- --mode development

このように指定してもprocess.env.NODE_ENVはdevelopmentとなってしまう。

そこでwebpack.configに以下の通りプラグインを追加するとよろしく読み込んでくれる

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ? process.env.NODE_ENV : "development")
    }),
  ]
};

環境別ビルド

• development環境
  • NODE_ENV=development npm run build
• staging環境
  • NODE_ENV=staging npm run build
• live環境
  • NODE_ENV=production npm run build -- --mode production

環境別読み込みの確認

process.env.NODE_ENVに応じて読み込むファイルを変える

import * as DevConfig from "./config.dev";
import * as StgConfig from "./config.stg";
import * as ProdConfig from "./config.prod";
/** 環境別変数について */
const productionEnv: string = "production";
const stagingEnv: string = "staging";
export let env = DevConfig;
switch (process.env.NODE_ENV) {
  case productionEnv:
    env = ProdConfig;
    break;
  case stagingEnv:
    env = StgConfig;
    break;
  default:
    env = DevConfig;
    break;
}

/** 環境共通の変数宣言 */
export const commonValue: string = "common value";

環境別に設定したいものを記載

export const someKey: string = "devKey";

環境別ビルドを実行して呼び出して見ると各環境毎の値を出してくれてた！！

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Config from "./common/environment/config";

ReactDOM.render(
  <div>
    <div>
      someKey: {Config.env.someKey}
    </div>
    <div>
      commonKey: {Config.commonValue}
    </div>
  </div>,
  document.getElementById("container"),
);

まとめ

各環境でのビルド時にNODE_ENVを指定するとよろしく読んでくれる！
もっといい方法があるのかもしれないけど、とりあえずこれでいく！