VSTS build - 在 Release 阶段替换 Angular4 环境变量答案

【问题标题】：VSTS build - replace Angular4 environment variables in Release stageVSTS build - 在 Release 阶段替换 Angular4 环境变量
【发布时间】：2018-04-11 09:07:50
【问题描述】：

目前我在Angular4中有三种不同的环境：

环境
环境调试
Environment.Release

现在，在 vsts 构建管道中，我设置了多配置，其中一个定义为调试和发布准备工件：

在我运行 npm install 和 npm run {either debug or release) 之前，我正在使用“Replace tokens”任务来替换每个调试和发布环境的变量然后运行 webpack 打包文件用于调试或发布环境。

我看到 Release 中有一个替换变量的选项，您可以在其中替换 .json 文件中的变量（如 appsettings.json）：

但问题是当 webpack 将源代码打包到一个 bundle.js 中时，我认为我不能使用 release 来替换环境变量？可以吗？

所以我想要实现的是解耦调试和发布版本。这很简单，我只是为调试和发布重新创建单独的定义，在这里我只替换每个环境的变量。第二阶段是从构建管道中实际删除替换令牌任务，并使用发布变量部分来替换发布中设置的每个环境的变量。 webpack 在 js 中构建 bundle 后，Angular 怎么可能？

【问题讨论】：

从环境文件中获取非特定于构建的所有设置的配置。看看这里stackoverflow.com/a/49559443/1160794
谢谢，这正是我所需要的，.json 文件的结构是否与 appsettings.json 相同以使用 Release 变量？
您可以在 json 文件中使用您需要的任何格式。之后，取决于您选择的格式（在提供的示例中，它与 environment.xx.ts 文件格式相同）
我在想json文件是否必须是相同的格式，所以vsts中的发布阶段可以替换变量？例如，对于标准 appsettings.json，我们在 release 中替换像这样的变量：i.imgur.com/U9zeoJ4.png 用于“ApplicationInsights”这样的结构：{“InstrumentationKey”：“xxx”}，
@AmelSalibasic 如果您使用的是 angular-cli，那么这是由 ng build --env="envname" 自动完成的

标签： c# angular azure azure-devops azure-pipelines

【解决方案1】：

最简单和最有效的方法是在你的 Angular Environment 文件中创建标记，并在你的 Release 中使用标记器来替换那些编译到你的 Main Bundle 中的标记。使用这种方法，您现有的任何代码都无需更改。

这意味着您将在 CI/CD 中管理您的环境变量，而不是您的项目。（您的项目仍然需要一个默认环境文件来在本地运行，可能还需要其他环境文件来进行本地测试）

为此，首先创建一个用于部署的 Angular 环境，例如 environment.deploy.ts。这就是您的构建将使用的内容（仅一个构建，多个版本）。

这是一个例子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，但您可以将其用作其他任何事情的路线图）

以下任务解决了以下问题：

构建工件通常是压缩的，我们无法在压缩文件中进行标记，因此我们必须先解压缩它。
WebPack 包名称中包含随机 ID（例如：main.20f8aa2b341c1c2f6442.bundle.js）。我们需要获取准确的文件名以传递给我们的 Tokenizer。
然后我们只使用一个 Tokenizer，例如“Tokenize with XPath/Regular expressions”

以下是任务：

IIS Web 应用管理
解压文件：*.zip 到解压后的文件夹中
PowerShell：获取主包名称。比如：（你可能需要调整路径）

$MainBundleFileName = (get-item $(System.DefaultWorkingDirectory)/main.*.bundle.js).FullName; 写主机 "##vso[task.setvariable variable=MainBundleFileName;]$MainBundleFileName"
Tokenizer：在 Main Bundle 上执行变量替换 > $(MainBundleFileName)
IIS Web App Deploy：解压后的文件夹

【讨论】：

为了替换 zip 文件中的令牌，我发现了这个任务：marketplace.visualstudio.com/…

【解决方案2】：

您可以从 environment.xx.ts 文件中获取配置值，并将它们放入 json 配置文件中，当角度引导时，您将在运行时检索这些文件。

发布时，使用你提到的token替换任务替换json文件中的token。

json 文件的结构并不重要，只要配置对象客户端的结构相同（使其更易于使用）即可。如果结构不同，您只需转换检索到的数据以将其分配给您的配置对象。

config.json

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

那么你的 Angular 应用中有一个匹配的类

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

}

一旦您检索到 json 数据角度端（称为 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

【讨论】：