如何使用Azure DevOps在Web API应用程序中构建和发布React应用程序?

问题描述

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

解决方案

您可以按照以下步骤构建和部署应用程序.我只能给出一个总体思路和步骤.主要思想是将前端和后端源代码放在一起，并在同一管道中进行构建.需要根据项目为构建管道中的每个任务配置和参数.

以下步骤显示在经典视图管道中.在

如果您的代码托管在 azure repo git 中.您可以在powershell任务中添加以下脚本.确保已选中用于访问OAuth令牌的Al 低级脚本

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

6，添加npm install任务和npm custom任务来构建react.js，您需要指定包含package.json的工作文件夹的路径到克隆reactjs代码的文件夹在上述Powershell步骤中.您可以在

7，在任务 Visual Studio构建之前添加一个复制文件任务，以将构建React.js的输出文件复制到您的C#项目中.

8，为Visual Studio构建配置必要的路径和参数任务和Visual Studio测试任务来构建和测试您的后端C#代码.

9，最后添加一个Azure App Service部署任务以部署到Azure.

您可能需要添加其他任务来构建项目.您还可以移动部署任务以释放管道.检查此处以获取更多信息.

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

此处是Microsoft的官方文档，供您查看.希望以上内容对您有所帮助.

We now have two applications with two differents git respositories. The first one is in ReactJS for the front and the second one is in C# (Web Api 2) for the back. When we want to deploy on Azure, we build the front and we copy the output files to the c# project (web api project). We deploy the web api application from Visual Studio in Azure thanks to the deploy menu.It's a little bit boring and sometimes we have errors when we change by hand the parameters relative to our differents environments.We would like to automatize all these tasks with Azure Dev Ops. Have you ever done this kind of stuff ? And how ? Sorry, if this question seems stupid but i can't find a tutorial to build when the front and the back are not in the same git repo. Thanks in advance for your help.

解决方案

You can follow below steps to build and deploy your application. I can only give a general idea and steps. The main idea is to get your front and backend source code together and build them in the same pipeline. The configurations and parameters for each tasks in the build pipeline need you to specify according to your project.

Below steps is shown in classic view pipeline. Check here for yaml view pipeline

1,Sign in to your Azure DevOps organization and navigate to your project.

2,Go to Pipelines, and then select New Pipeline, and select Use the classic editor to create a pipeline without YAML at the end of the page.

3,Walk through the steps of the wizard by first selecting as the location of your source code.

4, select a source to specify where your code is located. And continue to choose a template, here i choose ASP.NET Core(.NET Framework) template.

5, Add a powershell task to the top of your pipeline(the tasks can be drag and drop to reorder) to run the git commands to clone your front react.js code into same source folder of your backend c# code.

If your code is hosted in azure repo git. You can add below scripts in your powershell task. Make sure Allow scripts to access the OAuth token is checked

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

6, add npm install task and npm custom task to build your react.js, You need to specify the path of Working folder that contains package.json to the folder where you cloned your reactjs code in the above powershell step. you can check steps here for reference.

7, Add a copy file task before task Visual Studio build to copy the output files from building react.js to the your c# project.

8, Configure the necessary path and parameters for Visual Studio buildtask and Visual Studio test task to build and test your backend c# code.

9, Add an Azure App Service deploy task at the end to deploy to azure.

You might need to add other additional tasks to build your projects. You can also move your deployment task to release pipeline.check here for more information.

There are lots of examples and learning materials that you can find online about how to create build pipeline and how to deploy your application to azure. I suggest you can follow one example to create your build pipeline for c# project and try to edit your existing pipeline to integrate your react.js project.

Here is microsoft official documents for you to check it out. Hope you find above helpful.

这篇关于如何使用Azure DevOps在Web API应用程序中构建和发布React应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！