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

Question

我正在尝试在线查找有关如何使用webpack应用程序将angular2部署到Azure的信息，但我找不到足够有用的信息。我按照此处的建议检查了启动包。如何部署Angular 2应用程序？但是我在那里也找不到很多帮助。

所以，我有一个本地运行webpack的angular2应用程序。它在本地运行良好。但是，如何将其部署到Azure Web Apps？

感谢您的帮助:)

谢谢！

Answer 1

好吧，所以我能够让它工作。经过研究，我发现有几个选项可供选择，主要是创建您自己的本地产品版本并上传它并使用 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 安装 angular-cli

npm 安装

4. 然后是测试管道下的这个：

服务&

NG E2E

ng 构建产品

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。

感谢/sf/users/41664941/。