Angularで環境変数を使用する方法

序章

APIを使用するアプリを構築している場合は、開発中の環境のテストにAPIキーを使用し、本番環境のライブ環境にAPIキーを使用することをお勧めします。 Angularでは、environment.tsファイルを使用して環境変数を作成できます。

注：この投稿はAngular2+アプリに適用されます。

このチュートリアルでは、Angularで環境変数を使用する方法を学習します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv16.2.0、npm v7.15.1、および@angular/corev12.0.3で検証されました。

環境の検出

Angular CLI プロジェクトは、すでにproduction環境変数を使用して、実稼働環境で実稼働モードを有効にします。

src / main.ts

// ...

if (environment.production) {
  enableProdMode();
}

Angularには、isDevModeというユーティリティ関数も用意されており、アプリが開発モードで実行されているかどうかを確認できます。

src / app / app.component.ts

import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      console.log('Development!');
    } else {
      console.log('Production!');
    }
  }
}

このサンプルコードは、開発モードでメッセージ'Development!をログアウトし、本番モードでメッセージProduction!をログアウトします。

開発変数と生産変数の追加

また、デフォルトで/src/environmentフォルダーに、開発用の環境ファイルと本番用の環境ファイルがあることに気付くでしょう。

開発モードか本番モードかに応じて、異なるキーを使用するとします。

environment.tsの開発設定の場合：

src / environment / environment.ts

export const environment = {
  production: false,
  apiKey: 'devKey'
};

environment.prod.tsの実稼働設定の場合：

src / environment / environment.prod.ts

export const environment = {
  production: true,
  apiKey: 'prodKey'
};

そして、私たちのコンポーネントでは、変数にアクセスするために必要なことは次のとおりです。

src / app / app.component.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

Angularは、環境ファイルを正しいファイルに交換します。

次のコマンドで開発モードを実行します。

ng serve

apiKey変数はdevKeyに解決されます。

次のコマンドで本番モードを実行します。

ng serve --configuration=production

注：以前は、--prodオプションが推奨されていましたが、--configuration=productionでは非推奨になりました。

apiKey変数はprodKeyに解決されます。

ステージング変数の追加

angular.jsonファイルのconfigurationsフィールドに新しいエントリを追加して、AngularCLIプロジェクトに新しい環境を追加します。

注：以前は、この構成は.angular-cli.jsonで設定されていました。

本番環境で使用される構成に基づいて、ステージング環境を追加しましょう。

angle.json

{
  // ...
  "projects": {
    "angular-environment-example": {
      // ...
      "prefix": "app",
        "build": {
          // ...
          "configurations": {
            "staging": {
              // ...
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.stage.ts"
                }
              ],
              // ...
            },
            // ...
          },
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "angular-environment-example:build:staging"
            },
          }
        },
      }
    }
  }
}

これで、ステージング環境ファイルを追加できます。

src / environment / environment.stage.ts

export const environment = {
  production: true,
  apiKey: 'stagingKey'
};

次のコマンドで開発モードを実行します。

ng serve --configuration=staging

注：以前は、--env=stagingオプションが推奨されていましたが、これは--configuration=stagingに置き換えられました。

apiKey変数はstagingKeyに解決されます。

結論

このチュートリアルでは、Angularで環境変数を使用する方法を学びました。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。