如何通过Azure DevOps发布管道将React应用部署至Azure Windows VM

以下是具体的实现步骤：

1. 准备Azure Windows VM环境 #

• 在Azure Windows VM上启用WinRM（Windows远程管理），确保Azure DevOps能远程连接到VM。可在VM上运行以下PowerShell命令配置：

  Enable-PSRemoting -Force
  Set-NetFirewallRule -Name "WINRM-HTTP-In-TCP" -RemoteAddress Any
  

• 在VM上创建部署目录，比如C:\inetpub\wwwroot\ReactApp（若使用IIS托管），并确保目录具备读写权限。

2. 创建Azure DevOps发布管道 #

• 进入项目的发布页面，点击新建管道，选择空作业模板。
• 添加一个阶段，命名为「部署到Windows VM」。

3. 配置核心部署任务 #

在阶段中添加以下任务：

• 复制文件任务：
  • 源目录选择构建管道输出的React构建产物路径（通常为$(Build.ArtifactStagingDirectory)/build）。
  • 目标机器选择你的Azure Windows VM（需先在Azure DevOps中添加该VM为部署组，或通过WinRM连接配置VM的IP、用户名和密码）。
  • 目标目录填写VM上预先创建的路径，比如C:\inetpub\wwwroot\ReactApp。
• IIS网站部署（可选）：若用IIS托管应用，添加IIS Web App Deploy任务，配置网站名称、物理路径等参数，确保VM已安装并运行IIS。

4. 配置自动触发（可选） #

• 进入发布管道的触发器页面，开启持续部署触发器，关联对应的React构建管道，实现构建完成后自动触发发布。

5. 测试发布流程 #

• 手动触发一次发布，查看任务执行日志，确认构建产物成功复制到VM目标目录；若使用IIS，验证网站是否可正常访问。

内容的提问来源于stack exchange，提问作者Deep Patel