블로그의 썸네일과 Open Graph Image를 매번 만드는 것은 여간 귀찮은 일이 아닙니다. Heroku, React, Express로 이 이미지를 자동으로 생성하는 api를 개발해봤습니다.

Intro

블로그 글들에 썸네일이 없어 횡한데, 그렇다고 매번 썸네일을 만드는건 개발자답지 못한 방식이겠죠. 이걸 한번 자동화해보려고 합니다. 오늘은 그 첫 단계로 title, subtitle을 받아 썸네일 이미지를 생성하는 api를 만들었습니다.

방법론

  1. TypeScript 환경으로 Express 서버 개발

    • React Component로 html을 생성, react-dom/server의 renderToString() 함수를 이용해 생성된 html을 stringify했습니다.
    • string으로 바뀐 html을 puppeteer 패키지를 활용해 이미지로 바꿉니다.
    • respons head의 Content-Type을 image/png로 지정해줬습니다.
    • image의 사이즈를 동적으로 바꾸는 것은 어렵지 않은 문제이지만 우선은 MVP 개발이므로 흔히 쓰이는 1200 X 630으로 고정했습니다.

  2. Heroku로 서버 Deploy

    • 원래는 간편하게 Vercel을 이용해 Deploy하려고 했으나, AWS Lambda의 50mb 용량 제한으로 불가능했습니다. 이에, Heroku로 배포하는 방법으로 선회했습니다.
    • 한글 폰트 깨짐 issue가 발생해, NotoSansKR 폰트를 static 파일로 읽어오는 코드를 추가했습니다.
    • Deploy시 Heroku에서 puppeteer를 사용할 수 있도록 해주는 buildpack을 추가해줬습니다.

결과

Sample API

https://og-img-generator-server.herokuapp.com/og/타이틀/서브타이틀

sample

해결할 점

  1. Heroku의 한계로 api가 이미지를 응답하는 속도가 매우 느립니다. (10초정도) 따라서, 실제로 사용하려면 다른 방법을 강구하거나, getStaticProps()에서 처리해 주어야겠습니다.
  2. 좀 더 발전시켜서 유연한 Thumbnail / Open Graph Image Generator를 개발해보고 싶습니다.
2022.08.11

약간의 변경점이 있었습니다. 이 글을 참고해주세요!