使用GitHub部署React应用至Azure静态Web应用失败求助

尝试通过GitHub仓库将React应用部署至Azure静态Web应用时，GitHub Actions部署失败，报错信息如下：

Running 'npm install --unsafe-perm'...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-typed@1.2.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" from the root project
npm ERR!   7 more (html-react-parser, react-dom, react-helmet, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-typed@1.2.0
npm ERR! node_modules/react-typed
npm ERR!   react-typed@"^1.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.3.0" from react-typed@1.2.0
npm ERR!   node_modules/react-typed
npm ERR!     react-typed@"^1.2.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /github/home/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /github/home/.npm/_logs/2022-11-28T18_21_32_391Z-debug-0.log


---End of Oryx build logs---
Oryx has failed to build the solution.

GitHub Actions工作流配置如下：

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

部署失败的核心是依赖版本冲突：

• 项目使用的react版本是18.2.0，但依赖的react-typed@1.2.0仅支持react@^16.3.0版本，两者的peer依赖要求不兼容。
• npm安装时默认严格校验peer依赖，因此触发ERESOLVE错误，导致Oryx构建终止。

方案一：升级react-typed到兼容React 18的版本 #

这是最稳妥的解决方式，直接安装支持React 18的最新版本：

npm install react-typed@latest --save

更新后提交package.json和package-lock.json到仓库，重新触发部署即可。

方案二：调整npm安装策略，跳过peer依赖校验 #

如果暂时无法升级react-typed，可以通过配置Oryx的构建命令来跳过peer依赖校验：

1. 在项目根目录创建.oryx-config.toml文件，写入以下内容：

[build]
installCommand = "npm install --legacy-peer-deps --unsafe-perm"

2. 提交该文件到GitHub仓库，重新触发部署。

方案三：修改GitHub Actions工作流，自定义安装步骤 #

在工作流中添加自定义的依赖安装步骤，覆盖默认的安装行为：

- uses: actions/checkout@v3
  with:
    submodules: true
- name: Install Dependencies
  run: npm install --legacy-peer-deps --unsafe-perm
- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  # 保持原有配置内容不变

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