如何在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应用程序？

回答

相关问题