如何在 Azure 上的 MVC 应用程序的 VSTS 上发布 wepback 包答案

【问题标题】：how to publish wepback bundles on VSTS for MVC app on azure如何在 Azure 上的 MVC 应用程序的 VSTS 上发布 wepback 包
【发布时间】：2017-12-08 15:08:42
【问题描述】：

我无法弄清楚如何使用 VSTS 将任意目录从我的构建部署到 azure Web 应用程序。

任意目录是在构建步骤期间生成的，其中包含我的应用程序的 webpack 捆绑 javascript。详情如下：

我有一个 MVC 5 应用程序，我刚开始使用 webpack 来捆绑我的打字稿文件的输出。 webpack 创建一组包并将它们写入 $(project_dir)/Scripts/bundles。

我所有的打字稿源都在 /Scripts 下的各种其他目录中（App、Api、Lib 等）。但是从VS项目的角度来看，bundles是空的，而是添加到项目中的。

一切都在本地运行良好。我可以进行调试构建，然后 webpack-dev-server 提供捆绑包。我可以进行发布构建，并且 webpack 会愉快地在 /Scripts/bundles 中的磁盘上创建包。我的代码愉快地使用了这些捆绑包。

我已编辑项目文件以包括：

<Content Include="Scripts\Bundles\**" />

如果我在 Visual Studio 中进行发布，一切都会很好。但是 VSTS 似乎不承认项目的这一部分

我们使用 VSTS 来构建和发布到 azure。我一辈子都想不通如何让 VSTS 发布这个 /Scripts/bundles 目录。

在我的项目属性中，我创建了一个运行 webpack 的预构建步骤。我知道这些文件在构建结束时位于 Scripts/bundles 目录中，因为我最接近这项工作的是让 VSTS 构建第二个工件，即该 bundles 目录的 zip 文件，文件是在那里。

如果我知道以下其中一项（我认为），我可以解决我的问题：

如何让任意目录像正常构建输出一样显示在主工件中 - 然后我可以使用我的标准发布定义将其推送到天蓝色
如何在发布定义中发布第二个工件？

如果你能解决 #2，问题是在为 /Scripts/bundle 构建工件时，它将 bundle 目录的内容放在 zip 文件的根目录中，而不是将 bundle 作为 zip 文件的根目录文件。所以当我解压文件时，它必须先创建 /Scripts/bundle 然后解压。

【问题讨论】：

标签： azure azure-devops azure-pipelines

【解决方案1】：

当我第一次试图弄清楚如何做到这一点时，我一定是输入了错误的搜索词。一旦我找到了正确的搜索词，我就会发现一堆关于如何将“额外文件”放入 Azure 部署包的文章。

这是good article。我基本上遵循了它，并且一切正常。我将这些行添加到我的 csproj 文件中：

  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      WebpackBundles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      WebpackBundles;
      $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>
  <Target Name="WebpackBundles">
    <ItemGroup>
      <_CustomWebPackFiles Include="Scripts\bundles\*" />
      <_CustomWebPackFiles Include="Scripts\bundles\**\*" />
      <FilesForPackagingFromProject Include="%(_CustomWebPackFiles.Identity)">
        <DestinationRelativePath>Scripts\bundles\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>

PropertyGroup 已经存在。我刚刚插入了 WebpackBundles；调用这两个元素，然后定义 WebpackBundles 目标。

我最终删除了

<Content Include="Scripts\Bundles\**" />

行并将其替换为文章建议的新目标。我仅在发布版本中将 webpack 作为预构建步骤运行。我在本地使用 webpack-dev-server 进行调试构建。我必须对我们的 VSTS 构建进行的唯一更改是添加两个 npm 步骤：

npm 安装
npm install webpack -g

这允许预构建步骤找到 webpack 可执行文件并运行它。

VSTS 发布定义没有变化，因为 webpack 包被放入正确位置的部署 zip 文件中。

【讨论】：