Nodejs 有大佬使用 nextjs 上添加 puppeteer 吗?有成功部署在 vercel 上的吗?

发布于 1周前 作者 caililin 来自 nodejs/Nestjs

有大佬使用 nextjs 上添加 puppeteer 吗?有成功部署在 vercel 上的吗?,我这里 Vercel 的 log

Error in getChangeTabPuppeteerDataUrl: Error: The input directory "/opt/nodejs/node_modules/[@sparticuz](/user/sparticuz)/chromium/bin" does not exist. at u.executablePath (/var/task/.next/server/chunks/896.js:2:67422) at g (/var/task/.next/server/app/api/video/route.js:12:17631) at f (/var/task/.next/server/app/api/video/route.js:12:15627) at b (/var/task/.next/server/app/api/video/route.js:12:15556) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async c (/var/task/.next/server/app/api/video/route.js:1:1427) at async /var/task/node_modules/.pnpm/[email protected]_[email protected].1_[email protected].1_[email protected].1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258 at async eR.execute (/var/task/node_modules/.pnpm/[email protected]_[email protected].1_[email protected].1_[email protected].1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:26874) at async eR.handle (/var/task/node_modules/.pnpm/[email protected]_[email protected].1_[email protected].1_[email protected].1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:37512) at async es (/var/task/node_modules/.pnpm/[email protected]_[email protected].1_[email protected].1_[email protected].1/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:25465)

我之前找的都是让使用这个第三方库来启动 chromium @sparticuz/chromium ,在这个 github 的 issue 上也没找到成功的例子,来求助 v 站大佬


Nodejs 有大佬使用 nextjs 上添加 puppeteer 吗?有成功部署在 vercel 上的吗?

18 回复

运行路径设置没?

<br>browser = await this.puppeteer.launch({<br> args: dev ? [] : chromium.args,<br> defaultViewport: chromium.defaultViewport,<br> executablePath: dev<br> ? localChromiumPath<br> : await chromium.executablePath(),<br> headless: chromium.headless,<br>});<br>

另外部署在边缘网络应该会有点问题…


路径设置的是这个
return puppeteer.launch(
process?.platform === “darwin”
? {
executablePath: localExecutablePath,
}
: {
// args: […chromium.args, “–hide-scrollbars”, “–disable-web-security”],
// defaultViewport: chromium.defaultViewport,
// executablePath: await chromium.executablePath(
// <a target="_blank" href="https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar" rel="nofollow noopener">https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar</a>
// ),
// headless: chromium.headless,
// ignoreHTTPSErrors: true,
args: chromium.args,
defaultViewport: chromium.defaultViewport,
executablePath: isDev
? localExecutablePath
: await chromium.executablePath("/opt/nodejs/node_modules/sparticuz/chromium/bin"),
headless: chromium.headless,
timeout: 60000,
}
);

刚开始是按照你写的这部署的,运行会也会报找不到地址

Error: The input directory “/var/task/.next/server/bin” does not exist.
at u.executablePath (/var/task/.next/server/chunks/896.js:2:67422)

#3 Vercel 免费用户有 50MB 的上传大小限制,或者尝试使用sparticuz/chromium-min然后把完整包传到自己 VPS 上。我看你尝试了
<br>await chromium.executablePath(<br>`<a target="_blank" href="https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar" rel="nofollow noopener">https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar</a>`<br>)<br>
不知道你注释掉是因为 Vercel 访问不了 GitHub 还是啥?之前有个项目本来准备部署到 Vercel 的,后面发现太麻烦了,然后项目搁置了…

注释掉是因为 vercel 会有个超时限制,免费用户 60s ,每次都会超时,我不知道是不是因为这个,这个库也没有说如何打印下载成功之类,提了 issue 也没有人回答, 你说的边缘网络是什么意思,我第一次用这个 vercel ,不太熟悉

#5

https://vercel.com/docs/edge-network/overview

不知道会不会默认部署到边缘网络。之前我尝试部署过,需要新建 vercel.json ,单独配置 /node ,指定到你 puppeteer 相关的 js 文件。

https://stackoverflow.com/questions/61808973/is-it-possible-to-deploy-a-nodejs-app-in-vercel

https://github.com/browserless/vercel-puppeteer

https://dev.to/joelgriffith/vercel-puppeteer-4l7c

具体可以参考一下这些,之前因为项目搁置,也没成功部署过,提供不了太多帮助… 如果你搞定了,也可以分享学习一下

这个「 browserless/vercel-puppeteer 」我看过,太贵了,200$每月,好的,感谢回复,我再研究研究

chromium 应该是在环境里提前安装好的,然后 executablePath 指向安装位置。我记得我做 docker image 的时候是这样的

docker 的话,可以直接下载 chromium 了,这个是部署 vercel 上,可以是使用 docker 吗

这种方法是可行的,executablePath: await chromium.executablePath(
<a target="_blank" href="https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar" rel="nofollow noopener">https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar</a>
), 但是,仅支持简单的操作,比如生成 pdf 、获取简单的数据,稍微复杂一点耗时的,就很容易超时

nextjs 内核是不是只支持一个简单的 nodejs api

不能说是跟 nextjs 的关系,准确的说是跟 vercel 这个 serverless 服务商,你要在 nextjs 里进行耗时操作,那就不能把 nextjs 项目部署 vercel 上了

个人建议,puppeteer 单独搞一个服务,别和 nodejs 耦合到一起,然后用 generic-pool 优化实例开销

直接用 vercel serverless 部署 puppeteer-core + /chromium 不就完事了吗?

可以是可以,但是我要进行的爬虫比较耗时,vercel 的免费用户超时时间最长 60s

主要是想白嫖 vercel ,不想单独花钱搞一个服务,毕竟项目是自己的小工具项目,能免费就免费,不能免费就本地起服务

关于在Next.js中添加Puppeteer并成功部署到Vercel的问题,以下是我的专业回答:

首先,Next.js是一个基于React的框架,主要用于构建服务器端渲染(SSR)和静态网站生成(SSG)的应用。Puppeteer则是一个Node库,提供了一个高级API来通过DevTools协议控制Chrome或Chromium。你可以在Next.js项目中添加Puppeteer来实现一些自动化的浏览器操作,比如生成页面的PDF、截图,或者进行复杂的Web Scraping。

至于在Vercel上部署,由于Vercel主要提供的是serverless服务,因此需要注意以下几点:

  1. 代码适配:Vercel对传统的Node.js应用有一定的适配要求,特别是涉及到路由和端口监听的部分。你可能需要修改代码,确保应用能够适配Vercel的serverless架构。
  2. 资源限制:Serverless函数有执行时间和资源使用的限制,因此如果你的Puppeteer任务非常复杂或耗时,可能需要考虑使用其他的部署方案。

以下是一个简单的例子,展示如何在Next.js项目中使用Puppeteer:

// pages/api/generate-pdf.js
const puppeteer = require('puppeteer');

export default async function handler(req, res) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.pdf({ path: '/tmp/example.pdf', format: 'A4' });
  
  // 这里你需要将PDF文件发送给客户端,但Vercel的API路由不支持直接文件输出,
  // 所以你可能需要将PDF文件上传到云存储,然后返回文件的URL。
  
  await browser.close();
  res.status(200).json({ message: 'PDF generated' });
}

注意:上述代码仅用于演示,由于Vercel的限制,你无法直接在API路由中生成并返回文件。

回到顶部