Angularの環境別変数の管理について

Angular7で、環境別(本番、ステージング、テスト、開発など)で変数を変えたいことはありませんか？
例えば、API Server(ex.GraphQL)のURLが環境ごとに異なることは普通にありますよね？
そんな時の、設定方法を説明します。

前提

• Angular7を使います。
• 環境は、本番、ステージング、テスト、開発の4つを準備します。
• API ServerにGraphQLを使い、本番、ステージング、テスト、開発でURLが違います。

API Serverをenvironmentファイルに定義

Angular7でプロジェクトを作成すると、ルート配下に「environments」と言うフォルダが作成されます。
標準では、以下の2つのファイルが存在します。

• environment.ts　･･･ 開発用
• environment.prod.ts ･･･ 本番用

この2つに、API ServerのUrlを定義しましょう。

environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/graphql'
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'http://production:3000/graphql'
};

ステージングとテストのenvironmentファイルの準備

本番用のenvironment.prod.tsをコピーして、以下の2つのファイルを作成します。

• environment.stg.ts ･･･ ステージング用
• environment.tst.ts ･･･ テスト用

次に、それぞれの環境にあったapiUrlを設定していきます。

environment.stg.ts

export const environment = {
  production: true,
  apiUrl: 'http://staging:3000/graphql'
};

environment.tst.ts

export const environment = {
  production: true,
  apiUrl: 'http://test:3000/graphql'
};

環境ごとに使用するenvironmentファイルの定義

angular.jsonの、projects、architect、configurationsで、環境ごとにどのenvironmentファイルを使うのかを定義します。
ステージング、テストの2種類を追加します。productionをコピーして、stagingとtestを作って、environmentファイル定義のところを変更してください。

angular.json

"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.stg.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
},
"test": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.tst.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
}

ビルドの定義

次にangular.jsonで、ビルドの定義をします。
serveのところに、ステージングとテストの定義を追加します。

angular.json

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "rarareserve-ui:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "rarareserve-ui:build:production"
    },
    "staging": {
      "browserTarget": "rarareserve-ui:build:staging"
    },
    "test": {
      "browserTarget": "rarareserve-ui:build:test"
    }
  }
},

これで、以下のようにビルドすると環境に応じたenvironmentファイルが読み込まれます。

• ng build ･･･ 開発用
• ng build -c test ･･･ テスト環境用
• ng build -c staging ･･･ ステージング環境用
• ng build --prod ･･･ 本番環境用

e2e環境の定義

もし、e2eテストも実施していると言うことであれば、その定義も追加します。

angular.json

"rarareserve-ui-e2e": {
  "root": "e2e/",
  "projectType": "application",
  "prefix": "",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "rarareserve-ui:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "rarareserve-ui:serve:production"
        },
        "staging": {
          "devServerTarget": "rarareserve-ui:serve:staging"
        },
        "test": {
          "devServerTarget": "rarareserve-ui:serve:test"
        }
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": "e2e/tsconfig.e2e.json",
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}

environment定義の使い方

environmentファイルに定義したものを使うには、以下のようにします。

html

{{apiUrl}}

source

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

environment.apiUrl;