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

【问题标题】：How to deploy an Angular2 + Webpack app on Azure?如何在 Azure 上部署 Angular2 + Webpack 应用程序？
【发布时间】：2017-04-01 11:08:58
【问题描述】：

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

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

感谢您的帮助:)

谢谢！

【问题讨论】：

那么您是否尝试过像 Angular2 应用一样部署它？
@4c74356b41 这不是我想要的，我不想错过所有的好东西 :) 检查我提供的链接的第一个答案，第 2 项。谢谢。
我也想将基于 angular2 CLI 的应用程序部署到 azure，并且我真的在寻找一套分步说明，但不是您概述的路线（使用 CodeShip ）。我只是希望 azure 监视提交并在发生更改时重建/部署。我还使用了一个由 Steve Sanderson 提供的模板，效果很好，但我真的很想为我的客户端使用一个简单的 Node.js-only 方法，而不需要周围的所有其他东西。我理想的工作流程很简单：脚手架的 angluarcli -> 编辑 -> 签入到 github -> 站点得到更新。部署对我来说是一场斗争。
@DennisWard 我理解你的沮丧，我希望它像 Azure 使用 GitHub webhook 构建 .net 项目一样简单，但事实并非如此。对我有用的是我发布的答案，因为该服务是免费的，而且您还有其他免费选项，例如 circleci 等等……无论如何，对不起，我无能为力……

标签： azure angular webpack

【解决方案1】：

嗯，所以我能够让它工作。经过研究，我发现有几个选项可供选择，主要是创建自己的本地产品构建并上传并使用 CD/CI。我选择了后者。花了一些时间，但现在一切都准备好了，我不必再担心了......

我以 Shane Boyer 的本教程 http://tattoocoder.com/angular2-azure-codeship-angularcli/ 为基础，但由于不鼓励仅提供链接的答案，因此我将在此处编写。

我是这样做的：

在GitHub上创建一个分支发布（我用这个发布）
在 CodeShip 上创建一个免费帐户并导入 GitHub 存储库
在Configure Project 上选择I want to create my custom commands 并使用以下代码：

nvm 安装 4.1

npm install angular-cli

npm 安装

然后这个在测试管道下：

服务&

ng e2e

ng build -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 并添加AZURE_REPO_URL，其值是您使用用户/密码（https://username:password@site.scm.az(...).git）复制的 git clone url：
之后，点击左侧导航菜单上的Deployment
选择你想要部署的分支（在我的例子中是发布）并点击保存，然后点击Custom Script
然后自定义并添加此脚本：

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。

【讨论】：