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

[dalovelanlan]

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

Error in getChangeTabPuppeteerDataUrl: Error: The input directory "/opt/nodejs/node_modules/@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/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258 at async eR.execute (/var/task/node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:26874) at async eR.handle (/var/task/node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:37512) at async es (/var/task/node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:25465)

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

[RoyRao]

运行路径设置没？

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

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

[dalovelanlan]

@RoyRao 路径设置的是这个
return puppeteer.launch(
process?.platform === "darwin"
? {
executablePath: localExecutablePath,
}
: {
// args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
// defaultViewport: chromium.defaultViewport,
// executablePath: await chromium.executablePath(
// `https://github.com/Sparticuz/chromium/releases/download/v126.0.0/chromium-v126.0.0-pack.tar`
// ),
// 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,
}
);

[dalovelanlan]

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

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

[RoyRao]

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

[dalovelanlan]

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

[RoyRao]

@dalovelanlan #5

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

不知道会不会默认部署到边缘网络。之前我尝试部署过，需要新建 vercel.json ，单独配置 @vercel/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

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

[dalovelanlan]

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

[runlongyao2]

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

[dalovelanlan]

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

[dalovelanlan]

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

[wktline]

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

[dalovelanlan]

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

[wktline]

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

[testdoge]

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

[dalovelanlan]

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

[dalovelanlan]

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

[testdoge]

https://github.com/thinkerchan/vercel-puppeteer-screenshot