如何使用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中时,我找不到要构建的教程。预先感谢您的帮助。

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

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

以下步骤显示在经典视图管道中。检查here的Yaml视图管道

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

2,转到“管道”,然后选择“新建管道”,然后在页面末尾选择使用经典编辑器创建不包含YAML的管道

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

4,选择来源以指定代码的位置。然后继续选择一个模板,在这里我选择ASP.NET Core(.NET Framework)模板。

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

如果您的代码托管在 azure repo git 中。您可以在powershell任务中添加以下脚本。确保已选中用于访问OAuth令牌的所有低脚本 enter image description here

cd $(Build.SourcesDirectory)
git clone "https://$env:SYSTEM_ACCESSTOKEN@dev.azure.com/{yourAzureorganizationName}/{yourProjectname}/_git/testrepo"

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

enter image description here

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

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

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

您可能需要添加其他任务来构建项目。您还可以移动部署任务以释放管道。请查看here了解更多信息。

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

Here是Microsoft的官方文档,供您查看。希望以上内容对您有所帮助。

,

在这里,您可以找到构建和发布两个Web应用程序(托管Web API)以及在ReactJS中开发的相对前端的步骤。这是我们的目标:

enter image description here

enter image description here

在Azure devops中,我们使用经典编辑器创建了管道:

enter image description here

我们选择了git存储库和此模板:

enter image description here

在创建任务的步骤之后,我们获得:

enter image description here

我们将描述其中一些任务。例如:

enter image description here

enter image description here

enter image description here enter image description here

/ p:SkipInvalidConfigurations = true / p:DeployOnBuild = true / p:WebPublishMethod = FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\appRetailLab“ / p:DeployDefaultTarget = WebPublish

一旦构建了两个Web应用程序,就必须在Web应用程序中复制前端文件。有两个任务:

enter image description here enter image description here

最后,将文物发布到build.artifactstaging目录中的drop目录中: enter image description here 发布 : enter image description here

我们的发布不是太困难: enter image description here

我们使用4个任务:

enter image description here

替换令牌是一个非常有用的插件。您可以用发行版中定义的值替换令牌(由模板定义)。我们使用此插件来替换应用程序(js文件)前部的令牌。

enter image description here

enter image description here

要在我们的reactjs应用程序中添加令牌,我们使用dotenv npm包。

enter image description here

对于web.config参数,请不要忘记在部署任务中检查XML变量替换。

enter image description here

就是这样。

本文链接:https://www.f2er.com/3158162.html

大家都在问