CloudFlare를 이용해 Next.js 프로젝트 Static하게 배포하기

😊Why CloudFlare?

프리플랜도 정적 요청에 대해 트래픽 제한이 없다는 장점이 있습니다.
보통 vercel , netlify와 같은 서비스들은 서버리스함수를 지원해주기는 하지만
트래픽 제한이 월 100gb로 걸려있는 것과는 대비되는 부분이네요
물론 cloudflare도 서버리스를 지원하는 형태로 배포할 수도 있습니다.
worker라는 서비스를 이용하면 가능한데
자세한 정보는 
https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-a-nextjs-site

Deploy a Next.js site · Cloudflare Pages docs

위 사이트를 참고해주세요
https://medium.com/bgpworks/cloudflare-workers-%EC%84%9C%EB%B2%84%EB%A6%AC%EC%8A%A4-4de0d9d6aeb2

Cloudflare Workers — 서버리스

워커가 궁금하다면 이 포스트를 추천드립니다.
 
다만 worker는 

static 서비스처럼 완전히 무료는 아닙니다.
다만 굉장히 넉넉하게 사용량이 제공되니 worker의 사용을 고려해보시는것도 좋을 것 같습니다.
각 요청 당 최대 10ms cpu time이 제공되고
하루 사용량이 무려 10만입니다.
https://www.cloudflare.com/ko-kr/products/workers-kv/

Cloudflare Workers KV

workers KV라는 서비스도 리미티드로 제공해주는데

스토리지 서비스로 생각할 수 있습니다.
무료 플랜도 하루 100,000건의 키값을 읽을 수 있는데
키값을 쓰기 / 삭제 / 나열하는 것은 하루 1000건으로 제한되어 있습니다.
이부분은 1000건이다보니 프리플랜을 초과하기 쉬운 면이 있으니 주의하면 좋을 것 같습니다.
https://miryang.dev/blog/develop-guestbook-with-cloudflareworkers

Cloudflare Workers & KV로 Guestbook 개발하기 | miryang.dev

서칭을 해보니 1000건 제한이 문제가 되셨던 케이스를 발견해서 링크합니다.

---

😎static하게 배포하기

 
대부분 cloudflare에서 제공하는 자습서를 기반으로 시도했지만
중간중간 안되는 부분들이 있어 그부분들은 해결하면서 진행했습니다.
포스트를 보며 따라해보실분들은 우선 프로젝트를 생성하는 것 부터 해야할 것입니다.
만일 이미 프로젝트가 있으시다면 이 부분은 생략해도 좋습니다.

npx create-next-app

 
next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

Deploying: Static Exports | Next.js

next.js의 docs deploying파트를 확인해보면
static하게 next.js app을 빌드하고싶은 경우의 가이드라인을 제시해줍니다.
 
이때 여기서 기억해두어야할 점은 nextconfig.js에 output을 export로 설정해주는것입니다.
또한 기억할 점은
 
When running next build, Next.js generates the static export into the out folder. Using next export is no longer needed. For example, let's say you have the following routes:
 
위 문서를 읽다보면 나오는 이 문구입니다.
더이상 next export를 사용할 필요가 없다는 문구인데
이전에는 next export도 같이 사용해주었는데 이제 그럴 필요가 없다는 듯 하네요
https://www.cloudflare.com/ko-kr/

Cloudflare 홈페이지

cloudflare에 접속하여 회원가입을 합니다.
우리는 정적으로 배포할 것이기 때문에 cloudflare가 제공하는
pages 서비스를 이용할 것입니다.

workers 및 pages라는 문구를 찾습니다.
전 이미 서비스를 하나 배포해두어서 화면이 좀 다를것입니다.
cloudflare 는 한국어 번역을 지원해주니 어렵지않게 찾으실 수 있을것입니다.
본 포스트에서는 빌드 방법에 대해 서술합니다.

보이시나요.. 제 수많은 시행착오가

우선 Cloudflare docs에서 빌드 방법을 찾습니다.
Next.js를 static하게 빌드하기위해서는 next build && next export를 권장하는 모습입니다.
하지만 next.js docs의 deploying 문서를 따라가보면
next export는 더이상 필요하지않다고 합니다.
취향대로 해주시면 될 것 같은데
다만 저는 next export를 사용하면 빌드를 실패하네요
 
또한 빌드 결과물이 담기는 폴더도 기억해둡니다.
out 디렉토리에 생성된다고 기억하겠습니다.

빌드 구성을 다음과 같이 설정해주면 됩니다.
out 디렉토리로 빌드 결과물이 출력되며 빌드 명령어는 npm run build
 
또한 next.js 13버전은 node 버전이 16 이상이어야합니다.
다만 cloudflare의 node버전은 12.18.0이기때문에 node 버전을 지정해주어야합니다.

node version으로 인해 빌드를 실패합니다.

---

😐CloudFlare 환경변수로 node 버전 설정하기

설정 -> 환경변수에서 NODE_VERSION 환경변수에 버전값을 넣어주면 됩니다.

혹은 빌드 시스템 버전에서 현재 버전을 2로 올려주면 됩니다.
빌드 시스템 버전을 2로 올리게되면 사용하는 node.js 버전도 올라가기때문에
특정 노드버전이 반드시 필요한게 아니라면 빌드 시스템 버전을 올려주는것만으로 해결됩니다.

이제 배포가 성공적으로 수행되면 확인을 해봅시다.
배포 url이 깔끔해서 마음에 듭니다. pages.dev 형태에요!

---

😣마치며

vercel, netlify에 비해 조금 까다로운 부분이 있습니다.
node버전을 설정해주어야한다같은 부분이 좀 그런것 같아요
하지만 완전 무료인데 그게 중요한 것은 아니겠지요
충분히 감수할만 한 것 같습니다.