Как развернуть в нескольких средах с помощью webpack с помощью msdeploy

Question

У меня есть решение .NET WebAPI и пользовательский интерфейс, встроенный в Angular2 RC4 (версия веб-страницы angular-cli). Я смущен тем, как их можно развернуть в разных средах, особенно в параметрах конфигурации. Кажется, что существует некорректная связь между способом .NET и пользовательским интерфейсом, что я не совсем понимаю.

Вот как я получил его сейчас в TeamCity. Решение WebAPI построено только один раз и сконфигурировано во время развертывания. Различные параметры конфигурации, необходимые для проекта (например, строки подключения, конечные точки и т. Д.), Хранятся в web.config. Когда я развертываю свою тестовую среду с помощью MSDeploy, я передаю аргументы setParam в командную строку MSDeploy, которая заменяет строки подключения и конечные точки в файле web.config с этими значениями. Когда я развертываю на производство, я использую одну и ту же сборку, но передаю разные аргументы в setParam в командной строке.

Этот подход имеет смысл для меня, потому что я знаю, что одна и та же сборка происходит из одной среды в другую, единственной отличительной особенностью которой я специально сказал ей настройки для каждой среды. Супер.

С помощью Angular2 и webpack, похоже, нужен другой подход. Когда я создаю свой проект (с ng build -prod), он сводит к минимуму и связывает мои файлы HTML и Javascript с 3 или 4 файлами вместе с gzipped версиями этих файлов. Это отлично подходит для уменьшения размера файла и увеличения скорости моего веб-сайта, но нет возможности «вводить» параметры конфигурации в эти файлы gzip, например, с файлом setParam от MSDeploy. Везде, где я видел, что упоминает webpack, отображается webpack.dev.config.js и webpack.prod.config.js. Но разве это не значит, что нам нужно построить другой пакет для каждой среды? И на самом деле с Angular2 бит webpack считается «черным ящиком», и в любом случае вы не можете предоставить свой собственный файл webpack.config.

Единственным обходным решением, которое я могу придумать, является использование «Репликатора содержимого файла» TeamCity на «main.1234abcd6946c6a08519.bundle.js», чтобы заменить мои параметры конфигурации значениями для этой среды, затем gzip этот файл - перезапись один из которых создан webpack.

Но это ужасно, так что я ищу любые лучшие предложения?

Answer 1

У меня нет опыта работы с веб-пакетом, или если это лучше, чем ваш обходной путь, но вы можете использовать запись типа setParam TextFile для изменения любого файла в вашем проекте, используя Regex find/replace во время развертывания.

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

Answer 2

Я пошел с созданием отдельного пакета для каждой среды. Я добавил шаг сборки, который заменяет мой URL-адрес API на localhost в src \ app \ environment.ts, с соответствующим 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, который является большая находка/заменить инструмент, который я использую, чтобы заменить одну строку в файле с другой.