angular
angular-seed

angular-seedにおける開発環境/本番環境での値の使い分けについて

More than 1 year has passed since last update.

Development環境やProduction環境で、使用する値を使い分けたい

Development環境で使用する値を設定したい場合は、tools/env/dev.tsを使用。Production環境の場合は、tools/env/prod.tdを使用(厳密に言うと、ファイル名は何でも良い)。

ファイルを開き以下のように記述。以下はdev.tsの場合。

import { EnvConfig } from './env-config.interface';

const DevConfig: EnvConfig = {
  ENV: 'DEV',
  API: 'example.com/api',
  VERSION: 'v1',
};

export = DevConfig;

実際の使用方法

値を使い分けたいファイルを開き、src/client/app/shared/config/env.config.tsを読み込む。これでOK。

import { Config } from '../config/env.config';

private api: string = Config.API; // => Dev環境だと'example.com/api'が代入される
private version: string = Config.VERSION; // => Dev環境だと'v1'が代入される

仕組みとしては、dev.tsprod.tsがこのファイルに読み込まれて、共通した記述でDev環境/Prod環境での値の使い分けができるようになっている。

env.config.tsの中身は以下のような感じになっている。

import { EnvConfig } from '../../../../../tools/env/env-config.interface';

export const Config: EnvConfig = JSON.parse('<%= ENV_CONFIG %>');

Dev環境として実行

Dev環境として実行するときは、以下のオプションを指定してコマンドを実行。オプションの引数としてファイル名を指定して実行することで、そのファイル名に設定した値が使われるようになる。

npm start -- --env-config dev

参考