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

Question

我试图在线查找有关如何使用webpack应用程序将angular2部署到azure的信息，但我找不到任何有用的信息。我按照How do you deploy Angular 2 apps?的建议检查了启动包，但我也无法在那里找到很多帮助。

所以，我有一个在本地运行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 install 4.1

     

npm install angular-cli

     

npm install

1. 然后这个在Test管道下：

  

ng serve＆amp;

     

ng e2e

     

ng build -prod

1. 点击Save and go to dashboard
2. 现在转到Azure门户（https://portal.azure.com/）并打开/创建您的网络应用
3. 点击Deployment Options > Choose Source > Local Git Repository
4. 然后点击Deployment Credentials并插入您喜欢的用户名/密码
5. 点击Overview并复制Git clone url
6. 转到Project settings > Environment variables并添加AZURE_REPO_URL，其值为您使用用户/密码（https://username:password@site.scm.az(...).git）复制的git clone url：
7. 之后，点击左侧导航菜单中的Deployment
8. 选择要部署的分支（在我的情况下是发布）并单击“保存”，然后单击Custom Script
9. 然后自定义并添加此脚本：

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。