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

我不会假装这是一个答案，不一定，但它的想法足够长，不适合在评论区。也许您会发现它很有帮助。（完全披露：我没有使用 Azure，而是使用 GitLab。因此，无论如何，如果您发现这种使用方法，都需要进行一些翻译。）

不管怎样，我刚才也问过同样的问题。经过一番挖掘，I found this link helpful

根据该指导，我执行了以下操作：

首先，我做了一个基本的 docker 构建。在那个版本中，我在一个文件夹中有各种环境文件 "ready for the asking"。实际驱动应用程序的配置文件在根目录。

然后我再做一个 docker 构建，这个构建的唯一目的是采用第一个构建并为其提供所需的配置。（我这样做是因为第一次构建很慢，但我想在不重建的情况下推向生产。）

接下来我进行我想要的环境构建。

对于暂存，例如：在我的 GitLab 构建 CI/CD 管道 yaml 中，我有这样一行....

docker build -t xxxxx --build-arg SERVE_CONFIGURATION=staging -f [A-Docker-File] .

docker 文件在所有环境中都是相同的，但根据传入的参数，此 docker 构建会提取不同的文件并将其猛烈撞击到驾驶员座位上。由于 Angular 部署中没有秘密，因此文件夹结构中潜伏着额外的（未使用的）配置文件并不重要（尽管如果有动机，可以轻松删除它们。）

无论如何，在第 2 个 docker 构建中，我有...

...
FROM registry.gitlab.com/xxxxxxxxxxxx/compiled as default-config
FROM registry.gitlab.com/xxxxxxxxxxxx/compiled as final-config

COPY --from=default-config /usr/share/nginx/html/environments/environment.$SERVE_CONFIGURATION.js /usr/share/nginx/html/environment.js

所以这个 docker 图像只不过是之前图像的构建，但是在适当的位置有所需的环境文件。

无论如何，我可能遗漏了一些细节，但我不确定这是否会对您有所帮助，并且会在这里停止。

Answer 2

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

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

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

您可以查看可用的扩展程序。 Magic Chunks task，或 RegEx Match & Replace Task. You can check this thread 示例使用这些任务。

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

Angular (8) application build once (with production config) and deploy to multiple environments

build-pipeline

azure-devops

azure-pipelines-release-pipeline

angular8