如何在Azure上部署Angular2 + Webpack應用程序？

Question

我正在嘗試在線查找有關如何使用webpack應用程序將angular2部署到azure的信息，但我找不到任何有用的信息。 我按照此處的建議檢查了啟動包。 如何部署Angular 2應用程序？ 但我也找不到多少幫助。

所以，我有一個在本地運行webpack的angular2應用程序。 它在當地完美運作。 但是如何將其部署到Azure Web Apps？

我感謝任何幫助:)

謝謝！

Answer 1

好吧，所以我能夠讓它運作起來。 經過研究，我發現有幾個選項，主要是創建自己的本地prod構建並上傳和使用CD / CI。 我和后者一起去了。 花了很長時間，但現在已經完成所有設置我再也不用擔心了......

我基於Shane Boyer的本教程http://tattoocoder.com/angular2-azure-codeship-angularcli/ ，但由於不鼓勵僅使用鏈接答案，我將在此處編寫。

我是這樣做的：

1. 在GitHub上創建一個分支發布（我用這個發布）

2. 在CodeShip上創建一個免費帳戶並導入GitHub倉庫

3. 在Configure Project選擇I want to create my custom commands並使用此代碼：

nvm安裝4.1

npm install angular-cli

npm安裝

4. 然后這個在Test管道下：

服務＆

ng e2e

ng build -prod

5. 單擊“ Save and go to dashboard
6. 現在轉到Azure門戶（ https://portal.azure.com/ ）並打開/創建您的Web應用程序
7. 單擊Deployment Options > Choose Source > Local Git Repository
8. 然后單擊Deployment Credentials並插入您喜歡的用戶/密碼
9. 單擊Overview並復制您的Git clone url
10. 轉到Project settings > Environment variables並添加AZURE_REPO_URL ，其值為您使用用戶/密碼復制的git clone url（ https://username:password@site.scm.az(...).git ）：
11. 之后，單擊左側導航菜單上的“ Deployment ”
12. 選擇要部署的分支（在我的情況下是發布），然后單擊“保存”，然后單擊“ Custom Script
13. 然后自定義並添加此腳本：

 git config --global user.email "email@provider.com" git config --global user.name "Your name" git clone $AZURE_REPO_URL repofolder cd repofolder rm -rf * cp -rf ~/clone/dist/* . git add -A git commit --all --author "$CI_COMMITTER_NAME <$CI_COMMITTER_EMAIL>" --message "$CI_MESSAGE ($CI_BUILD_URL)" git push origin master 

就是這樣。 現在，每次推送到GitHub CodeShip都會構建您的代碼，每次PR發布時，它都會構建並發布到azure。

感謝https://stackoverflow.com/users/595213/shayne-boyer 。