Question

我很难找到一个解决方案，将Visual Studio Team Services（ VSTS ）发布变量传递到单页应用程序（ SPA < / em>）网站。我将尝试在下面解释相当多的动作部分。

我在VSTS中创建了一个发布变量ServiceLocations.ApiBaseUri，它对每个环境（dev/test/stage/prod）都是唯一的，我的最终目标是使用typescript类（{{}来使用此变量的值。 1}}）。

我无法将文本替换作为webpack构建的一部分，因为构建输出是在环境之间共享的。

我无法注入构建输出，因为~/src/services/ApiService.ts目录的内容是由webpack转换为构建成动态文件名的缩小/丑化ES5包的一部分。

该网站托管在IIS内部运行的ASP.NET Core包装器中，否则我可以利用Node的文件系统库从静态文件中读取。

我能够让VSTS将值写入项目根目录的~/src/（appsettings.json之外），但不确定SPA如何在运行时读取此值

有人可以就实际方法提出任何建议吗？

Answer 1

在VSTS中创建或编辑构建时，除了“任务”选项卡外，还有一个“变量”选项卡。在那里你可以设置你的环境变量，包括基础api url - 这就是我们在VSTS上构建一个react应用程序时所做的事情（我们拥有真实版本的截图）

然后在代码中你使用它： export const baseUrl = process.env.REACT_APP_BASE_API_URL; 这是Javascript，但应该类似于Typescript。

唯一的缺点是每个环境都必须有单独的构建定义。

Answer 2

VSTS发布过程提供了将变量替换为JSON文件的功能，作为IIS站点部署任务的一部分。

我们正在利用此功能将ServiceLocations.ApiBaseUri的值写入文件（~/clientconfig/settings.json），该文件具有以下允许本地开发的初始内容：

{
  "ServiceLocations": {
    "ApiBaseUri": "https://localhost:44390"
  }
}

在ASP.NET Core Startup.cs文件中，我们静态托管此文件，以便SPA可以使用它：

app.UseStaticFiles(new StaticFileOptions
{
  FileProvider = new PhysicalFileProvider(
    Path.Combine(
      Directory.GetCurrentDirectory(), "clientconfig")),
  RequestPath = "/clientconfig"
});

然后在SPA ApiService.ts中，我们使用fetch为设置文件创建HTTP请求：

fetch("/clientconfig/settings.json", {
  method: "GET",
  credentials: "omit"
}).then(response => {
  return response.json();
}).then(settings => {
  this._apiBaseUri = settings.ServiceLocations.ApiBaseUri;
})

Answer 3

您可以使用--environment="ENV_NAME"构建项目，其中ENV_NAME"是您要定位的环境的名称。
（请注意，它必须在节点.angular-cli.json下的environments配置文件中注册）

然后，您可以在各种环境文件中为同一变量定义不同的值。构建时，Angular将使用--environment标志来使用指定env文件中的值。

要使用该变量，您需要从执行

的环境文件中导入它

import { /*Your vars and/or functions */ } from "../../environments/environment";

独立于您正在定位的环境。

Answer 4

由于您的SPA托管在ASP.NET Core包装器中，我想您也可以在ApiBaseUri文件中检索应用设置Layout.cshtml并使用此值创建一个全局js变量。

如果您发现此解决方案有什么不足之处，请告诉我。

在运行时读取VSTS版本变量（TypeScript / Webpack SPA）

4 个答案: