序章
APIを使用するアプリを構築している場合は、開発中の環境のテストにAPIキーを使用し、本番環境のライブ環境にAPIキーを使用することをお勧めします。 Angularでは、environment.ts
ファイルを使用して環境変数を作成できます。
注:この投稿はAngular2+アプリに適用されます。
このチュートリアルでは、Angularで環境変数を使用する方法を学習します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
このチュートリアルは、ノードv16.2.0、npm
v7.15.1、および@angular/core
v12.0.3で検証されました。
環境の検出
Angular CLI プロジェクトは、すでにproduction
環境変数を使用して、実稼働環境で実稼働モードを有効にします。
// ...
if (environment.production) {
enableProdMode();
}
Angularには、isDevMode
というユーティリティ関数も用意されており、アプリが開発モードで実行されているかどうかを確認できます。
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
の開発設定の場合:
export const environment = {
production: false,
apiKey: 'devKey'
};
environment.prod.ts
の実稼働設定の場合:
export const environment = {
production: true,
apiKey: 'prodKey'
};
そして、私たちのコンポーネントでは、変数にアクセスするために必要なことは次のとおりです。
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
で設定されていました。
本番環境で使用される構成に基づいて、ステージング環境を追加しましょう。
{
// ...
"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"
},
}
},
}
}
}
}
これで、ステージング環境ファイルを追加できます。
export const environment = {
production: true,
apiKey: 'stagingKey'
};
次のコマンドで開発モードを実行します。
- ng serve --configuration=staging
注:以前は、--env=staging
オプションが推奨されていましたが、これは--configuration=staging
に置き換えられました。
apiKey
変数はstagingKey
に解決されます。
結論
このチュートリアルでは、Angularで環境変数を使用する方法を学びました。
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。