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

时间：2017-04-07 17:18:52

标签： angular asp.net-core azure-pipelines

我有ASP.NET核心网络应用程序（VS2017），我开发了Angular 4前端项目（VS Code），它应该是该核心Web应用程序的一部分。我需要为整个事情设置CI。因此，当任何一个项目发生任何变化时，它首先构建Angular 4，获取工件并将它们放入ASP.NET Core项目，然后构建它并将其发布到Azure。

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

  1. 如果NG4 repo中的任何文件发生变化=>构建它并产生构建
  2. 它应该触发ASPNETCore repo的构建
    • 抓取NG4构建并将其复制到ASPNETCore文件夹结构（如wwwroot）
      • 中
    • 构建ASPNETCore repo
    • ...
  3. 测试，部署等

    4. 所以问题是 - 我怎么能用VSTS做到这一点？

1 个答案:

答案 0 :(得分：3)

好吧，所以我说我有2个项目 - ASP.NET核心MVC项目（Core-P）和Angular 4项目（NG-P）。他们居住在VSTS的独立回购中。目标是自动构建和发布整个项目到Azure App Service。

以下是我的工作方式：

首先。 NG-P

构建任务：

  1. ＆＃39; npm install @ angular / cli @ latest -g＆＃39; - 添加NPM任务，将npm command设置为安装，将arguments设置为 @ angular / cli @ latest -g 。
  2. ＆＃39; npm install＆＃39; - 这将安装您的ng项目所需的一切。
  3. 构建您的Angular 4项目以进行生产。我做了一个简单的build.cmd，它只是运行ng build --aot --output-path dist --base-href work。注意 - output-path dist ：项目输出将被放入＆＃39; dist＆＃39; dist文件夹（这是我猜的Angular-CLI的默认值，但我只是想确定）。此外，我在这里使用 - base-href work 选项，因此我的angular 4应用程序将作为[mydomain.com] /在Core-P项目中工作。
  4. 存档文件 - 这将存档dist文件夹（已编译的应用程序）中的所有内容。勾选替换现有存档。
  5. 将此存档放入Azure Blob存储。我发现使用Azure Blob存储可以使工件可用于Cope-P构建定义。首先，Blob存储总是准备就绪，因此不需要进行任何设置（除非您需要拥有Azure存储帐户）。此外，它非常安全，所以我的dist.zip不公开。您可以使用任何其他方法在构建之间共享工件。 Azure文件复制任务包含所有必需的参数 - 您的存储加密名称，密钥，目标容器名称。相应地设置它们，你需要在Core-P构建的相应任务中使用它们。
    1. 触发Core-P构建 - 当NG-P将其工件上传到Azure Blob存储时，我们需要触发Core-P的构建。为此，您需要从VSTS Marketplace安装Trigger Build Task extension。

    6. 二。芯-P

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

    任务：

    1. 还原（.NET核心预览） - 此模板是从模板创建的。不要改变它。
    2. 构建（.NET核心预览） - 相同

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

      $ an =＆＃34; [your_azure_storage_acc_name]＆＃34; $ ak =＆＃34; [storage_acc_key]＆＃34; $ Ctx = New-AzureStorageContext -StorageAccountName $ an -StorageAccountKey $ ak

      $ blobs = Get-AzureStorageBlob -Container＆＃34; ng-p-dist＆＃34; -Context $ Ctx $ destFolder =＆＃34; $ env：BUILD_ARTIFACTSTAGINGDIRECTORY＆＃34;

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

      4. 这将下载dist.zip并输入Build.ArtifactStagingDirectory目录。

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

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

        Remove-Item＆＃34; $（Build.ArtifactStagingDirectory）/dist.zip"

        1. 测试.NET Core预览 - 来自原始模板。
        2. 发布.NET核心预览 - 相同
        3. 发布工件 - 相同

        3. 因此，这将使用Angular 4 app创建您的ASP.NET Core MVC项目。现在，我必须在此设置中添加两项内容：

        • Cope-P应该有一个基于dist.zip变化的触发器。因此，每当NG-P发生变化时，它就会产生一个新的dist.zip。这应该自动触发Cope-P构建。我想会有一些网络钩子涉及。当我想出来时，我会添加它。
        • 由于我是所有Build / Release管道的新手，我必须将项目实际发布到Azure App Service。这应该很简单，因为它是VSTS的标准任务。我还没有改变到那里。

        所以，HTH

相关问题
最新问题