如何将React应用部署到Azure App Service？部署报错如何解决

问题1：GitHub Actions部署流程报错退出 #

根因是默认工作流执行npm run test时，项目无测试用例导致react-scripts返回非0状态码中断流程，修复方法二选一：

• 修改package.json的scripts配置，将test命令修改为：

"test": "react-scripts test --passWithNoTests"

• 直接修改.github/workflows下的部署工作流文件，删除执行npm run test的步骤

问题2：部署完成后无法正常访问应用 #

根因是App Service默认会读取站点根目录（wwwroot）的index.html作为入口，你当前将整个项目部署到了wwwroot，入口文件实际在build目录下，修复方法二选一：

方法一（推荐）：调整部署路径 #

修改GitHub Actions工作流的部署配置，仅上传build目录下的构建产物到App Service的wwwroot目录，以官方azure/webapps-deploy action为例，配置参数为：

- uses: azure/webapps-deploy@v2
  with:
    app-name: '你的App Service名称'
    publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
    package: './build'

方法二：修改启动命令 #

登录Azure门户，进入对应App Service管理页：

1. 左侧导航栏选择「配置」-「常规设置」
2. 在「启动命令」输入框填入：npx serve -s build
3. 保存配置后重启App Service即可

最简部署流程梳理 #

1. 本地执行npx create-react-app myapp创建项目，修改test命令添加--passWithNoTests参数
2. 推送代码到GitHub仓库
3. Azure创建Node运行时的App Service，关联GitHub仓库自动部署，使用自动生成的工作流文件，仅需修改部署步骤的package参数为./build
4. 无需额外配置即可正常访问应用

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