azure-devops - Angular (8) 应用程序构建一次(使用生产配置)并部署到多个环境

Question

我有一种情况，我尝试使用生产配置构建我的 Angular 应用程序并部署到多个环境，例如， ng build --configuration=production

这里的工作流程是当我使用上述命令( ng build --configuration=production )构建时，environment.ts 文件被 environment.prod.ts 替换

我在environment.prod.ts中的配置如下，

export const environment = {
  production: true,
  environment: 'Production',
  _webApiHost: 'prodsomename.company.com/api/',
};

我在environmrnt.test.ts中的配置如下，

export const environment = {
    production: true,
    environment: 'Test',
    _webApiHost: 'testsomename.company.com/api/',
};

我对 angular.json 文件的设置如下，

"configurations": {
            "production": {
              "fileReplacements": [ {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              } ],
              "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"
              } ]
            },
            "test": {
              "fileReplacements": [ {
                "replace": "src/assets/configs/environment.ts",
                "with": "src/assets/configs/environment.test.ts"
              } ],
              "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"
              } ]
            }
          }

如果我分别为每个环境构建解决方案并部署到适当的环境，如下图，


它的作用就像魅力一样，这意味着，

testApp 与 _webApiHost 通信: testsomename.company.com/api/和
prodApp 与 _webApiHost 通信: prodsomename.company.com/api/

在上述情况下 由 QA 测试的工件与部署到生产中的工件不同 ，这不是将代码推向生产的理想方式。

但我担心的是我只想构建一次应用程序并将其部署到多个环境中，每个环境都将与适当的 api 通信，如下图所示，


当我使用命令 构建它时ng build --configuration=production , environment.ts 文件将有生产配置，

export const environment = {
  production: true,
  environment: 'Production',
  _webApiHost: 'prodsomename.company.com/api/',
};

因此，如果将该工件部署到测试环境中，
testApp 正在尝试与 通信_webApiHost: 'prodsomename.company.com/api/，这是不对的。

这是我用来构建解决方案的 Azure DevOps 构建管道 powershell 脚本。

Set-Location "$(Build.Repository.LocalPath)\Buffini.Web.UI\Angular"
Write-Host 'Angular Install Starting'
npm install -g @angular/cli@8.0.6 -Verbose
Write-Host 'Angular Install Finished'
Write-Host 'NPM Install Starting'
npm install -Verbose
Write-Host 'NPM Install Finished'
Write-Host 'NPM Update Starting'
npm update -Verbose
Write-Host 'NPM Update Finished'
Write-Host 'NPM Audit Starting'
npm audit fix -Verbose
Write-Host 'NPM Audit Finished'
Write-Host 'Angular Build Starting'
ng build --configuration=production --deleteOutputPath=true
Write-Host 'Angular Build Finished'

我曾尝试在网上搜索解决方案，但找不到任何解决方案。
请帮助我解决问题。我将非常感谢您在这方面的时间和帮助。提前致谢。

Answer 1

在运行时替换应用程序配置。您需要创建包含动态配置的 config.json 文件(例如 _webApiHost )。您可以查看 this blog 中的示例代码获取 config.json。

在你的管道中，你可以在部署到不同的环境(例如测试、生产)之前添加扩展任务来替换 config.json 内容。



这样你只需要构建你的 angular 应用程序一次，并且在部署到不同的环境之前只需要相应地替换 config.json 内容。

您可以查看可用的扩展。 Magic Chunks task ， 或者
RegEx Match & Replace Task .您可以查看 this thread以使用这些任务为例。