如何使用msdeploy

Question

我有一個.NET的WebAPI的解決方案，並內置Angular2 RC4（角CLI的WebPack版本）的UI部署到多個環境具有的WebPack。我很困惑如何將它們部署到不同的環境中，尤其是配置參數 - 在.NET方式和UI方式之間似乎存在不匹配，我不太明白。

以下是我目前在TeamCity中的使用方法。 WebAPI解決方案僅構建一次，並且在部署時配置。項目需要的各種配置參數（如連接字符串，端點等）存儲在web.config中。當我使用MSDeploy部署到我的測試環境時，我將setParam參數傳遞給MSDeploy命令行，該命令行將web.config中的連接字符串和端點替換爲這些值。當我部署到生產環境時，我使用相同的版本，但在命令行中將不同的參數傳遞給setParam。

這種方法對我來說很有意義，因爲我知道，完全相同的版本是從一個環境去下一個，作爲參數，唯一的區別我明確告訴它爲每個環境設置。超。

隨着Angular2和webpack它看起來像一個不同的方法是必要的。當我構建我的項目（使用ng build -prod）時，它會將我的HTML和Javascript文件最小化並捆綁到3或4個文件，以及這些文件的gzipped版本。這對於減少文件大小和提高我的網站速度非常有用，但是無法將配置參數「注入」這些gzip文件，就像MSDeploy的setParam一樣。我見過的所有提到webpack的地方都顯示了webpack.dev.config.js和webpack.prod.config.js。但這並不意味着我們需要爲每個環境構建不同的包？實際上，使用Angular2時，webpack位被認爲是「黑盒子」，無論如何不可能提供自己的webpack.config文件。

我能想到的唯一解決方法是在「main.1234abcd6946c6a08519.bundle.js」上使用TeamCity的「File Content Replacer」來替換我的配置參數和該環境的值，然後gzip該文件 - 覆蓋一個由webpack創建。

但這太可怕了，所以我在尋找更好的建議？

Answer 1

我對webpack沒有任何經驗，或者如果這比你的解決方法更好，但你可以使用TextFile類的setParam條目在部署時使用正則表達式查找/替換來更改項目中的任何文件。

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的位置這是一個偉大的查找/替換工具，我用另一個文件來替換一個字符串。