如何使用 msdeploy 使用 webpack 部署到多个环境答案

【问题标题】：How to deploy to multiple environments with webpack using msdeploy如何使用 msdeploy 使用 webpack 部署到多个环境
【发布时间】：2016-12-17 11:22:31
【问题描述】：

我有一个 .NET WebAPI 解决方案，以及一个在 Angular2 RC4（angular-cli webpack 版本）中构建的 UI。我对如何将它们部署到不同的环境感到困惑，尤其是配置参数 - .NET 方式和 UI 处理方式之间似乎存在不匹配，我不太明白。

这是我目前在 TeamCity 中获得它的方式。 WebAPI 解决方案仅构建一次，并在部署时配置。项目所需的各种配置参数（如连接字符串、端点等）存储在 web.config 中。当我使用 MSDeploy 部署到我的测试环境时，我将 setParam 参数传递给 MSDeploy 命令行，它将 web.config 中的连接字符串和端点替换为这些值。当我部署到生产环境时，我使用相同的构建，但在命令行中将不同的参数传递给 setParam。

这种方法对我来说很有意义，因为我知道完全相同的构建会从一个环境转移到另一个环境，唯一的区别是我专门告诉它为每个环境设置的参数。超级棒。

对于 Angular2 和 webpack，看起来需要一种不同的方法。当我构建我的项目（使用ng build -prod）时，它会将我的 HTML 和 Javascript 文件以及这些文件的 gzip 压缩版本最小化并捆绑到 3 或 4 个文件中。这对于减小文件大小和提高网站速度非常有用，但是无法像 MSDeploy 的 setParam 那样将配置参数“注入”到这些 gzip 文件中。我所看到的所有提到 webpack 的地方都显示 webpack.dev.config.js 和 webpack.prod.config.js。但这是否意味着我们需要为每个环境构建不同的捆绑包？实际上，对于 Angular2，webpack 位被认为是“黑匣子”，无论如何都不可能提供您自己的 webpack.config 文件。

我能想到的唯一解决方法是在“main.1234abcd6946c6a08519.bundle.js”上使用 TeamCity 的“文件内容替换器”将我的配置参数替换为该环境的值，然后 gzip 该文件 - 覆盖那个由 webpack 创建。

但这太可怕了，所以我正在寻找更好的建议？

【问题讨论】：

你不能压缩文件...我认为你的意思是缩小
您的 webpack 配置只是一个节点应用程序。从 CLI 将参数传递到应用程序
@cgatian 通过“gzip 该文件”我的意思是使用 7zip 或其他东西以 gzip 格式将其压缩。要创建捆绑包，我需要运行“ng build -prod”，不幸的是它不接受任何与 webpack 相关的参数。
该死的。不知道

标签： deployment angular webpack teamcity msdeploy

【解决方案1】：

我为每个环境创建了一个单独的包。我添加了一个构建步骤，将 src\app\environment.ts 中 localhost 上的 API URL 替换为该环境的相应 URL，然后运行 npm build -prod，然后运行 MSDeploy 来创建包。我对所有我想要定位的环境都这样做。

这是脚本：

REM =====CREATE TEST PACKAGE==================================================

REM backup the environment file
ren src\app\environment.ts environment.ts.bak
copy /Y src\app\environment.ts.bak src\app\environment.ts


REM replace localhost in environment file with the TEST environment URL
"%env.FART%" src\app\environment.ts http://localhost:12345 %TEST.api.url%


REM build using this environment
call npm run build-prod


REM restore backup environment file
del /Q src\app\environment.ts
ren src\app\environment.ts.bak environment.ts


REM create TEST package
"%env.MSDEPLOY%"  ^
 -verb:sync  ^
 -source:contentPath="%teamcity.build.workingDir%\dist"  ^
 -dest:package="%teamcity.build.checkoutDir%\Package_TEST.zip"




REM =====CREATE PROD PACKAGE==================================================

REM backup the environment file
ren src\app\environment.ts environment.ts.bak
copy /Y src\app\environment.ts.bak src\app\environment.ts


REM replace localhost in environment file with the PROD environment URL
"%env.FART%" src\app\environment.ts http://localhost:12345 %PROD.api.url%


REM build using this environment
call npm run build-prod


REM restore backup environment file
del /Q src\app\environment.ts
ren src\app\environment.ts.bak environment.ts


REM create PROD package
"%env.MSDEPLOY%"  ^
 -verb:sync  ^
 -source:contentPath="%teamcity.build.workingDir%\dist"  ^
 -dest:package="%teamcity.build.checkoutDir%\Package_PROD.zip"

顺便说一句，%env.FART% 是fart.exe 的位置，这是一个很棒的查找/替换工具，我用它来替换文件中的一个字符串。

【讨论】：

【解决方案2】：

我对 webpack 没有任何经验，或者如果这比您的解决方法更好，但您可以使用 TextFile 类型的 setParam 条目在部署时使用 Regex 查找/替换来更改项目中的任何文件。

https://technet.microsoft.com/en-us/library/dd569084(v=ws.10).aspx

【讨论】：

我确实在部署的另一部分使用了该方法，但我不确定它是否可以在 gzip 文件中工作:(
不能。我不清楚 gzip 文件是如何使用的。对不起。我唯一的另一个想法是，您可以为每个环境创建一个 gzip 版本，然后在部署时使用参数化来引用正确的版本。
是的，这就是我现在开始做的事情。这可能很好，只是与我习惯的思维方式不同。谢谢
如果此答案有帮助，请不要忘记将其标记为答案。