You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js静态网站GitHub Action构建失败,代码变更无法上线求助

问题

我有一个基于Next.js/React的静态网站,已经配置了GitHub Action,但对它了解不多。我从main分支创建子分支提交代码,合并回main后,线上网站没同步变更。查看GitHub Action的Build and Deploy环节,发现构建时出现npm依赖冲突:react@17.0.2和react-dom@16.13.1的peer依赖版本不兼容,导致Oryx构建失败。

GitHub Action错误日志

/usr/bin/docker run --name d55814534de1b9b56417e87549ec6d1c2fcf3_ffa1b5 --label 8d5581 --workdir /github/workspace --rm -e "INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN" -e "INPUT_REPO_TOKEN" -e "INPUT_ACTION" -e "INPUT_APP_LOCATION" -e "INPUT_API_LOCATION" -e "INPUT_OUTPUT_LOCATION" -e "INPUT_API_BUILD_COMMAND" -e "INPUT_APP_ARTIFACT_LOCATION" -e "INPUT_APP_BUILD_COMMAND" -e "INPUT_ROUTES_LOCATION" -e "INPUT_SKIP_APP_BUILD" -e "INPUT_CONFIG_FILE_LOCATION" -e "INPUT_SKIP_API_BUILD" -e "INPUT_PRODUCTION_BRANCH" -e "INPUT_DEPLOYMENT_ENVIRONMENT" -e "INPUT_IS_STATIC_EXPORT" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_ACTOR" -e "GITHUB_TRIGGERING_ACTOR" -e "GITHUB_WORKFLOW" -e "GITHUB_HEAD_REF" -e "GITHUB_BASE_REF" -e "GITHUB_EVENT_NAME" -e "GITHUB_SERVER_URL" -e "GITHUB_API_URL" -e "GITHUB_GRAPHQL_URL" -e "GITHUB_REF_NAME" -e "GITHUB_REF_PROTECTED" -e "GITHUB_REF_TYPE" -e "GITHUB_WORKSPACE" -e "GITHUB_ACTION" -e "GITHUB_EVENT_PATH" -e "GITHUB_ACTION_REPOSITORY" -e "GITHUB_ACTION_REF" -e "GITHUB_PATH" -e "GITHUB_ENV" -e "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -e "RUNNER_OS" -e "RUNNER_ARCH" -e "RUNNER_NAME" -e "RUNNER_TOOL_CACHE" -e "RUNNER_TEMP" -e "RUNNER_WORKSPACE" -e "ACTIONS_RUNTIME_URL" -e "ACTIONS_RUNTIME_TOKEN" -e "ACTIONS_CACHE_URL" -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/CRIRSCO/CRIRSCO":"/github/workspace" 8d5581:4534de1b9b56417e87549ec6d1c2fcf3
DeploymentId: 37a236e8-7912-4e34-af2f-50d08707dc6b

App Directory Location: '/' was found.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at ht5tps://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65de152b749fea, ReleaseTagName: 20221103.1

Build Operation ID: |=.
Repository Commit : 

Detecting platforms...
Detected following platforms:
  nodejs: 16.18.0
Version '16.18.0' of platform 'nodejs' is not installed. Generating script to install it...
Detected the following frameworks: Next.js


Source directory     : /github/workspace
Destination directory: /bin/staticsites/ss-oryx/app


Downloading and extracting 'nodejs' version '16.18.0' to '/opt/nodejs/16.18.0'...
Detected image debian flavor: bullseye.
Downloaded in 0 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: nodejs...
Done in 1 sec(s).

Removing existing manifest file
Creating directory for command manifest file if it does not exist
Creating a manifest file...
Node Build Command Manifest file created.

Using Node version:
v16.18.0

Using Npm version:
8.19.2

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

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-dom@16.13.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.6.0 || ^17" from next@10.2.3
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.7" from the root project
npm ERR!   3 more (@next/react-dev-overlay, styled-jsx, use-subscription)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from react-dom@16.13.1
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"16.13.1" from the root project
npm ERR!   peer react-dom@"^16.6.0 || ^17" from next@10.2.3
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.7" from the root project
npm ERR!   1 more (@next/react-dev-overlay)
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.13.1" from react-dom@16.13.1
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"16.13.1" from the root project
npm ERR!     peer react-dom@"^16.6.0 || ^17" from next@10.2.3
npm ERR!     node_modules/next
npm ERR!       next@"^10.0.7" from the root project
npm ERR!     1 more (@next/react-dev-overlay)
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-13T21_42_31_784Z-debug-0.log


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

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

GitHub Action配置文件

name: Azure Static Web Apps CI/CD

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

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@v2
        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_VICTORIOUS_MOSS_0A9A6EE00 }}
          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: "out" # 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_VICTORIOUS_MOSS_0A9A6EE00 }}
          action: "close"

核心疑问:

  1. 是否有办法不管GitHub Action构建成败都让代码变更上线?
  2. 如果注释GitHub Action,代码变更会生效吗?
  3. 求可行解决方案。

解决方案

关于“不管构建成败都上线”

不行。Azure Static Web Apps的部署流程依赖GitHub Action完成构建+上传,构建失败时不会生成可部署的静态产物,自然无法完成上线。强行跳过构建直接上传源码也没用,线上需要的是Next.js构建后的编译文件,不是原始源码。

关于“注释GitHub Action后代码变更是否生效”

不会。注释掉Action后,push到main分支时不会触发任何部署流程,Azure不会主动拉取仓库的源码更新,线上网站会保持原样。

可行解决步骤

1. 修复依赖冲突(最根本方案)

冲突原因是react@17.0.2和react-dom@16.13.1版本不匹配,react-dom的peer依赖要求react@^16.13.1,而项目使用了react@17。有两种修复方式:

  • 升级react-dom到17.x版本,和react保持一致:
    npm install react-dom@17.0.2 --save
    
  • 或降级react到16.14.0(满足react-dom@16.13.1的peer依赖要求):
    npm install react@16.14.0 --save
    

执行命令后,提交package.json和package-lock.json到main分支,重新触发Action即可正常构建部署。

2. 临时绕过依赖冲突(应急方案,不推荐长期使用)

如果暂时不想调整依赖版本,可以修改GitHub Action的构建命令,让npm忽略peer依赖冲突:
在Action配置的Build And Deploy步骤中添加app_build_command参数,指定带--legacy-peer-deps的安装和构建命令:

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    # 其他参数保持不变
    app_build_command: "npm install --legacy-peer-deps && npm run build"

该参数会覆盖Oryx默认的npm install命令,绕过冲突。但这种方式只是临时解决,长期来看仍需修复依赖版本匹配问题,避免潜在运行时错误。

3. 本地构建后上传产物(备选方案)

如果GitHub Action的构建环境持续出问题,可以在本地完成构建,再把产物提交到仓库让Action直接上传:

  • 本地执行npm install和npm run build,生成out目录(对应配置里的output_location)
  • 把out目录提交到main分支(若之前.gitignore排除了该目录,需先修改.gitignore)
  • 修改Action配置,添加skip_app_build: true参数,跳过构建步骤直接上传产物:
- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    # 其他参数保持不变
    skip_app_build: true

这种方式适合应急,但长期维护较麻烦,每次更新都要本地构建后提交产物。

内容的提问来源于stack exchange,提问作者nick

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.12 10:56:06