如何使用 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 存储库中时，我找不到要构建的教程。提前感谢您的帮助。

Answer 1

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

经典视图管道中显示了以下步骤。检查here 获取 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 任务中添加以下脚本。确保选中 Allow scripts to access the OAuth token

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

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

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

8、配置Visual Studio构建所需的路径和参数 任务和 Visual Studio 测试任务来构建和测试您的后端 C# 代码。

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

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

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

Here是微软官方文档，供你查看。希望以上内容对您有所帮助。

Answer 2

在这里，您可以找到构建和发布两个 web 应用程序（托管 web api）和使用 ReactJS 开发的相关前端的步骤。这是我们的目标：

在 Azure devops 中，我们使用经典编辑器创建了一个管道：

我们选择了我们的 git 存储库和这个模板：

经过一个创建任务的步骤，我们得到：

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

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

一旦您构建了两个 Web 应用程序，您就必须复制 Web 应用程序中的前端文件。有两个任务：

最后，您在 build.artifactstagingdirectory 的放置目录中发布您的人工制品： 发布 ：

我们的发布并不难：

我们使用 4 个任务：

替换令牌是一个非常有用的插件。您可以将令牌（由模板定义）替换为版本中定义的值。我们使用这个插件来替换我们应用程序前面部分（js文件）中的令牌。

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

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

就是这样。