Next.js 13中Puppeteer与Vercel无服务器函数兼容问题

问题分析 #

生产环境（Serverless）下调用/api/getLinkedin时，Puppeteer提示找不到Chromium版本1083080，修改缓存路径配置后仍未解决。核心原因是Serverless部署流程中，Chromium未被正确打包到部署包内，或者配置未生效。

解决方案 #

1. 确保部署时下载Chromium到项目目录 #

在package.json中添加postinstall脚本，强制Puppeteer在依赖安装后将Chromium下载到项目的缓存目录：

{
  "scripts": {
    "postinstall": "puppeteer install"
  }
}

Serverless环境部署时，默认的npm install可能不会触发Puppeteer的自动下载逻辑，这个脚本可以确保Chromium被下载到你配置的.cache/puppeteer目录。

2. 让Next.js打包时包含Chromium缓存目录 #

修改next.config.js，配置outputFileTracingIncludes将Puppeteer的缓存目录纳入构建产物：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  experimental: {
    outputFileTracingIncludes: {
      '/api/getLinkedin': ['./.cache/puppeteer/**/*']
    }
  }
}

module.exports = nextConfig

这一步保证Next.js在构建独立部署包时，不会忽略Chromium的二进制文件。

3. 调整Puppeteer启动参数适配Serverless环境 #

在API路由的Puppeteer启动代码中添加Serverless环境必需的参数，避免资源或权限问题：

import puppeteer from 'puppeteer';

export default async function handler(req, res) {
  try {
    const browser = await puppeteer.launch({
      headless: 'new',
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--single-process',
        '--disable-gpu'
      ],
    });

    // 你的业务逻辑，比如打开页面、获取数据等
    const page = await browser.newPage();
    await page.goto('https://linkedin.com');
    // ... 其他操作

    await browser.close();
    res.status(200).json({ success: true });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Failed to process request' });
  }
}

4. 检查部署平台环境变量 #

如果使用Vercel等平台，确保设置环境变量PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=false，防止部署时跳过Chromium下载。

验证步骤 #

1. 本地执行npm run postinstall，确认.cache/puppeteer目录生成并包含Chromium二进制文件。
2. 重新构建并部署项目，查看Function Logs是否再出现找不到Chromium的错误。

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