VSTS持续集成-ASP.NET核心和Angular 4项目

我有ASP.NET核心web应用程序（VS2017），我开发了Angular 4前端项目（VS代码），它应该是核心web应用程序的一部分。我需要为整个事情建立CI。所以，当这些项目中的任何一个发生变化时，它首先构建Angular 4，获取工件并将其放入ASP.NET核心项目中，然后构建它并将其发布到Azure

现在，我有我的Angular 4项目在一个单独的回购协议中。因此，理想情况下，我可以在该repo上设置CI，并使其将其工件发布到Azure存储（例如）。然后，我想为ASP.NET Core repo设置另一个CI来触发构建，第一步是“获取这些Angular 4工件并将它们放在这里”。大概是这样的：

如果NG4 repo=>中有任何文件更改，请构建它并生成

它应该触发ASPNETCore回购的构建

• 抓取NG4构建并将其复制到ASPNETCore文件夹结构中（如wwwroot）
• 建立核心回购协议

测试、部署等

---

所以问题是-我如何使用VST做到这一点？

好的，正如我说的，我有两个项目-ASP.NET Core MVC项目（Core-p）和Angular 4项目（NG-p）。它们位于VST中单独的回购协议中。目标是将整个项目的构建和发布自动化到Azure应用程序服务

以下是我是如何做到这一点的：

第一。NG-P 构建任务：

'npm安装@角度/cli@latest-g'-添加NPM任务，将

NPM命令设置为安装，将
参数设置为@angular/cli@latest-g

“npm安装”-安装ng项目所需的所有内容

为生产构建Angular 4项目。我制作了一个简单的build.cmd，它只运行

ngbuild--aot--output path dist--base href work

。注意--输出路径dist：项目输出将被放入“dist”文件夹（我想这是Angular CLI的默认值，但我只是想确定一下）。此外，我在这里使用了--base href-work选项，因此我的angular 4应用程序将作为[mydomain.com]/work-in-Core-P项目提供

归档文件-这将归档dist文件夹（已编译的应用程序）中的所有内容。勾选a替换现有存档文件

将此存档放在Azure Blob存储中。我发现使用Azure Blob存储使工件可用于Cope-P构建定义很方便。首先，Blob存储始终处于就绪状态，因此不需要进行任何设置（除非您需要拥有Azure存储帐户）。此外，它相当安全，因此我的dist.zip不是公开的。您可以使用任何其他方法在构建之间共享工件。 Azure File Copy任务具有所有必需的参数—您的存储Acc名称、密钥、目标容器名称。相应地设置它们，您将需要在相应的任务中使用它们来进行Core-P构建。

触发Core-P构建-当NG-P将其工件上载到Azure Blob存储时，我们需要触发Core-P的构建。为此，您需要从VSTS Marketplace进行安装

第二Core-P 所以，我们已经构建了NG-p，它作为dist.zip文件位于Azure Blob存储（或您选择的任何其他位置）中，可用于Core-p构建过程。现在，我从

ASP.NET核心（预览）

模板创建了这个构建定义。因此，只需为您的项目创建一个，并更改为以下内容

任务：

还原（.NET Core预览）-这是从模板创建的。不要改变它

生成（.NET核心预览）-相同

现在，我们需要抓取dist.zip。在我的例子中，以某种方式从Azure Blob存储中获取它（如果您使用任何其他方式来共享dist.zip，则需要使用自己的任务）。我设法为此使用Azure PowerShell内联脚本：

$an=“[your_azure_storage_acc_name]” $ak=“[storage\u acc\u key]” $Ctx=新AzureStorageContext-StorageAccountName$an-StorageAccountKey$ak

$blobs=获取AzureStorageBlob-容器“ng-p-dist”-上下文$Ctx $destFolder=“$env:BUILD\u ARTIFACTSTAGINGDIRECTORY”

新建项目-路径$destFolder-项目类型目录-强制 $blobs |获取AzureStorageBlobContent-目标$destFolder-上下文$Ctx

这将下载dist.zip并放入

Build.ArtifactStagingDirectory

目录

提取文件-任务将dist.zip提取到

$（Build.ArtifactStagingDirectory）/$（Build.Repository.Name）/wwwroot/js/app

。因此，归档文件模式参数设置为

$（Build.artifactstagindirectory）/dist.zip

，目标文件夹设置为

$（Build.artifactstagindirectory）/$（Build.Repository.Name）/wwwroot/js/app

PowerShell脚本-删除dist.zip，我们不再需要它了。这是一条单行线：

删除项“$（Build.ArtifactStagingDirectory）/dist.zip”

测试.NET核心预览-来自原始模板

发布.NET核心预览-相同

发布工件-相同

因此，这将创建包含Angular 4应用程序的ASP.NET核心MVC项目。现在，我必须在此设置中添加两项内容：

• Cope-P应该有一个基于dist.zip更改的触发器。因此，每当NG-P发生更改时，它都会创建一个新的dist.zip。这将自动触发Cope-P构建。我想会有一些网络挂钩。等我弄明白了再加上
• 因为我是所有构建/发布管道的新手，所以我必须将项目发布到Azure应用程序服务。这应该很容易，因为这是VST的标准任务。我只是没有一点机会去那里

---

所以，HTH

好的，我让它在VST中工作。实际上这并不是一件复杂的事情。我不知道为什么Ctrl+K在这里不起作用，所以代码看起来只是一个普通文本。谢谢！关于如何使用VSTS构建Angular应用程序，您的回答非常有帮助！谢谢你提供的信息，我还在努力把它送到