在Vercel部署Node.js Puppeteer脚本时遇Chrome未找到错误求助

问题详情 #

使用Node.js 18.x、Puppeteer 21.7.0在Vercel部署脚本时，出现**无法找到Chrome（版本119.0.6045.105）**错误，错误日志如下：

Error: Could not find Chrome (ver. 119.0.6045.105). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or
 2. your cache path is incorrectly configured (which is: /home/sbx_user1051/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
    at ChromeLauncher.resolveExecutablePath (/var/task/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:278:27)
    at ChromeLauncher.executablePath (/var/task/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:209:25)
    at ChromeLauncher.computeLaunchArguments (/var/task/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:103:37)
    at async ChromeLauncher.launch (/var/task/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:69:28)
    at async way_bill_generate (/var/task/controller/orders/orders.js:784:21)

当前使用的核心代码：

options = {
  headless: true,
  // executablePath: '/usr/bin/chromium-browser',
  args: [
    "--no-sandbox",
    "--disable-setuid-sandbox",
    "--disable-web-security",
    "--hide-scrollbars",
    "--font-render-hinting=none",
  ],
}

const browser = await puppeteer.launch(options);

const page = await browser.newPage();
await page.setContent(html)

await page.emulateMediaType("screen");
await page.setViewport({
  width: 1200,
  height: 800,
});

const pdfBuffer = await page.pdf({
  margin: { top: "50px", right: "50px", bottom: "50px", left: "50px" },
  printBackground: true,
  preferCSSPageSize: true,
  format: "A4",
});

await browser.close();

解决方案 #

方案1：构建阶段自动安装Chrome #

在package.json的scripts中添加postinstall命令，让Vercel部署时自动安装对应版本的Chrome：

"scripts": {
  "postinstall": "npx puppeteer browsers install chrome"
}

部署过程中Vercel会执行该命令，将Chrome安装到Puppeteer默认的缓存路径。

方案2：直接使用Vercel内置的Chromium #

Vercel运行环境已预装Chromium，取消代码中executablePath的注释并使用默认路径：

options = {
  headless: true,
  executablePath: '/usr/bin/chromium-browser',
  args: [
    "--no-sandbox",
    "--disable-setuid-sandbox",
    "--disable-web-security",
    "--hide-scrollbars",
    "--font-render-hinting=none",
  ],
}

无需额外安装，直接调用环境中已有的浏览器。

方案3：自定义Puppeteer缓存路径（可选） #

如果默认缓存路径权限有问题，可自定义缓存目录：

1. 项目根目录创建.puppeteerrc.cjs配置文件：

module.exports = {
  cacheDirectory: './.puppeteer_cache',
};

2. 在vercel.json中添加缓存配置：

{
  "build": {
    "env": {
      "PUPPETEER_CACHE_DIR": "./.puppeteer_cache"
    }
  }
}

确保该目录在部署过程中被保留，Puppeteer能正确读取已安装的Chrome。

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