Puppeteer를 사용하여 HTML을 PDF로 변환하는 Next.js API 만들기(Vercel 호환)

HTML을 PDF로 변환하는 것은 웹 애플리케이션의 일반적인 요구 사항입니다. 이 블로그 게시물에서는 Puppeteer를 사용하여 HTML을 PDF로 변환하는 Next.js API 경로를 생성하는 방법을 살펴보고 Vercel에 배포할 때 작동하는지 확인하겠습니다.

도전

Puppeteer는 HTML을 PDF로 변환하는 강력한 도구이지만 Vercel과 같은 서버리스 환경에 배포할 때는 문제가 있습니다. 주요 문제는 다음과 같습니다.

1. Puppeteer에는 Vercel의 크기 제한을 초과하는 Chromium 바이너리가 필요합니다.
2. 서버리스 기능은 실행 시간과 리소스가 제한되어 있습니다.

해결책

@sparticuz/chromium-min과 puppeteer-core의 조합을 사용하여 이러한 한계를 극복하겠습니다. 접근 방식은 다음과 같습니다.

1. 서버리스 환경을 위해 설계된 최소 Chromium 빌드를 사용하세요.
2. 이 최소 Chromium 버전을 사용하도록 Puppeteer를 구성하세요.
3. 서버리스 실행을 위해 PDF 생성 프로세스를 최적화합니다.

1단계: 프로젝트 설정

먼저 새로운 Next.js 프로젝트를 생성하거나 기존 프로젝트를 사용하세요. 그런 다음 필요한 종속성을 설치합니다.

npm install @sparticuz/chromium-min puppeteer-core

호환성과 최적의 성능을 보장하려면 올바른 버전의 필수 패키지를 사용하는 것이 중요합니다. 최신 테스트를 기준으로 다음 버전을 권장합니다:

{
  "dependencies": {
    "@sparticuz/chromium-min": "^129.0.0",
    "puppeteer-core": "^23.5.0"
  }
}

2단계: API 경로 생성

app/api/html-to-pdf/route.js(Next.js 13 앱 라우터의 경우) 또는 Pages/api/html-to-pdf.js(페이지 라우터의 경우)에서 새 파일을 만듭니다. 코드는 다음과 같습니다.

const chromium = require("@sparticuz/chromium-min");
const puppeteer = require("puppeteer-core");

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

export async function POST(request) {
  try {
    const { html } = await request.json();

    const browser = await getBrowser();
    const page = await browser.newPage();
    await page.setContent(html, { waitUntil: "networkidle0" });
    const pdfBuffer = await page.pdf({
      format: "A4",
      printBackground: true,
      margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" }
    });
    await browser.close();

    return new Response(pdfBuffer, {
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": 'attachment; filename="output.pdf"'
      }
    });
  } catch (error) {
    console.error("Error generating PDF:", error);
    return new Response(JSON.stringify({ error: "Failed to generate PDF" }), {
      status: 500,
      headers: { "Content-Type": "application/json" }
    });
  }
}

3단계: 코드 이해

이 코드의 주요 부분을 분석해 보겠습니다.

브라우저 구성

getBrowser 함수는 최소한의 Chromium 바이너리로 Puppeteer를 설정합니다.

async function getBrowser() {
  return puppeteer.launch({
    args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
    defaultViewport: chromium.defaultViewport,
    executablePath: await chromium.executablePath(
      `https://github.com/Sparticuz/chromium/releases/download/v129.0.0/chromium-v129.0.0-pack.tar`
    ),
    headless: chromium.headless,
    ignoreHTTPSErrors: true
  });
}

이 구성은 @sparticuz/chromium-min 패키지를 사용하여 서버리스 환경과 호환되는 최소 Chromium 바이너리를 제공합니다.

PDF 생성

PDF 생성의 기본 논리는 POST 함수에 있습니다.

1. 요청 본문에서 HTML을 추출합니다.
2. getBrowser 함수를 사용하여 브라우저 인스턴스를 시작합니다.
3. 새 페이지를 만들고 해당 콘텐츠를 제공된 HTML로 설정합니다.
4. 페이지 콘텐츠에서 PDF를 생성합니다.
5. 브라우저를 닫아 리소스를 확보하세요.
6. PDF를 적절한 헤더와 함께 응답으로 반환하세요.

4단계: API 사용

이 API를 사용하려면 요청 본문에 HTML 콘텐츠가 포함된 POST 요청을 보내세요.

const response = await fetch('/api/html-to-pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ html: '<h1>Hello, World!</h1>' }),
});

if (response.ok) {
  const blob = await response.blob();
  // Handle the PDF blob (e.g., download or display)
}

배포 고려 사항

Vercel에 배포할 때 다음 사항에 유의하세요.

1. 실행 시간: Vercel의 최대 실행 시간은 취미 계획의 경우 10초, 전문가 계획의 경우 60초입니다. 이러한 제한에 맞게 HTML 및 PDF 생성 프로세스를 최적화하세요.

2. 메모리 사용량: 메모리 사용량에 주의하세요. 최소한의 Chromium 바이너리가 도움이 되지만 복잡한 PDF는 여전히 상당한 메모리를 사용할 수 있습니다.

3. 콜드 스타트: 서버리스 기능은 콜드 스타트를 경험할 수 있습니다. 첫 번째 호출은 Chromium 바이너리를 다운로드하고 설정해야 하므로 속도가 느려질 수 있습니다.

4. 오류 처리: 강력한 오류 처리를 구현하여 시간 초과 또는 리소스 제약을 관리합니다.

5. 캐싱: 자주 생성되는 PDF에 대한 캐싱 전략을 구현하여 서버리스 기능의 부하를 줄이는 것을 고려해 보세요.

결론

이 접근 방식을 사용하면 Vercel의 서버리스 환경과 호환되는 Next.js 및 Puppeteer를 사용하여 강력한 HTML-PDF 변환 API를 생성할 수 있습니다. @sparticuz/chromium-min 및 puppeteer-core를 활용하여 서버리스 환경에서 Puppeteer를 실행하는 데 따른 주요 과제를 극복했습니다.

위 내용은 Puppeteer를 사용하여 HTML을 PDF로 변환하는 Next.js API 만들기(Vercel 호환)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!