Question

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

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

这种方法对我有意义，因为我知道完全相同的构建从一个环境到下一个环境，唯一的区别是我明确告诉它为每个环境设置的参数。超级。

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

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

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

Answer 1

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

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

Answer 2

我为每个环境创建了一个单独的包。我添加了一个构建步骤，用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的位置，这是一个很棒的查找/替换工具，我用它来替换文件中的一个字符串。

如何使用msdeploy

2 个答案: