ASP.NET Core 2 + Angular -> 如何设置 VSTS？答案

【问题标题】：ASP.NET Core 2 + Angular -> how set up VSTS?ASP.NET Core 2 + Angular -> 如何设置 VSTS？
【发布时间】：2017-10-01 06:39:13
【问题描述】：

我已将我的 ASP.NET Core + Angular WebApp 上传到 GitHub（通过 VSTS），现在我想设置 CI 管道。之后，我想部署我的应用到 Azure。

在模板部分 - 有一个 ASP.NET Core 模板，还有一个 Azure Web App 模板。

考虑我的情况哪个更适合这种情况？

【问题讨论】：

您是否有一个项目同时包含这两个项目？还是将它们分开在一个专用的 API 和 SPA 项目中，提供单独的输出？
@ChrisRichner 这是一个解决方案和一个 ASP.NET Core 项目。该项目中有一个名为 ClientApp 的文件夹，其中包含所有（我相信）Angular 的东西。该项目基本上是几天前与 ASP.NET Core 2.0.0 一起发布的新 Angular 模板，顺便说一句，您可以在 30 秒内查看并查看它...如果您有 . Core 2 安装在你的机器上 :)
dotnet new angular 规则！ ,)
仅供参考您是否已经知道如今从代码转到运行站点是多么容易。查看 在 Azure 的 Linux 容器中创建 .NET Core Web 应用程序 |微软文档docs.microsoft.com/en-us/azure/app-service/containers/…
你用我的解决方案解决了这个问题吗？

标签： asp.net angular azure continuous-integration azure-devops

【解决方案1】：

我在Levi Fuller's blog 中找到了几乎完美的工作答案。您只需稍作改动即可使其正常工作：与 Levi 所说的不同，您确实需要只需要一个 npm 任务

设置 npm 任务
- 通过单击三个点按钮 -> 将 Working 文件夹与 package.json 设置为包含 package.json 文件的文件夹。

设置 Azure 应用服务部署
- 通过单击三个点按钮 -> 将 包或文件夹 设置为包含 .csproj 文件的文件夹。

【讨论】：

【解决方案2】：

没有直接使用的构建模板，模板使用方便，需要根据具体需求修改。

参考以下步骤：

转到团队项目的构建页面（例如https://XXX.visualstudio.com/[teamproject]/_build）
点击 +New 按钮使用 ASP.NET Core 模板创建构建定义

在 .NET Core 还原任务之前添加 npm install 任务（命令：install；使用 package.json 的工作文件夹：[package.json 文件夹路径]）

（可选）如果不需要，删除/禁用 .NET Core 测试任务
最后添加Azure App Service Deploy任务（包或文件夹：$(build.artifactstagingdirectory)/**/*.zip；勾选Publish using Web Deploy选项）

注意：您可以将步骤 4 移至发布并将此构建链接到发布（将包或文件夹更改为 $(System.DefaultWorkingDirectory)/**/*.zip）。

【讨论】：

哦，我需要一个比这个更详细的答案，伙计。
@PaxForce 我添加了截图。
我今天早上试过了（抱歉我没能早点做）。在第 2 步之后（点击+新建按钮后），它需要我填写“代理队列”，这是一个必填字段。你能告诉我在那个领域写什么吗？谢谢。
另外，带有 package.json 路径的工作文件夹是什么？能举个例子吗？
@PaxForce 1. 您可以选择“托管 VS2017”代理。 2.您可以点击...按钮选择package.json的路径（默认在项目文件夹中）。也可以使用predefined variable，比如$(Build.SourcesDirector)\MyCoreWithAngular（1.点击Get Source 2.把服务器路径改成你的核心解决方案文件夹（点击...，本地路径可以为空，MyCoreWithAngular是项目文件夹）