Question

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

任意目录在构建步骤中生成，并包含我的应用程序的webpack捆绑javascript。以下是详细信息：

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

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

一切都在当地很有效。我可以进行调试构建，webpack-dev-server提供捆绑包。我可以做一个发布版本，webpack很乐意在/ Scripts / bundles中创建磁盘上的bundle。我的代码很乐意消耗捆绑包。

我编辑了项目文件，包括：

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

如果我在视觉工作室内进行发布，那一切都很有效。但VSTS似乎并没有意识到项目的这一部分

我们使用VSTS进行建筑并释放到天蓝色。我不能为我的生活弄清楚如何让VSTS发布这个/ Scripts / bundles目录。

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

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

如何在主工件中显示任意目录，如正常构建输出 - 然后我可以使用我的标准版本定义将其推送到azure
如何在发布定义中发布第二个工件？

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

Answer 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 install
npm install webpack -g

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

VSTS版本定义没有变化，因为webpack捆绑包已放入正确位置的部署zip文件中。

如何在天蓝色的VSTS for MVC app上发布wepback包

1 个答案: