在AWS Amplify部署时React-snap应用postBuild阶段构建失败求助

排查方向及解决步骤 #

• 深挖构建日志细节：Amplify构建日志里，react-snap执行完成后的部分可能藏着隐性错误（比如页面渲染超时、静态资源加载失败、快照生成不完整），仔细翻找npm run build之后的所有输出，尤其是红色报错或警告信息。
• 指定Chrome路径与禁用Chromium下载：手动安装Chrome后，需要让react-snap明确找到它，避免自动下载的Chromium与手动安装的Chrome冲突。修改amplify.yml的build阶段：

  build:
    commands:
      - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
      - export CHROME_PATH=/usr/bin/google-chrome
      - npm run build --force
  

• 修复构建产物权限：react-snap生成的静态文件权限可能不符合Amplify的要求，导致无法上传构建产物。在build命令后添加权限修复：

  build:
    commands:
      - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
      - export CHROME_PATH=/usr/bin/google-chrome
      - npm run build --force
      - chmod -R 755 build/
  

• 检查react-snap配置：确认package.json中的postbuild脚本为react-snap，同时reactSnap配置字段里没有使用本地专属路径（比如本地开发服务器地址、绝对路径），全部改用相对路径。
• 延长构建超时时间：react-snap渲染多个页面耗时较长，Amplify默认超时可能不够。在amplify.yml的preBuild和build阶段添加超时设置：

  frontend:
    phases:
      preBuild:
        commands:
          - curl -k https://intoli.com/install-google-chrome.sh | bash
          - npm i
        timeout: 600 # 单位：秒，即10分钟
      build:
        commands:
          - export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
          - export CHROME_PATH=/usr/bin/google-chrome
          - npm run build --force
          - chmod -R 755 build/
        timeout: 1200 # 20分钟
  

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