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

我試圖在網上找到有關如何部署angular2與webpack應用程序到天青，但我找不到任何有用的信息。我檢查了這裏建議的啓動包How do you deploy Angular 2 apps?，但我也找不到那裏的幫助。如何在Azure上部署Angular2 + Webpack應用程序？

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

我很感激任何幫助:)

謝謝！

來源

2016-11-17 eestein

所以你有沒有嘗試像Angular2應用程序部署它？ – 4c74356b41

@ 4c74356b41那不是我想要的東西，我不想錯過所有的好東西:)檢查我提供的鏈接的第一個答案，第2項。謝謝。 – eestein

我想部署一個基於CLI的基於CLI2的應用程序，以及azure，我真的也在尋找一套循序漸進的說明，但不是您列出的路線（使用CodeShip）。我只想讓Azure在發生更改時監控提交和重建/部署。我還使用了由Steve Sanderson提供的模板，它運行良好，但我真的很喜歡爲我的客戶端提供一個簡單的Node.js-only方法，而不需要其他所有東西。我的理想工作流程很簡單：腳手架的angluarcli - >編輯 - >簽入github - >網站得到更新。部署對我來說是一個難題。 –

嗯，所以我能夠得到它的工作。經過研究，我發現有幾個選項可供選擇，主要是創建自己的本地產品並上傳並使用CD/CI。我和後者一起去了。這花了相當長的一段時間，但現在一切設置我不必擔心它了...

我基於自己在本教程http://tattoocoder.com/angular2-azure-codeship-angularcli/通過Shane Boyer，但由於鏈接的唯一答案是勸阻我要去寫在這裏。

我是這樣做的：

創建GitHub上的一個分支版本（我用這一個發佈）
創建於CodeShip一個免費帳戶並導入GitHub庫
對Configure Project請選擇I want to create my custom commands並使用此代碼：

nvm install 4。1個

NPM安裝角度-CLI

NPM安裝

然後這一個下測試管道：

納克服務&

納克E2E

納克構建-prod

點擊Save and go to dashboard

現在到您的Azure的門戶網站（https://portal.azure.com/）和開/創建Web應用程序

點擊Deployment Options > Choose Source > Local Git Repository

然後點擊Deployment Credentials並插入用戶/密碼，您更喜歡

點擊Overview和你Git clone url

轉到複製到Project settings > Environment variables和取值爲您的用戶名/密碼（https://username:[email protected](...).git）複製的git克隆URL添加AZURE_REPO_URL：

後，點擊在Deployment的左側導航菜單上

選擇你想要部署的分支（在我的情況下它是發行版）並點擊保存，然後點擊Custom Script

然後自定義並添加此腳本：

git config --global user.email "[email protected]" 
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爲此。

來源

2016-11-23 15:20:50 eestein

這真是太棒了，謝謝你的詳細解答！ – simonaco

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

回答

相關問題