如何在 VSTS 构建中将 Webpack 项目输出与 Asp.Net 项目输出相结合？答案

【问题标题】：How can I combining Webpack project output with Asp.Net project output in VSTS build?如何在 VSTS 构建中将 Webpack 项目输出与 Asp.Net 项目输出相结合？
【发布时间】：2018-06-09 19:13:37
【问题描述】：

我的存储库包含一个 Asp.Net 应用程序和一个位于单独文件夹中的 React 应用程序。我需要从 VSTS 版本部署到 Azure 应用服务。

存储库根

MyAspNetApp
MyReactApp

Asp.Net 应用程序是一个 MVC 应用程序。如果它在移动设备上检测到您，它会启动 react 应用程序。

react 应用是使用 WebPack 构建的。当您进行生产构建时，它会将输出复制到 MyAspNetApp 项目中名为“app”的文件夹中。生产版本可以通过“npm run build-prod”运行。

当我进行 git 部署 (kudu) 时，我只是在 deploy.cmd 中添加了一个命令来调用“npm install”和“npm run build-prod”。然后另一个命令将这些文件复制到部署目录的根目录 ('wwwroot')。

现在我正在使用 VSTS 构建和部署（单独的步骤），我不知道如何将“应用程序”文件夹放入 wwwroot。在构建步骤中，我尝试从“app”文件夹中获取内容并将其放入名为“mobile”的工件中。然后在部署步骤中，使用“复制文件”步骤将“移动”工件复制到 $(build.artifactstagingdirectory)/app，但它们不会显示在 azure 上的 wwwroot 中。

我在这里错过了什么？

编辑：交叉张贴在MS VS Community site 中，希望得到回复。如果我在那里得到答案，我会更新这篇文章。

【问题讨论】：

标签： azure azure-devops azure-web-app-service azure-pipelines

【解决方案1】：

对于 Azure App Service Deploy 任务，如果您选中 Publish using Web Deploy 选项，您需要将所有必要的文件放在一个 zip 文件中，并在 Package or folder 输入框中指定此文件。

您也可以取消选中 Publish using Web Deploy 选项并指定应用的根文件夹路径。

请参考以下步骤：

通过 Visual Studio 构建任务使用文件系统发布方法发布 MVC 应用程序
运行 NPM 命令以通过 NPM 任务构建 React 应用程序
将 react 应用的构建文件复制到 MVC 应用部署文件夹的必要文件夹中
（可选）如果您想使用 Web 部署发布，则通过存档文件压缩文件夹
添加 Azure App Service Deploy 任务（可以在发布中）并指定包或文件夹。

【讨论】：

1.您是指 Publish Build Artifacts 任务吗？
不，这是带有参数/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\\" /p:DeployDefaultTarget=WebPublish 的 Visual Studio 构建任务（使用文件系统发布方法发布 MVC Web 应用程序）
好的，这确实有效。实际上，我在 VS 构建之前做了我的 webpack（通过 npm 脚本），因为它复制了这些文件。这里的关键是您在上面的评论中对 VS 构建命令的更改。然后将部署更改为指向放置文件夹而不是 zip 文件。谢谢。