VSTS持续集成-ASP.NET Core和Angular 4项目 [英] VSTS Continuous Integration - ASP.NET Core and Angular 4 project

问题描述

我有ASP.NET Core Web应用程序(VS2017)，并且我开发了Angular 4前端项目(VS Code)，该项目应该是该Core Web应用程序的一部分.我需要为整个过程设置CI.因此，当这些项目中的任何一个发生任何更改时，它都会首先构建Angular 4，获取工件并将其放入ASP.NET Core项目，然后对其进行构建并将其发布到Azure.

I have ASP.NET Core web app (VS2017) and I develop Angular 4 front-end project (VS Code) which should be part of that Core web app. And I need to set up CI for the whole thing. So, when anything changes in either of those projects, it builds Angular 4 first, gets the artifacts and puts them into ASP.NET Core project, then build it and publish it to Azure.

此刻，我将Angular 4项目放在一个单独的存储库中.因此，理想情况下，我可以在该存储库上设置CI并将其工件发布到Azure存储(例如).然后，我想为ASP.NET Core存储库设置另一个CI，以触发构建，第一步是获取Angular 4工件并将它们放在这里".像这样:

At this moment, I have my Angular 4 project in a separate repo. So, ideally, I can set up CI on that repo and make it publish its artifacts to Azure Storage (for example). Then, I'd like to have another CI setup for ASP.NET Core repo to trigger the build, with the very first step to be 'get those Angular 4 artifacts and put them in here'. Something like this:

1. 如果NG4 repo中有任何文件更改=>编译并产生该编译
2. 它应该触发ASPNETCore回购的构建
   • 抓取NG4并在ASPNETCore文件夹结构(如wwwroot)中复制它
   • 构建ASPNETCore存储库
   • ...

1. if any file changes in NG4 repo => build it and yield the build
2. it should trigger a build of ASPNETCore repo
   • grab NG4 build and copy it inside ASPNETCore folder structure (like wwwroot)
   • build ASPNETCore repo
   • ...

问题是-如何使用VSTS做到这一点?

So the question is - how can I do this with VSTS?

推荐答案

好的，所以我说我有2个项目-ASP.NET Core MVC项目(Core-P)和Angular 4项目(NG-P).它们位于VSTS中的单独存储库中.目标是自动化整个项目的构建和发布到Azure App Service.

ok, so as I said I have 2 projects - ASP.NET Core MVC project (Core-P) and Angular 4 project (NG-P). They reside in separate repo's in VSTS. The goal is to automate build and publishing of the whole project to Azure App Service.

这是我的工作方式:

构建任务:

1. 'npm install @ angular/cli @ latest -g'-添加NPM任务，将npm command设置为 install ，将arguments设置为 @ angular/cli @ latest -g .
2. 'npm install'-这将安装ng项目所需的所有内容.
3. 构建您的Angular 4项目进行生产.我做了一个简单的build.cmd，它只运行ng build --aot --output-path dist --base-href work.注意-output-path dist :项目输出将放入'dist'文件夹(我猜这是Angular-CLI的默认设置，但我只是想确定一下).此外，我在这里使用-base-href work 选项，因此我的angular 4应用将在Core-P项目中以[mydomain.com]/work形式提供.
4. 存档文件-这会将所有内容存档在dist文件夹(已编译的应用程序)中.勾选替换现有存档.
5. 将此存档放入Azure Blob存储.我发现使用Azure Blob存储使工件可用于Cope-P构建定义很方便.首先，Blob存储始终处于就绪状态，因此不需要进行设置(除非您需要具有Azure存储帐户).此外，它非常安全，因此我的dist.zip不公开可用.您可以使用任何其他方法在内部版本之间共享工件. Azure File Copy (Azure文件复制)任务具有所有必需的参数-您的存储Acc名称，密钥，目标容器名称.相应地设置它们，在Core-P构建的相应任务中将需要它们.

1. 'npm install @angular/cli@latest -g' - add NPM task, set npm command to install, set arguments to @angular/cli@latest -g.
2. 'npm install' - this installs everything that's needed by your ng project.
3. build your Angular 4 project for production. I made a simple build.cmd which is simply runs ng build --aot --output-path dist --base-href work. Notice --output-path dist: the project output will be put into 'dist' folder (which is a default for Angular-CLI I guess, but I just want to make sure). Besides, I use --base-href work option here, so this my angular 4 app will be available as [mydomain.com]/work in Core-P project.
4. Archive files - this will archive everything in dist folder (the compiled app). Tick a Replace existing archive.
5. Put this archive to Azure Blob Storage. I find it convenient to use Azure Blob Storage to make the artifact available for Cope-P build definition. First, Blob Storage is just always ready, so no set up is required (except you need to have Azure Storage Account). Besides, it's pretty secure, so my dist.zip is not publicly available. You can use any other method for sharing artifacts between builds. Azure File Copy task has all required params - your Storage Acc Name, Key, destination Container Name. Set them accordingly, you'll need them in corresponding task for Core-P build.

1. 触发Core-P构建-当NG-P将其工件上传到Azure Blob存储时，我们需要触发Core-P的构建.为此，您需要安装 触发器VSTS市场中的构建任务扩展.

第二.核心-P

因此，我们已经构建了NG-P，它可以作为Azure-Blob存储(或您选择的任何其他地方)中的dist.zip文件用于Core-P构建过程.现在，我从ASP.NET Core (PREVIEW)模板创建了此构建定义.因此，只需为您的项目创建一个，然后更改为以下内容即可.

Second. Core-P

So, we have built NG-P and it's available for Core-P build process as a dist.zip file sitting in Azure Blob Storage (or any other place you choose). Now, I created this build definition from the ASP.NET Core (PREVIEW) template. So just go and create the one for your project and change to the following.

任务:

1. 还原(.NET Core预览)-这是从模板创建的.请勿更改.
2. 构建(.NET Core预览)-相同

3. 现在，我们需要获取该 dist.zip .就我而言，要以某种方式从Azure Blob存储中获取它(如果以其他方式共享dist.zip，则需要使用自己的任务).我设法为此使用了Azure PowerShell内联脚本:

1. Restore (.NET Core PREVIEW) - this one is created from the template. Do not change it.
2. Build (.NET Core PREVIEW) - same

3. Now, we need to grab that dist.zip. In my case, to grab it from Azure Blob Storage somehow (if you used any other way to share dist.zip, you'll need to use your own task for it). I managed to used Azure PowerShell inline script for this:

$ an ="[您的azure_storage_acc_name]" $ ak ="[storage_acc_key]" $ Ctx = New-AzureStorageContext -StorageAccountName $ an -StorageAccountKey $ ak

$an = "[your_azure_storage_acc_name]" $ak = "[storage_acc_key]" $Ctx = New-AzureStorageContext -StorageAccountName $an -StorageAccountKey $ak

$ blobs = Get-AzureStorageBlob-容器"ng-p-dist"-上下文$ Ctx $ destFolder ="$ env:BUILD_ARTIFACTSTAGINGDIRECTORY"

$blobs = Get-AzureStorageBlob -Container "ng-p-dist" -Context $Ctx $destFolder = "$env:BUILD_ARTIFACTSTAGINGDIRECTORY"

New-Item -Path $ destFolder -ItemType目录-Force $ blob | Get-AzureStorageBlobContent-目标$ destFolder-上下文$ Ctx

New-Item -Path $destFolder -ItemType Directory -Force $blobs | Get-AzureStorageBlobContent -Destination $destFolder -Context $Ctx

这将下载dist.zip并放入Build.ArtifactStagingDirectory目录.

This will download dist.zip and puts in into Build.ArtifactStagingDirectory directory.

1. 提取文件-该任务将dist.zip提取到$(Build.ArtifactStagingDirectory)/$(Build.Repository.Name)/wwwroot/js/app中.因此，将归档文件模式参数设置为$(Build.ArtifactStagingDirectory)/dist.zip，将目标文件夹设置为$(Build.ArtifactStagingDirectory)/$(Build.Repository.Name)/wwwroot/js/app

1. Extract files - the task extracts dist.zip into $(Build.ArtifactStagingDirectory)/$(Build.Repository.Name)/wwwroot/js/app. So Archive file patterns param is set to $(Build.ArtifactStagingDirectory)/dist.zip, and Destination folder to $(Build.ArtifactStagingDirectory)/$(Build.Repository.Name)/wwwroot/js/app

PowerShell脚本-删除dist.zip，我们不再需要它.这是单线的:

PowerShell script - remove dist.zip, we don't need it anymore. This is a one-liner:

删除项"$(Build.ArtifactStagingDirectory)/dist.zip"

Remove-Item "$(Build.ArtifactStagingDirectory)/dist.zip"

1. 从原始模板中测试.NET Core PREVIEW.
2. 发布.NET Core预览-相同
3. 发布工件-相同

因此，这将在内部使用Angular 4应用程序创建ASP.NET Core MVC项目.现在，我必须在此设置中添加2件事:

So, this creates your ASP.NET Core MVC project with Angular 4 app inside. Now, I have to add 2 things to this setup:

• Cope-P应该具有基于dist.zip更改的触发器.因此，每当NG-P更改时，它都会创建一个新的dist.zip.这应该自动触发Cope-P构建.我猜会涉及一些网络挂钩.当我弄清楚这一点时，我会添加它.
• 由于我是所有此Build/Release管道的新手，因此我必须将项目实际发布到Azure App Service.这应该很容易，因为这是VSTS的标准任务.我只是没有去那里的零钱.

所以，HTH

这篇关于VSTS持续集成-ASP.NET Core和Angular 4项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！