基于.Net Core构建选择正确的Angular环境

Question

我使用Angular ClientApp和Visual Studio的模板创建了.Net Core Web Api。

在构建项目时，还将使用.csproj <Target>部分中设置的参数来构建包含的Angular App。

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

（此部分是在创建新项目时自动生成的）

但是，这让我别无选择，应该在构建期间使用Angular中的哪个environment.ts文件，这使得针对不同部署目标的构建有些复杂。

有什么方法可以在构建过程中动态设置此文件？例如

• appsettings.json应该与environment.ts 一起构建
• appsettings.Development.json应该与environment.dev.ts 一起构建
• appsettings.Production.json应该使用environment.prod.ts构建
• 等等

这将确保每个dotnet构建及其对应的Angular构建对于api-url，版本等具有正确的环境值...

还是有另一种（更清洁的方法）为Angular App使用/覆盖环境变量？

这些是在构建期间应交换的值

export const environment = {
    production: false,
    dataServiceURI: 'https://localhost:5001/data',
    version: 'localhost'
};

例如，由于localhost：5001在生产中没有可行的选择

Answer 1

我毕竟通过操纵* .csproj找到了解决方案。

提示：明确地说，此问题仅在您使用创建项目并Visual Studio .Net Core Web Api with Angular Template使用clientapp项目创建组合的Web api时适用。

在发现可以添加自定义构建配置之后，dotnet build我向该<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">块添加了以下几行：

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" Condition="'$(Configuration)' == 'Release'" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />

并在package.json中添加到脚本：

"scripts": {
        "build-staging": "ng build --configuration=staging",
        "build-prod": "ng build --configuration=production",
    },

它在Condition属性设置的不同构建配置上执行的操作在npm run build相应/适当的环境下进行调用。

另一种可能更简单的方法是拥有两个构建管道，一个用于npm和angular app，另一个用于dotnet Web api。这样做时，您可能需要从* .csproj中删除整个构建SPA的内容，否则它将两次构建应用程序。

或者只是首先有2个独立的项目，避免麻烦:)

编辑：

如所指出的Command="npm run build --configuration=production"（例如，使用多重参数的构建）不会被CI / CD接受。因此，使用package.json中的预定义脚本是正确的方法:)

Answer 2

我只想提供一个端到端的解决方案，因为花了我很多时间才可以为您节省时间:)。

我的目标是为不同的公司使用不同的环境配置，因为Web应用程序将由不同的公司使用，而只需进行少量更改（启用/禁用模块，更改徽标，更改主题颜色等）。

1. 配置launchSettings.json（在Web项目中的属性下）。在下面添加以下代码profiles：

"Staging": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": {
   "ASPNETCORE_ENVIRONMENT": "Staging"
 },
 "applicationUrl": "https://localhost:5001;http://localhost:5000"
}

Staging如果需要的环境名称，名称在哪里。这将确保您能够Start在Visual Studio中选择此配置。

有关更多信息：请阅读

2. appsettings.Staging.json在解决方案的根目录中添加您自己的文件以进行自定义应用设置。尽管这对于本地测试最重要，因为在CI / CD中，您可能需要配置替代项。如果确实要appsettings.Staging.json在生产环境中使用特定的产品，则在服务器上将其设置ASPNETCORE_ENVIRONMENT为Staging（对于Configuration => Application Settings下的azure App Service）。

3. 在中Startup.cs，添加以下else if块。

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
    else if (env.EnvironmentName == "Staging")
    {
#if DEBUG
        spa.UseAngularCliServer(npmScript: "start-stagingdebug");
#endif
    }
});

请注意#if DEBUG，这是必需的，因为您不想在已部署的环境中执行此操作，但是对于在本地运行的angular，您必须调用它，否则最终将显示错误页面。您可能还会注意到，我将debug环境名称附加在后面，稍后再说明。现在，您必须意识到这env.IsDevelopment() 是错误的，因此，您必须变通以确保在本地运行应用程序时仍然可以构建和提供有角度的应用程序。

4. 修改angular.json下的architect => build => configurations，添加2个新配置：

"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ],

  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
},
"stagingdebug": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ]
}

如果您知道一点，angular.json您会注意到在staging为生产环境进行配置时，我将确保我的CI / CD会调用它（或者当我通过VS2017发布应用程序时）。对于本地测试，我拥有不同的配置stagingdebug，因此它仍然保留源映射，并且能够在本地运行时调试代码。

5. 将environment.staging.ts文件添加到environments文件夹中，以获取特定于环境的选项。对此有更多了解，请阅读

6. package.json在下方修改您的，scripts我添加了以下脚本：

"start-staging": "ng serve --configuration staging",
"start-stagingdebug": "ng serve --configuration stagingdebug",
"build-staging": "ng build --configuration staging",
"build-stagingdebug": "ng build --configuration stagingdebug",

同样在这里：对于本地开发，我将其debug附加的配置称为调用。

到目前为止，您应该能够在Visual Studio中更改为新配置，并根据新的环境配置运行！

7. 修改您的.csproj，谢谢。请再次注意，这仅用于发布Web应用程序，而不用于本地调试。

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />

 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-core" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run buildprod" Condition="'$(Configuration)' == 'Release'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
  <!--rest below here-->

我修改了我的方法以调用在script我的定义中所定义的正确名称package.json，因为由于某种原因，当我使用pjominet的答案时，我的CI没有使用它后面的多余命令。

如果使用的是Azure DevOps，则只需将BuildConfiguration变量设置为即可Staging。如果按照所有步骤进行操作，则应该可以成功构建。