Cloudflare Worker와 Satori로 동적 Open Graph 이미지 만들어보기

배경

우리는 보통 서버를 HTML, JSON과 같은 문서를 생성하고 내려주는 대상으로만 이해할 때가 많아요.

이러한 개념을 조금 더 넓힐 수 있는 기회가 있을까 고민을 하다 Open Graph 이미지를 생성하는 서비스를 함께 만들어보면 도움이 되지 않을까 하는 생각이 들었어요.

오늘 이 시간에는 Cloudflare Workers라는 서버리스 플랫폼과 CDN에 대해간단히 학습하고

이를 통해 이미지를 생성해 응답, 캐시하는 간단한 서비스를 만들어보려고 해요.

Cloudflare?

Cloudflare라는 플랫폼에 대해서 들어보셨나요?

Cloudflare는 CDN(Content Distribution Network) 제공자로서 2009년에 설립된 회사에요.

전세계에 퍼져있는 거대한 인프라를 바탕으로 웹 콘텐츠를 캐싱하고, DDoS 등의 보안 공격을 방어하는 등의 기능을 제공해요.

웹 인프라 구축에 꼭 필요한 여러 기능들을 제공하는 플랫폼 회사입니다.

프론트엔드에 가까운 플랫폼인 만큼 프론트엔드 개발자라면 반드시 사용해봐야하는 플랫폼이라고 생각해요.

✨

당장 써볼래요! Cloudflare를 어디에 쓰면 좋을까요?

Cloudflare를 사용하시려면 도메인 등록이 필요해요. 원하시는 도메인 제공자(ex: GoDaddy, Namecheap)에서 도메인을 구매하신 뒤, Cloudflare에 등록하시면 아래 기능들을 사용할 수 있어요.

Cloudflare Workers

Cloudflare Workers는 Cloudflare 개발자 플랫폼의 심장 역할을 해요.

간단하게 설명하자면, JavaScript를 구동시킬 수 있는 엔진을 가진 서버리스 플랫폼이에요.

간단하게 Hello, World를 찍어볼까요?

(Demo)

Cloudflare Workers는 어떤 플랫폼에서 동작하나요?

Cloudflare Workers는 다른 서버리스 플랫폼(ex: AWS Lambda)과 다르게 V8을 활용해 자체 구축된 런타임을 사용해요.

developers.cloudflare.com

https://developers.cloudflare.com/workers/reference/how-workers-works/

해당 런타임은 오픈소스로 공개되어있어요.

github.com

https://github.com/cloudflare/workerd

그래서 우리가 잘 아는 AWS Lambda랑은 뭐가 다른가요?

Cloudflare Workers는 “Web API”를 최대한 사용하도록 구성되어있어요.

Service Worker API를 기반으로 하며, 이에 대한 예시로 addEventListener("fetch") 또는 caches 와 같은 전역변수를 활용할 수 있어요.


addEventListener("fetch", event => {
  const { cf } = event.request;
  console.log(cf.country); // 클라이언트의 국가 코드 (예: 'US')
});

🤔 Thinking…

📌

그동안 대부분 Node.js와 같은 플랫폼을 주로 사용해보셨을텐데요


import fs from "node:fs";

이 세상에는 다들 들어보셨을 Bun을 비롯해 Cloudflare의 Workerd, Figma Plugin이 동작하는 플랫폼인 QuickJS 등 다양한 JavaScript 런타임(동작 환경)이 있어요. 어떤 차이가 있는지 살펴보고 어떤 문제를 풀기위해 이런 런타임이 등장했는지 하나씩 들여다보시면 재미있으실거에요.

bun.sh

https://bun.sh/

bellard.org

https://bellard.org/quickjs/

우리가 오늘 만들고 싶은 것

서론이 길었죠? 그럼 실용적인 내용으로 조금씩 넘어가볼게요. 혹시 mentoring.fromundefined.com 의 상세 페이지 링크를 공유했을때 나오는 Open Graph 이미지를 보셨나요?

mentoring.fromundefined.com

https://mentoring.fromundefined.com/sessions/wi-241217


<meta property="og:image" content="https://mentoring-og-image.fromundefined.com/?session_id=WI-241217">

https://mentoring-og-image.fromundefined.com/?session_id=WI-241217