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

Question

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

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

感谢您的帮助:)

谢谢!

Answer 1

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

我以本教程为基础 http://tattoocoder.com/angular2-azure-codeship-angularcli/作者:Shane Boyer，但由于不鼓励只提供链接答案，所以我将把它写在这里。

我是这样做的:

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

然后是测试管道下的这个:

ng serve &

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其值为您使用用户名/密码复制的 git clone url ( https://username:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6b6a7b5b5b1a9b4a286b5afb2a3e8b5a5abe8a7bc" rel="noreferrer noopener nofollow">[email protected]</a>(...).git ):

之后，点击 Deployment在左侧导航菜单上

选择您要部署的分支(在我的例子中是发布分支)并单击“保存”，然后单击 Custom Script

然后自定义并添加此脚本:

git config --global user.email "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caafa7aba3a68abab8a5bca3aeafb8e4a9a5a7" rel="noreferrer noopener nofollow">[email protected]</a>"
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为此。