reactjs - 如何使用 Azure DevOps 在 Web api 应用程序中构建和发布 React 应用程序？

Question

我们现在有两个具有两个不同 git 存储库的应用程序。第一个在 ReactJS 中用于前面，第二个在 C# (Web Api 2) 中用于后面。当我们要部署在 Azure 上时，我们构建前端并将输出文件复制到 c# 项目（web api 项目）。由于部署菜单，我们从 Azure 中的 Visual Studio 部署 Web api 应用程序。这有点无聊，有时当我们手动更改与不同环境相关的参数时会出错。我们希望使用 Azure Dev Ops 自动化所有这些任务。你做过这种事情吗？如何 ？抱歉，如果这个问题看起来很愚蠢，但是当正面和背面不在同一个 git 存储库中时，我找不到要构建的教程。在此先感谢您的帮助。

标签： reactjsasp.net-web-apibuildazure-devopsrelease

Answer 1

您可以按照以下步骤构建和部署您的应用程序。我只能给出一个大概的思路和步骤。主要思想是将前端和后端源代码放在一起，并在同一管道中构建它们。构建管道中每个任务的配置和参数需要你根据你的项目来指定。

以下步骤显示在经典视图管道中。在此处查看yaml 视图管道

1，登录到您的 Azure DevOps 组织并导航到您的项目。

2、进入Pipelines，然后选择New Pipeline，在页面最后选择Use the classic editor to create a pipeline without YAML。

3，首先选择源代码的位置，完成向导的步骤。

4、选择一个源来指定你的代码所在的位置。并继续选择模板，这里我选择 ASP.NET Core(.NET Framework) 模板。

5，在管道顶部添加一个powershell任务（任务可以拖放以重新排序）以运行git命令将您的前端react.js代码克隆到后端c#代码的同一源文件夹中。

如果您的代码托管在azure repo git中。您可以在您的 powershell 任务中添加以下脚本。确保选中 允许访问 OAuth 令牌的脚本

cd $(Build.SourcesDirectory)
git clone "https://$env:[e-mail]/{yourAzureorganizationName}/{yourProjectname}/_git/testrepo"

6、添加 npm install 任务和 npm 自定义任务来构建你的 react.js，你需要将包含 package.json 的工作文件夹的路径指定到你在上面的 powershell 步骤中克隆你的 reactjs 代码的文件夹。您可以在此处查看步骤以供参考。

7，在任务Visual Studio build之前添加一个复制文件任务，将构建react.js的输出文件复制到你的c#项目中。

8、为Visual Studio构建任务和Visual Studio测试任务配置必要的路径和参数来构建和测试你的后端c#代码。

9、在最后添加一个Azure App Service deploy任务部署到azure。

您可能需要添加其他额外任务来构建您的项目。您还可以将您的部署任务移动到发布管道。查看此处了解更多信息。

您可以在网上找到很多关于如何创建构建管道以及如何将应用程序部署到 azure 的示例和学习材料。我建议您可以按照一个示例为 c# 项目创建构建管道，并尝试编辑现有管道以集成您的 react.js 项目。

这是微软官方文档供您查看。希望以上对您有所帮助。