如何通过GitHub Action将React应用部署到Azure Web App虚拟目录

• 确认虚拟目录配置细节
  在Azure门户的「配置→路径映射」中，确保虚拟目录的虚拟路径为/react，物理路径设为site\react（注意使用Windows风格的反斜杠），同时勾选该条目对应的「应用」选项。

• 修正GitHub Action部署参数
  当前脚本中virtual-application参数需指定完整的虚拟路径前缀（带斜杠），而非仅目录名。同时enable-virtual-application参数在azure/webapps-deploy@v2版本中无需额外设置，修正后的脚本如下：

  - name: Deploy to Azure App Service
    uses: azure/webapps-deploy@v2
    with:
      app-name: reactapp
      publish-profile: ${{ secrets.AZUREAPPSERVICE }}
      package: ${{ github.workspace }}/build
      slot-name: production
      virtual-application: '/react'
  

• 配置React应用的基础路径
  为避免静态资源加载失败，需修改项目根目录的package.json，添加"homepage": "/react"字段，确保打包后的资源路径自动带上虚拟目录前缀。
  若使用React Router，还需在路由组件中配置basename属性：

  <BrowserRouter basename="/react">
    {/* 路由内容 */}
  </BrowserRouter>
  

• 验证部署结果
  部署完成后，访问https://reactapp.azurewebsites.net/react检查应用是否正常加载。若仍有问题，可查看Azure App Service的部署日志，排查路径相关的错误提示。

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