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

Question

我遇到一种情况，我\xe2\x80\x99m 尝试使用生产配置构建我的角度应用程序并部署到多个环境，例如ng build --configuration= product

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

\r\n

\r\n

"configurations": {\r\n            "production": {\r\n              "fileReplacements": [ {\r\n                "replace": "src/environments/environment.ts",\r\n                "with": "src/environments/environment.prod.ts"\r\n              } ],\r\n              "optimization": true,\r\n              "outputHashing": "all",\r\n              "sourceMap": false,\r\n              "extractCss": true,\r\n              "namedChunks": false,\r\n              "aot": true,\r\n              "extractLicenses": true,\r\n              "vendorChunk": false,\r\n              "buildOptimizer": true,\r\n              "budgets": [ {\r\n                "type": "initial",\r\n                "maximumWarning": "2mb",\r\n                "maximumError": "5mb"\r\n              } ]\r\n            },\r\n            "test": {\r\n              "fileReplacements": [ {\r\n                "replace": "src/assets/configs/environment.ts",\r\n                "with": "src/assets/configs/environment.test.ts"\r\n              } ],\r\n              "optimization": true,\r\n              "outputHashing": "all",\r\n              "sourceMap": false,\r\n              "extractCss": true,\r\n              "namedChunks": false,\r\n              "aot": true,\r\n              "extractLicenses": true,\r\n              "vendorChunk": false,\r\n              "buildOptimizer": true,\r\n              "budgets": [ {\r\n                "type": "initial",\r\n                "maximumWarning": "2mb",\r\n                "maximumError": "5mb"\r\n              } ]\r\n            }\r\n          }

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

testApp与 _webApiHost 通信：testsomename.company.com/api/且prodApp与 _webApiHost 通信：prodsomename.company.com/api/

\n\n

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

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

我尝试过在线搜索解决方案，但我无法\xe2\x80\x99找到任何解决方案。\n请帮我解决这个问题。我\xe2\x80\x99将非常感谢您的时间和帮助。提前致谢。

\n

Answer 1

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

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

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

您可以查看可用的扩展。魔术块任务，或 正则表达式匹配和替换任务。您可以检查此线程的示例以使用这些任务。