2021년도 Lambda 제작 PDF(일본어 지원)

여러분~~!
Lambda로 PDF 만들고 싶죠?

Lambda로 PDF를 만드는 게 어려워요.

하고 싶어도
HTML에서 PDF의 node를 만듭니다.js 라이브러리는 여러 가지가 있지만 기본적으로 브라우저가 필요합니다.

lambda의 운행 시간에 브라우저가 없기 때문에 lambda에서 사용하면 매우 번거롭다.

잠깐, 힘든 일이 많아서 포기하는 사람도 많죠.

이번 전제

serverless 프레임워크+webpack를 이용하여 기존 응용을 구축하는 토대

lambda node.js 실행 시간

가장 빠른 방법

일본어 지원

PDF에 HTML을 추가하는 기능을 추가합니다.

피하고 싶은 거.

포장된 용량을 필요보다 크게 늘리고 싶지 않음

개발자의 디렉터리에 필요하지 않은 물건(바이너리, 글꼴 파일 등)을 놓고 싶지 않다

lamba 실행 시간을 인식하지 못하는 OS와 디렉터리 구조

생각하지 않는 일

로컬 개발 기능

로컬 개발 시 개발 환경에 설치된 브라우저를 직접 조작하거나 docker 등 헤드 없는 브라우저를 고정적으로 설치한 환경을 사용할 수 있으나 본고는 생략합니다.

할 일

전술

chrome-aws-lambda.
이 포장은 lambda 용기에 포함되지 않은 브라우저의 2진법을 포함하고 있으며, 이 포장을 lambda에서 depro를 하면 lambda에서puppeters를 시작할 수 있습니다.
다만, 정상적으로 사용하려면 포장에 2진법을 넣어야 하기 때문에 포장이 커지고, 스스로 lambda layers를 디자인하는 등 번거로운 절차가 많다
이번 이용이미 각 구역에 나눠진 lamba layers.

이루어지다

함수 추가

# serverless.yml
---
functions:
+  pdf:
+    handler: src/handler.pdf
+    layers:
+      - arn:aws:lambda:ap-northeast-1:764866452798:layer:chrome-aws-lambda:22
---

우선,serverless.yml에 대상 레이어스의 함수를 추가합니다.
함수 이름 등은 한 번만 가능합니다.
지역은 당분간 도쿄다.

webpack.config.js에 externals 추가

웹 패키지 환경에서

크롬-aws-lambda는layers에 포함되어 있음

크롬-aws-lambda를 웹 패키지의 포장 대상으로 할 필요가 없음

따라서 웹 패키지의 포장 대상에서 삭제합니다.

// webpack.config.js

module.exports = {
  // ...
+  externals: ['chrome-aws-lambda'],
  // ...
}

이루어지다

puppeteer 호출

chrome-aws-lambda는puppeteer를 포함하기 때문에out of thebox에서 사용할 수 있습니다.
일본어 글꼴이 포함되지 않기 때문에 CDN을 통해 notosans를 읽은 후 puppeteer 브라우저의 실례를 되돌려 주는 유틸리티를 만듭시다.

const getPuppeteer = async () => {
  // TODO 開発環境のOSのブラウザを利用するpuppeteerを返却する
  //   if (process.env.IS_OFFLINE) {
  //   }

  const chromium = require("chrome-aws-lambda");

  // CDNから日本語フォントを読み込む
  await chromium.font(
    "https://raw.githack.com/minoryorg/Noto-Sans-CJK-JP/master/fonts/NotoSansCJKjp-Regular.ttf"
  );

  return chromium.puppeteer.launch({
    executablePath: await chromium.executablePath,
    args: chromium.args,
    headless: chromium.headless,
    defaultViewport: chromium.defaultViewport,
  });
};

글에서 .fonts 디렉터리에 글꼴 파일을 설정하고 depro 포장에 포함하는 방법을 소개했다이번에는 개발 환경에 여분의 바이너리.fonts 디렉터리를 창고에 제출하는 것이 불편하기 때문에 인터넷에서 읽는 것을 실시했다.

함수 본문 설치

puppeteer의 브라우저 실례를 만들면 정상적으로 실행할 수 있습니다.
다음은 액세스https://google.co.jp 및 A4 PDF의 API Gateway 트리거 함수의 예입니다.

// src/handler.ts

export const pdf = async (event, context) => {
  const browser = await getPuppeteer();
  const page = await browser.newPage();
  // A4
  await page.setViewport({
    width: Number(2480),
    height: Number(3508),
  });
  // ページ遷移
  await page.goto("https://google.co.jp");
  const pdf = await page.pdf();
  return {
    status: 200,
    body: pdf.toString("base64"),
    headers: {
      "Content-Type": "application/pdf",
    },
  };
};

이것뿐이다

그게 다야.

TODO

이번에는puppeteer 브라우저의 실례적인 함수를 로컬에서 개발할 때의 행동을 생략했습니다.
여기 설치는 각자 해 주세요.

we're hiring!

이번에는 serverless frame work 환경에서 포장을 가중시키지 않고 PDF 그리기 기능을 빠르게 구현했다.
제가 속한 세븐리치그룹의 횡단 기술 지원 조직에서는 봉사하는 사람과 두 사람이 세 발로 서비스 개발을 한다.
자사 사업과 투자자 사업을 중심으로 초상류(구상 단계의 장벽)에서 toB SaaS와 toC 웹 앱 등 다양한 사업에 들어가 필요한 것을 스스로 만드는 작업방식으로 참여한다.
사업에 전념할 수 있는 사업회사의 업무 방식과 다양한 사업에 관련된 수탁회사의 업무 방식이 좋은 곳이라고 할 수 있습니다. 관심이 있다면 트위터에 DM 등 가볍고 유쾌한 방식으로 진행하세요!
노트를 확인하세요!

참고 문장

[chrome-aws-lambda] 부호화할 때의 간단한 해결 방법