environment.ts を使用した環境全体での Angular アプリケーションの構築と提供 (Angular)-jsチュートリアル-php.cn

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

王林

リリース： 2024-09-03 21:00:53

オリジナル

624 人が閲覧しました

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

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

シナリオ：

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

環境のセットアップ:

環境ファイルの生成:

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

環境を生成しない

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

Building and Serving Angular Applications Across Environments with environment.ts (Angular )

環境変数の定義:

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"
  },

ログイン後にコピー