如何使用 Azure DevOps 在 Web api 应用程序中构建和发布 React 应用程序？
How to build and release a react application in a web api application with Azure DevOps?
我们现在有两个具有两个不同 git 存储库的应用程序。第一个是在前面的 ReactJS 中，第二个是在后面的 C# (Web Api 2) 中。当我们要在 Azure 上部署时，我们构建前端并将输出文件复制到 c# 项目（web api 项目）。由于部署菜单，我们从 Visual Studio 在 Azure 中部署了 Web api 应用程序。
这有点无聊，有时我们在手动更改与不同环境相关的参数时会出错。
我们希望使用 Azure Dev Ops 自动执行所有这些任务。你做过这种事吗？如何 ？抱歉，如果这个问题看起来很愚蠢，但当正面和背面不在同一个 git 存储库中时我找不到构建教程。在此先感谢您的帮助。
您可以按照以下步骤构建和部署您的应用程序。我只能给出大概的思路和步骤。主要思想是将您的前端和后端源代码放在一起，并在同一个管道中构建它们。构建管道中每个任务的配置和参数需要您根据您的项目指定。
以下步骤显示在经典视图管道中。检查 here 的 yaml 视图管道
1,登录到您的 Azure DevOps 组织并导航到您的项目。
2、转到Pipelines，然后selectNew Pipeline，最后select使用经典编辑器创建没有YAML的管道页面的。
3,通过首先 select 作为源代码的位置来完成向导的步骤。
4、select 一个源 来指定您的代码所在的位置。然后继续选择模板，这里我选择ASP.NET Core(.NET Framework)模板。
5，将 powershell 任务添加到管道的顶部（任务可以拖放以重新排序）到 运行 git 命令以克隆您的前端 react.js将代码放入后端 C# 代码的同一源文件夹中。
如果您的代码托管在 azure 存储库 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安装任务和npm自定义任务来构建你的react.js，你需要指定包含package.json的工作文件夹的路径到您在上述 powershell 步骤中克隆 reactjs 代码的文件夹。您可以查看步骤 here 以供参考。
7、在taskVisual Studiobuild之前添加一个copy filetask来copybuild[=69的输出文件=] 到您的 C# 项目。
8、配置Visual Studio构建所需的路径和参数
任务和 Visual Studio 测试任务来构建和测试您的后端 C# 代码。
9、最后添加一个Azure App Service deploy任务部署到azure。
您可能需要添加其他额外任务来构建您的项目。您还可以将部署任务移动到发布 pipeline.check here 以获取更多信息。
您可以在网上找到很多关于如何创建构建管道以及如何将应用程序部署到 Azure 的示例和学习材料。我建议您可以按照一个示例为 c# 项目创建构建管道，并尝试编辑现有管道以集成您的 react.js 项目。
Here是微软官方文档，大家可以看看。希望以上内容对您有所帮助。
在这里，您可以找到构建和发布两个 Web 应用程序（托管 Web api）的步骤以及在 ReactJS 中开发的相关前端。这是我们的目标：
在 Azure devops 中，我们使用经典编辑器创建了一个管道：
我们选择了 git 存储库和此模板：
创建任务一步后，我们得到：
我们将描述其中的一些任务。例如：
/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\appRetailLab" /p:DeployDefaultTarget=WebPublish
构建完这两个网络应用程序后，您必须将前端文件复制到网络应用程序中。有两个任务：
最后，您将您的作品发布到 build.artifactstagingdirectory 的 drop 目录中：
发布 ：
我们的发布并不难：
我们使用 4 个任务：
Replace Token 是一个非常有用的插件。您可以用版本中定义的值替换令牌（由模板定义）。我们使用这个插件来替换我们应用程序（js 文件）前面部分的令牌。
要在我们的 reactjs 应用程序中添加令牌，我们使用 dotenv npm 包。
对于 web.config 参数，不要忘记检查部署任务中的 XML 变量替换。
就是这样。
我们现在有两个具有两个不同 git 存储库的应用程序。第一个是在前面的 ReactJS 中，第二个是在后面的 C# (Web Api 2) 中。当我们要在 Azure 上部署时，我们构建前端并将输出文件复制到 c# 项目（web api 项目）。由于部署菜单，我们从 Visual Studio 在 Azure 中部署了 Web api 应用程序。 这有点无聊，有时我们在手动更改与不同环境相关的参数时会出错。 我们希望使用 Azure Dev Ops 自动执行所有这些任务。你做过这种事吗？如何 ？抱歉，如果这个问题看起来很愚蠢，但当正面和背面不在同一个 git 存储库中时我找不到构建教程。在此先感谢您的帮助。
您可以按照以下步骤构建和部署您的应用程序。我只能给出大概的思路和步骤。主要思想是将您的前端和后端源代码放在一起，并在同一个管道中构建它们。构建管道中每个任务的配置和参数需要您根据您的项目指定。
以下步骤显示在经典视图管道中。检查 here 的 yaml 视图管道
1,登录到您的 Azure DevOps 组织并导航到您的项目。
2、转到Pipelines，然后selectNew Pipeline，最后select使用经典编辑器创建没有YAML的管道页面的。
3,通过首先 select 作为源代码的位置来完成向导的步骤。
4、select 一个源 来指定您的代码所在的位置。然后继续选择模板，这里我选择ASP.NET Core(.NET Framework)模板。
5，将 powershell 任务添加到管道的顶部（任务可以拖放以重新排序）到 运行 git 命令以克隆您的前端 react.js将代码放入后端 C# 代码的同一源文件夹中。
如果您的代码托管在 azure 存储库 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安装任务和npm自定义任务来构建你的react.js，你需要指定包含package.json的工作文件夹的路径到您在上述 powershell 步骤中克隆 reactjs 代码的文件夹。您可以查看步骤 here 以供参考。
7、在taskVisual Studiobuild之前添加一个copy filetask来copybuild[=69的输出文件=] 到您的 C# 项目。
8、配置Visual Studio构建所需的路径和参数 任务和 Visual Studio 测试任务来构建和测试您的后端 C# 代码。
9、最后添加一个Azure App Service deploy任务部署到azure。
您可能需要添加其他额外任务来构建您的项目。您还可以将部署任务移动到发布 pipeline.check here 以获取更多信息。
您可以在网上找到很多关于如何创建构建管道以及如何将应用程序部署到 Azure 的示例和学习材料。我建议您可以按照一个示例为 c# 项目创建构建管道，并尝试编辑现有管道以集成您的 react.js 项目。
Here是微软官方文档，大家可以看看。希望以上内容对您有所帮助。
在这里，您可以找到构建和发布两个 Web 应用程序（托管 Web api）的步骤以及在 ReactJS 中开发的相关前端。这是我们的目标：
在 Azure devops 中，我们使用经典编辑器创建了一个管道：
我们选择了 git 存储库和此模板：
创建任务一步后，我们得到：
我们将描述其中的一些任务。例如：
/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\appRetailLab" /p:DeployDefaultTarget=WebPublish
构建完这两个网络应用程序后，您必须将前端文件复制到网络应用程序中。有两个任务：
最后，您将您的作品发布到 build.artifactstagingdirectory 的 drop 目录中：
我们的发布并不难：
我们使用 4 个任务：
Replace Token 是一个非常有用的插件。您可以用版本中定义的值替换令牌（由模板定义）。我们使用这个插件来替换我们应用程序（js 文件）前面部分的令牌。
要在我们的 reactjs 应用程序中添加令牌，我们使用 dotenv npm 包。
对于 web.config 参数，不要忘记检查部署任务中的 XML 变量替换。
就是这样。