维塞尔 + 木偶师

Vercel 是面向前端开发者的平台，它为创新者提供所需的速度和可靠性，让他们能够随时捕捉灵感并进行创作。截至撰写本文时，Vercel 已为超过 35 个框架提供支持。不过，本文将主要关注 NextJS。Puppeteer 是一个 NodeJS 库，允许开发者以编程方式控制 Web 浏览器。从 19 版本开始，Puppeteer 同时支持 Firefox 和 Chrome 浏览器。

今天的任务就是将这些技术结合起来！我们将使用 Puppeteer 生成网站的 PDF 文件，并使用 Vercel.JS 来托管它。在本地执行这项任务非常简单，但是，一旦将项目部署到 Vercel 的云端，您可能会遇到一些关于文件大小和内存限制的问题。下面我们将详细介绍如何使用 Browserless 轻松解决这些问题。如果您想立即查看代码，请点击此处查看我们的示例项目。

最佳实践和设置

• 我们使用Next.js作为主要技术，因为它对于 Vercel 部署来说非常有效且受欢迎。
• 您应该对 NextJS 中的环境变量如何正确存储密钥有一定的了解。您可以点击此处阅读更多内容。
• 为了这篇博文的目的，我们将创建一个基本路由，用于生成 URL 的 PDF 文件。您可以随意修改此路由，但它足以让您入门！

为 Vercel 设置 Puppeteer

首先，通过 CLI 创建一个新的 Next.js 应用程序：

$ npx create-next-app@latest

这条命令会创建一个基本的“Hello World”应用程序，然后退出。特别是对于 NextJS 应用程序，你很可能还会有一个“pages”目录，其中包含一个“api”文件夹。由于我们的功能是在 NodeJS 环境中创建的，因此我们将把大部分时间花在这里。

应用程序设置完成后，我们接下来将安装 Puppeteer。为了避免 Vercel 的第一个问题：50MB 的文件大小限制，我们将选择 'puppeteer-core' 模块。Puppeteer 默认捆绑了无头 Chrome 浏览器，其大小很容易超过 50MB。通过使用 'puppeteer-core' 模块，我们可以只安装 Puppeteer 的代码，而不安装浏览器二进制文件，从而将该模块缩小到大约 4MB。要为 Vercel 安装 Puppeteer，只需执行以下操作：

$ npm i puppeteer-core

编写我们的 Puppeteer API

接下来，我们将设置 API 处理程序来生成这些 PDF 文件。默认情况下，NextJS 会在路由名称前添加“/api”路径。在本例中，我们将在“pages/api”目录下创建一个名为“pdf.ts”的路由。我们将在下文中详细解释，以下是入门代码：

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
import puppeteer from 'puppeteer-core'

type Json = {
  message: string
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Json | Buffer>
) {
  const { searchParams } = new URL(
    req.url as string,
    `http://${req.headers.host}`
  )
  const url = searchParams.get('url')

  if (!url) {
    return res
      .status(400)
      .json({ message: `A ?url query-parameter is required` })
  }

  const browser = await puppeteer.connect({
    browserWSEndpoint: `wss://chrome.browserless.io?token=${process.env.BLESS_TOKEN}`,
  })

  const page = await browser.newPage()
  await page.setViewport({ width: 1920, height: 1080 })
  await page.goto(url)

  return res.status(200).send(await page.pdf())
}

首先，我们需要导入一些 NextJS 的类型信息，然后从 puppeteer-core 导入 puppeteer 模块。如果您使用的是纯 NodeJS，则不需要类型定义，因此在这种情况下可以随意删除它们。

接下来是“Json”类型，用于描述我们返回给客户端的响应。由于我们的处理程序可以将任何URL转换为PDF，因此我们需要确保用户提供PDF文件！您可以根据自己的用例或需求，使用Puppeteer修改此代码块。

最后，我们得到了路由文件。这个处理程序会检查是否存在指向要转换为 PDF 的网站的“?url”查询参数。如果缺少该参数，我们将返回 400 错误信息，并提示该参数是必需的。之后，我们只需连接到无浏览器环境下的实时浏览器，创建一个页面，然后生成该 PDF 文件。

使用无浏览器在 Vercel 上运行 Puppeter

我们之所以能够在 Vercel 上同时运行 Puppeteer 和 Chrome，是因为我们避免了在 Vercel 应用内部下载和运行 Chrome。将 Puppeteer 代码与 Chrome 代码分离实际上是一种非常好的最佳实践，因为它能将 Chrome 与应用代码彻底隔离开来。

要连接到无浏览器环境并使用无头 Chrome，您需要获取 API 令牌。我们提供免费账户，无需信用卡，点击此处即可注册。获得 API 密钥后，您需要创建一个包含该密钥的 env.local 文件：

# Browserless Token
BLESS_TOKEN=YOUR-API-KEY-HERE

现在设置已经完成，让我们启动应用程序并访问路由，看看它是否正常工作。在项目根目录下运行以下命令。由于任何环境变量的更改都需要重启开发服务器，因此您需要重启此服务：

npm run dev

然后，一旦启动并准备就绪，请访问http://localhost:3000/api/pdf?url=https://www.browserless.io/docs/start。您应该会下载到一个 PDF 文件！

在 Vercel 上部署您的 Puppeteer 代码

确认一切运行正常后，下一步是将我们的 Puppeteer + NextJS 应用部署到 Vercel。有两种方法：Vercel CLI或 GitHub。目前，我们将使用 GitHub 作为部署方式。您需要在 Vercel 上创建一个新应用，方法是点击“创建新项目”：

系统会提示您选择几个选项，但我们希望从 GitHub 部署。添加访问权限后，以下是权限设置和 GitHub 选择界面的屏幕截图：

Vercel 应该会自动识别这是一个 NextJS 应用，这意味着我们无需告诉它如何构建或打包 Puppeteer、运行 `npm run build` 或其他任何命令。但是，我们需要输入 browserless 令牌，因为 browserless 需要它才能正常工作：

进入页面后，点击“添加”，然后点击“部署”。几秒钟后，页面应该会加载并显示“Hello World”界面，因为我们没有对其进行任何修改：

您可以在这里编辑页面 URL，并在其后添加“/api/pdf?url=https://example.com ”。这将验证我们在 Vercel 上的 Puppeteer 代码是否运行良好！

结语

使用 Browserless，您可以轻松地在 Vercel 等无服务器环境中运行无头浏览器。借助 Browserless，您可以轻松突破文件大小和内存限制，享受卓越的开发体验，而无需为此烦恼。欢迎注册托管帐户并立即开始使用，或点击此处查看我们的示例代码库。