本番や開発などの環境ごとに固有の設定値を使用する[Angular]

概要
環境
実装方法

概要

本番環境や開発環境などで、APIのURLの向き先など、環境によって異なる設定値（環境変数）を設定していくやり方を備忘録として残していきます。

やり方はenviroment.tsを使って行います。
環境はstaging環境（本番環境）、development環境（開発環境）の２つで環境ごとの設定をしていきます。

環境

Angular 18

実装方法

環境変数の設定ファイル作成

Angular18で、デフォルトプロジェクトを作ると、angular.jsonができるのですが、設定がデフォルトでdevelopmentだけあるのですが、今回はstaging環境も作るので、developmentの設定値をコピーして、stagingの設定を追加します。

          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kB",
                  "maximumError": "4kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            },
            // developmentの内容をコピーしてstaging環境追加
            "staging": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            } 
          },
          "defaultConfiguration": "production"
        },

そのあとに、Angularで使われる環境変数の設定ファイルを以下のコマンドで作ります。

ng generate environments

そうすると、以下の環境設定のファイルが作られます。

src/environments/environment.ts
src/environments/environment.development.ts
src/environments/environment.staging.ts

また、angular.jsonは、enviroment.tsのファイルを環境に合わせて置き換えるようにする内容がかかれています。
そのため、stagingでビルドすれば、environment.staging.tsが利用され、developmentでビルドすれば、environment.development.tsが利用されるので、環境ごとに異なる設定ファイルを使えるのです。

              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }

enviroment.~.tsの各設定ファイルに、以下のような感じで、環境ごとの設定値を書きます。

export const environment = {
    production: true,
    apiEndpoint: 'http://staging/api'
};

enviroment.tsの設定値を呼び出す

import文を以下のように設定すれば、environment.tsを、ビルド環境によって置き換えてくれて、環境ごとの値を利用できます。

import { environment } from '../environments/environment';

console.log(environment.apiEndpoint);

対象の環境でビルドして試す

以下のコマンドでビルドします。
以下のコマンドでは、angular.jsonでbuild項目のstagingの設定を使ってビルドしています。
※なお、build設定の環境は複数指定できるため、どれかをベースにするなどのやり方もできます。

ng build --configuration staging

ビルドしたファイルを、Webサーバの環境にデプロイするか、
angular-http-serverなどのnpmパッケージなどを使って、ビルドしたファイルから、ローカルにwebサーバを立ち上げて確認すると、以下のように、enviroment.staging.tsの設定値が使われていることが確認できました。