[Cloudflare] Pages & Functions: Nextjs 구축하기

#Cloudflare

Cloudflare 페이지는 단순한 정적 렌더링만 되는게 아니라, Nextjs 같은 서버사이드 렌더링 시스템도 구축해서 사용할 수가 있다.

그게 어떻게 가능한가 하면

Function이라는 부가적인 서버 처리 기능을 제공하기 때문에 가능한 부분이다.
이런걸 흔히 Edge 런타임이라고 부르는데, AWS에 비슷한 놈으로 Lambda Edge가 있다.

원래 있던건 아니고, 2022년 6월부터 지원이 시작된 따끈따끈한 기능이다.

비용

이런걸 써보려면 당연히 비용을 생각하지 않을 수 없다.

Pages의 Functions는 Cloudflare worker 기반으로 요금이 청구된다.
다행히도 Workers는 다른 서버리스 서비스들과 비교하면 거저라고 생각될 정도로 매우 저렴한 가격을 자랑한다.

매일마다 10만건이 무료고, 그 이후로도 100만건에 1달러도 안한다.
cloudflare의 엄청난 적자가 아마 다 이런데서 나올 것이다.

github 레포 하나 파고, 템플릿 만들어서 코드를 넣어주자.

npx create-next-app --example with-static-export cloudflare-nextjs

이거면 된다.

cloudflare 콘솔에 들어가서 Pages를 만들어주자

레포지토리 고르고

Nextjs를 선택해준다.
Statis HTML export로 골라주자.

그리고 환경변수로 노드 버전을 설정해줘야 한다.
안그러면 제멋대로 레거시한 버전으로 세팅해서 컴파일이 다 터질 것이다.

그러면

알아서 빌드해서 올려줄 것이다.

아주 편리하다.