Cloudflare Pages와 Workers를 이용해 Next로 만든 앱을 edge runtime으로 배포하기

개요

Cloudflare Pages와 Workers를 이용해 NextJS v14 + Typescript + App Router를 edge runtime으로 배포해보기

 

NextJS로 작성된 앱이 있다고 가정하고 Cloudflare Pages를 위한 배포준비를 해보자.

밑의 링크는 제일 많이 참고로 한 공식 문서이다.

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#configure-the-application-to-use-the-edge-runtime

Deploy a Next.js site · Cloudflare Pages docs

 

1. SSR을 하는 페이지 컴포넌트에 edge runtime 선언

SSR을 하고 있는 페이지 컴포넌트가 있다면 이하의 runtime 설정을 페이지 컴포넌트 내부에 삽입

export const runtime = 'edge';

 

SSG(정적 렌더링)을 하고 있는 페이지라면 굳이 붙일 필요는 없다.

그리고 ISR(점진적 정적 렌더링)은 내가 edge runime을 이용하는 시점에서는 support가 안되기 때문에 여기서는 논외로 하겠다.

https://github.com/vercel/next.js/issues/42859

Next 13: ISR not working for eperimental-edge runtime · Issue #42859 · vercel/next.js

 

2. 라이브러리 설치

npm install --save-dev @cloudflare/next-on-pages

이 라이브러리는 우리가 Cloud workers를 생성하지 않아도 페이지별로 필요한 function들을 알아서 빌드할 때 추가해 주는 빌드와 배포를 위한 라이브러리다.

 

3. Cloudflare Pages 메뉴에서 깃헙의 리포지토리와 연동

자세한 부분은 밑의 공식문서 참고

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-via-the-cloudflare-dashboard

Deploy a Next.js site · Cloudflare Pages docs

 

4. 배포 환경설정

• Build Command: npx @cloudflare/next-on-pages@1 로 설정
• Build output diretory: .vercel/output/static 로 설정
• Root directory: 프로젝트의 Root 디렉터리. (현재의 프로젝트의 구성에 맞춰 설정)

5. Compatibility flags 설정

위의 이미지 처럼 nodejs_compat이라는 플래그를 추가하면 된다.

 

이제 아마 main 브랜치나 staging 브랜치에 머지가 될 때 자동 디플로이가 움직이게 될 것이다.

 

 

다른 참고 기사

Cloudflare PagesにNext.jsをデプロイするとSSRが動作するようになったのでどうやって実現されたのか