web-dev-qa-db-ja.com

VSTSビルド-リリース段階でAngular4環境変数を置き換える

現在、Angular4には3つの異なる環境があります。

  • 環境
  • Environment.Debug
  • 環境。リリース

enter image description here

ここで、vstsビルドパイプラインで、1つの定義がアーティファクトをデバッグおよびリリース用に準備するマルチ構成をセットアップしました。
enter image description here

「 Replace tokens 」タスクを使用して、npm installおよびnpm run {デバッグまたはリリース）次に、デバッグまたはリリース環境用のファイルをパックするためにwebpackを実行します。

.jsonファイル（appsettings.jsonなど）の変数を置き換えることができるリリースの変数を置き換えるオプションがあることを確認しました： enter image description here

しかし問題は、webpackがソースコードを1つのbundle.jsにパックするときです。環境変数を置き換えるためにreleaseを使用できないと思いますか？できますか？

したがって、私が達成したいのは、デバッグとリリースのビルドを分離することです。これは簡単です。デバッグとリリースの個別の定義を再作成するだけで、環境ごとに変数を置き換えるだけです。 2番目の段階は、ビルドパイプラインからトークンの置き換えタスクを実際に削除し、リリース変数セクションを使用して、リリースで設定された環境ごとの変数を置き換えることです。 Angular for webpack build js bundle in js？

c#angularazureazure-devopsazure-pipelines
8
amels

environment.xx.tsファイルから構成値を取得し、angularブートストラップ時に実行時に取得するjson構成ファイルにそれらを配置できます。

リリースするときは、前述のトークン置換タスクを使用して、jsonファイルのトークンを置き換えます。

（使いやすくするために）構成オブジェクトのクライアント側で構造が同じである限り、jsonファイルの構造は重要ではありません。構造が同じでない場合は、取得したデータを変換して構成オブジェクトに割り当てる必要があります。

config.json

{
  "envName": "@@envName@@",
  "ApplicationInsights": { "InstrumentationKey": "@@xxx@@" }
}

次に、あなたのangularアプリに一致するクラスがあります

export class MyConfig
{
  readonly envName: string;
  readonly ApplicationInsights:
  {
      readonly InstrumentationKey: string
  }

}

Jsonデータangular side（と呼ばれるjsonData）を取得したら、それを構成オブジェクトに割り当てます

config-service.ts

export let CONFIG: MyConfig;

//Modify jsonData if needed
let t = new MyConfig();
CONFIG = Object.assign(t, jsonData);

component.ts

import {CONFIG} from '../config-service.ts';
//...
//use it
let url = CONFIG.ApplicationInsights.InstrumentationKey;

完全な実装

https://stackoverflow.com/a/49559443/1160794

3
David

最も単純で最も効率的なアプローチは、Angular環境ファイルにトークンを作成し、リリースでTokenizerを使用して、メインバンドルにコンパイルされたトークンを置き換えることです。このアプローチでは、既存のコードは変更する必要があります。

つまり、プロジェクトではなく、CI/CDで環境変数を管理します。 （プロジェクトには、ローカルで実行するためのデフォルトの環境ファイルが必要です。ローカルテストでは他のファイルが必要になる場合があります）

これを行うには、最初にAngular environment.deploy.tsなどのデプロイメント環境を作成します。これは、ビルドで使用するものです（1つのビルドのみ、複数のリリース）。

environment.deploy.tsの例を次に示します。

export const environment = {
  displayLeftPanel: "__env.displayLeftPanel__".toLowerCase() === "true",
  siteName: "__env.siteName__",
  apiUrl: "__env.apiUrl__",
};

（名前の前にenv.を追加して、トークン名がバンドル内の既存の名前と衝突しないようにします）

リリース変数で、環境ごとにこれらの変数を構成します。

env.displayLeftPanel
env.siteName
env.apiUrl

リリースの展開では、以下のようなタスクが必要になります（以下はIISの場合ですが、これを他のすべてのロードマップとして使用できます）

以下のタスクは次の問題に対処します：

  • ビルドアーティファクトは通常圧縮されており、Zipファイル内でトークン化することはできないため、まず解凍する必要があります。
  • WebPackバンドル名にはランダムなIDが含まれています（例：main.20f8aa2b341c1c2f6442.bundle.js）。 Tokenizerに渡す正確なファイル名を取得する必要があります。
  • 次に、「Tokenize with XPath/Regular expression」などのTokenizerを使用します

ここにタスクがあります：

  • IIS Webアプリ管理
  • ファイルの抽出：* .zipをunzipなどのフォルダに

  • PowerShell：メインバンドル名を取得します。次のようなもの：（パスを調整する必要があるかもしれません）

    $ MainBundleFileName =（get-item $（System.DefaultWorkingDirectory）/ main。*。bundle.js）.FullName; Write-Host "## vso [task.setvariable variable = MainBundleFileName;] $ MainBundleFileName"

  • Tokenizer：メインバンドルで変数の置換を実行> $（MainBundleFileName）

  • IIS Web App Deploy：解凍されたフォルダー
4
Tolga