environment.ts を使用した環境全体での Angular アプリケーションの構築と提供 (Angular)

Angular 開発者として、開発 (開発)、ユーザー受け入れテスト (UAT)、実稼働など、さまざまな環境にアプリケーションをデプロイすることはよくあることです。ただし、これらの環境の特性に合わせてコードを常に変更することは、退屈でエラーが発生しやすく、効率を妨げる可能性があります。

この記事では、コードベースを変更せずに、強力なenvironment.ts機能を活用して、さまざまな環境でAngularアプリケーションを構築して提供するための段階的なアプローチについて概説します。

シナリオ：

フロントエンドがさまざまな環境でホストされているバックエンド API と対話する Angular アプリケーションを想像してください。新しい環境を作成し、構成し、ターゲット環境に基づいてアプリケーションを提供/構築する方法を見てみましょう。

環境のセットアップ:

環境ファイルの生成:

ターミナルで次のコマンドを実行します:

環境を生成しない

これにより、src ディレクトリ内に、初期環境.ts ファイルを含む、environment という名前のフォルダーが作成されます。デフォルトでは、このファイルは開発環境構成として機能します。

環境変数の定義:

environment.ts を開いて、開発環境変数を定義します。

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

環境固有のファイルの作成:

UAT 環境と運用環境の場合は、別のファイルを作成します。

environment.test.ts (UAT 用)
environment.prod.ts (実稼働用)

それぞれの UAT および Production API URL を次のファイルに追加します:

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

コードでの環境の利用:

コード内で API URL を利用するには:

環境.ts をインポートします:

インポート { 環境 } から './environments/environment';

API URL にアクセスします:

サービスまたはコンポーネントに、環境変数を挿入します。

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

環境固有のビルド用の angular.json の構成:

ターゲット構成:

angular.json を開き、「build」の下にある「configurations」セクションを見つけます。これにより、さまざまな環境のビルド構成が定義されます。

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

これは、Angular CLI に対して、本番ビルドではデフォルトのenvironment.tsをenvironment.prod.tsに置き換え、UATビルドではenvironment.test.tsに置き換えるよう指示します。

複数の環境でアプリケーションを提供するには、次のように angular.json 内に提供構成を追加できます。

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

特定の環境向けの構築と提供:

本番環境用のビルド:

実稼働用にアプリケーションを構築するには、以下を使用します:

ng build --configuration=production

angular.json で定義された構成の名前を使用します (このシナリオでは実稼働、ステージング)

UAT に提供:

UAT 用にアプリケーションを提供するには、次を使用します。

ngserve --configuration=staging

結論

環境固有の構成を採用すると、開発者のエクスペリエンスが大幅に向上します。これは、クリーンで保守可能なアプローチを提供し、さまざまな環境にわたるアプリケーションの導入を合理化し、最終的には平均運用時間 (MTTP) を短縮します。

また、この記事を読んで気に入っていただけた場合は、ここで私について詳しく知ることができます。

以上がenvironment.ts を使用した環境全体での Angular アプリケーションの構築と提供 (Angular)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。