上传至AWS Amplify时postbuild阶段react-snap执行失败问题咨询

核心问题原因 #

react-snap 底层依赖 Puppeteer 实现静态页面预渲染，Puppeteer 运行需要 Chromium 及配套系统依赖。你在 CloudShell 中安装的 Chromium 完全不生效，因为 AWS Amplify 的构建流程运行在独立的托管容器中，和 CloudShell 环境无关，所有依赖需要在构建流程内配置安装。

可行解决方案 #

• 第一步：修改项目根目录的 amplify.yml 配置，在预构建阶段安装 Chromium 及所有系统依赖，配置参考：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yum install -y alsa-lib atk cups-libs gtk3 libXcomposite libXcursor libXdamage libXext libXi libXrandr libXScrnSaver libXtst pango xorg-x11-fonts-* xorg-x11-utils chromium
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

• 第二步：修改 package.json，添加 react-snap 运行参数，跳过沙箱限制适配容器环境：

{
  "reactSnap": {
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-gpu",
      "--single-process",
      "--no-zygote"
    ]
  }
}

• 第三步：在 Amplify 控制台的对应应用的「环境变量」页面，添加变量 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD = true，避免 Puppeteer 重复下载内置 Chromium，直接使用构建阶段安装的系统版本。

配置完成后重新触发构建即可解决问题。如果依然有兼容性问题，可考虑使用 Next.js SSG 能力替代 react-snap 实现 SEO 优化，适配 Amplify 环境的成本更低。

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