解决Vercel无服务器函数中Playwright+Chromium部署失败问题

先解决当前编译错误 #

你遇到的Cannot find module 'chrome-aws-lambda'错误，核心原因是代码导入的包名与实际依赖不匹配：你计划使用playwright-aws-lambda，但报错代码里写的是import chromium from 'chrome-aws-lambda'——这是笔误，按以下步骤修正即可：

步骤1：安装正确依赖 #

使用npm或yarn安装playwright-aws-lambda及TypeScript类型（如果用TS）：

# npm
npm install playwright-aws-lambda
npm install -D @types/playwright-aws-lambda

# yarn
yarn add playwright-aws-lambda
yarn add -D @types/playwright-aws-lambda

步骤2：修正代码并适配Vercel环境 #

确保导入语句正确，同时添加Vercel无服务器环境必需的启动参数：

import { chromium } from 'playwright-aws-lambda';

export const handler = async (event: any) => {
  let browser;
  try {
    browser = await chromium.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'] // Vercel环境需禁用沙箱
    });
    const page = await browser.newPage();
    
    await page.goto('https://example.com');
    const content = await page.content();

    return {
      statusCode: 200,
      body: JSON.stringify({ content }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
    };
  } finally {
    // 确保浏览器实例被关闭
    if (browser) await browser.close();
  }
};

推荐方案：优先使用playwright-aws-lambda #

playwright-aws-lambda是专门为AWS Lambda（Vercel无服务器函数基于Lambda运行）打包的Playwright版本，完美适配Vercel的环境限制：

• 内置适配Lambda的Chromium二进制文件，无需手动处理依赖安装
• 自动处理二进制文件的打包与路径映射
• 避开Vercel环境无法使用apt-get的问题

备选方案：使用playwright-core手动配置 #

如果不想依赖第三方包，可通过playwright-core配合自定义构建步骤实现：

1. 安装playwright-core：

npm install playwright-core

2. 在package.json的构建脚本中添加Chromium下载步骤（以Next.js项目为例）：

{
  "scripts": {
    "build": "PLAYWRIGHT_BROWSERS_PATH=./browsers npx playwright install chromium && next build"
  }
}

3. 代码中指定Chromium的可执行路径（注意替换版本号为实际下载的版本）：

import { chromium } from 'playwright-core';
import path from 'path';

export const handler = async (event: any) => {
  const browserExecutablePath = path.join(
    process.cwd(),
    'browsers',
    'chromium-123456', // 替换为实际下载的Chromium版本目录
    'chrome-linux',
    'chrome'
  );

  const browser = await chromium.launch({
    executablePath: browserExecutablePath,
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  // 后续逻辑同上
};

此方案需手动维护Chromium版本，仅作为备选。

内容的提问来源于stack exchange，提问作者János