部署含Playwright的Next.js应用至Vercel时依赖缺失报错

核心问题分析 #

你之前的构建命令顺序错误：先执行next build再安装浏览器依赖，导致构建阶段执行爬取代码时，Chromium的系统依赖和浏览器本体还未安装，从而触发缺失依赖的报错。本地运行正常是因为你的开发环境已经预装了所有必需的系统库。

解决方案步骤 #

1. 修正构建命令顺序
   修改package.json中的build脚本，将依赖安装和浏览器下载放在next build之前：

   "scripts": {
     "build": "npx playwright install-deps chromium && npx playwright install chromium && next build"
   }
   

   这条命令会先安装Chromium所需的系统依赖，再下载Chromium浏览器本体，最后执行Next.js构建。

2. 添加Vercel环境变量
   在Vercel项目的「Settings → Environment Variables」中添加以下变量：

   PLAYWRIGHT_BROWSERS_PATH=0
   

   该变量强制Playwright将浏览器安装在项目目录内，而非全局路径，确保Vercel构建环境能正确识别到浏览器文件。

3. 配置Playwright启动参数
   在你的Playwright爬取代码中，添加针对Linux环境的启动参数，避免沙箱和资源限制问题：

   import { chromium } from 'playwright';
   
   async function crawlPage() {
     const browser = await chromium.launch({
       headless: true,
       args: [
         '--no-sandbox',
         '--disable-setuid-sandbox',
         '--disable-dev-shm-usage',
         '--disable-accelerated-2d-canvas',
         '--no-first-run',
         '--no-zygote',
         '--single-process'
       ]
     });
     // 后续爬取逻辑...
   }
   

4. 清空Vercel构建缓存
   进入Vercel的部署详情页面，点击「Redeploy」并取消勾选「Use existing build cache」，强制重新安装所有依赖，避免缓存导致的旧依赖残留问题。

额外排查点 #

• 确保playwright和playwright-chromium的版本一致，避免版本不兼容问题；
• 检查Vercel构建日志中是否有playwright install-deps的执行输出，确认系统依赖是否成功安装。

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