[Next.js] 배포하기: AWS Amplify vs Github pages vs fly.io vs Vercel vs Netlify

프로젝트를 하다보면 언젠가 배포를 해야 하는 순간이 온다.

필자 또한 최근 nextJS로 간단한 홈페이지를 만들었는데, 막상 배포를 하려니 nextJS라 고려해야할 점이 많아서 한 번 정리해보고자 한다.

결론만 볼 사람들은 5번으로 바로 넘어가면 된다.

(NextJS를 선택한 이유는?)

일단 플랫폼을 비교하기 앞서서 굳이 nextJS를 선택한 이유를 간단히 적어보자 한다.
그래야 비교하는 의미가 있기 때문이다.

NextJS는 SSR(서버 사이드 랜더링)을 목적으로 주로 선택되는 웹 프레임워크이다.
즉 각 페이지를 서버 측에서 먼저 렌더링을 할 수 있기 때문에, 초기 페이지 로딩 속도가 빠르고 SEO(검색 엔진 최적화)에 매우 유리하다.
필자 또한 만든 프로그램이 인터넷 검색이 잘 되도록 하고 싶어서, 고민없이 바로 nextJS를 선택했다.

1. ❌ AWS Amplify

필자는 회사 업무로 인해 AWS를 주로 사용하는데, 생각해보니 AWS CloudFront를 직접 설정해서 프론트엔드를 배포했지, Amplify는 써본 적이 없어서 연습 겸 여기로 호스팅을 시도를 했다.

물론 어찌저찌 하니 배포는 잘 됐는데, 문제가 발생했다.
크게 2가지 문제가 있었는데, 바로 배포/반영 시간이 너무 걸린다는 것이다.

Amplify는 CDN을 위해 CloudFront를 사용하는데, CloudFront는 CDN과 Compute@Edge 배포에서 invalidations(무효화)와 propagations(전파)를 지원하지 않아 일종의 병목현상이 나타난 것이었다.

필자가 구현한 프로젝트가 간단한 편에 속하는데, 실제로 배포 후 반영까지 약 20분이라는 시간이 걸렸다. 실로 놀라울 따름…

또 하나의 문제는 이미지 로드가 느리다는 것이었다.
현재 기준으로 region을 us-east-1(버지니아 북부)로만 설정할 수 있는데, 파일 내부 static 이미지들이 캐싱되기 전까지는 이미지 로드가 매우 느리다는 것이었다.

맨 처음에 이미지 로딩 시간이 너무 길어보여서 착각한건가 싶어 몇 번 재테스트를 했는데,
그럼에도 불구하고 확실하게 정적 이미지들이 캐싱되기 전까지는 느리게 불러와지는 모습에 한탄을 금치 못했다.

눈물 머금고 나의 작고 귀여운 돈을 바치겠다는데 이렇게까지 느릴 일이 있나? 싶어서 결국 던지게 되었다 ㅎㅎ

2. ❌ Github Pages

사실 이거는 시도조차 안했다. 왜냐면 이 블로그 자체가 Github Pages로 운영되고 있기 때문에 굳이 동일한 기술 스택을 사용해야 하나 싶었기 때문이다.

무엇보다 Github Pages를 포기한 이유가 바로 API 라우트 였다. 안타깝게도 Github Pages는 서버 이용이 불가능한데, 나는 API 라우트를 구현했기 때문이다. 서버 없이 어떻게 작동시키겠어…ㅠㅜ

따라서 API 라우트 없는 build 결과물로는 github pages 배포는 가능하지만, API 라우트를 사용한다면 100% github pages에서 서비스가 안돌아가기 때문이 다른 대안점을 찾아야 했다.

3. ✅ fly.io

fly.io는 컨테이너 기반 애플리케이션으로, 전 세계 여러 데이터 센터에서 애플리케이션을 자동으로 배포하여 지연 시간을 최소화 및 성능 최적화가 가능한 플랫폼이다.

클라우드에서 Container Registry에 이미지를 업로드하여 Kubernetes로 돌리는건 흔한 경우라, 이것도 체험을 해보고 싶어서 가볍게 업로드를 해봤다.

명령어를 써야한대서 어렵나 싶었는데, 생각보다 나쁘지 않았다. 아래 명령어가 전부이기 때문이다.
하지만 이 프로그램은 아쉽게도 최종 후보에서 탈락하고 말았다. 왜냐면 무료기간 이후로 매달 25달러를 내야하기 때문이다 돈아끼기

# 1. flyctl 설치
## brew 설치
brew install flyctl
## brew사용이 어려울 시
curl -L https://fly.io/install.sh | sh

# 2. flyctl 로그인
flyctl auth login

# 3. 초기 설정 및 배포하기
## 이때 fly.toml 및 Dockerfile이 생성되며, 자동으로 배포가 진행됨
fly launch

# 4. 이후 코드 수정 후 배포 업데이트
fly deploy

4. ✅ Vercel vs Netlify

이 두 친구들은 프론트엔드 배포를 하는데 많이 사용되는 플랫폼이다.
왜냐면 배포도 매우 쉽고 무엇보다 무료 범위 내에서 충분히 커버할 수 있기 때문이다.

따라서 이 둘을 두고 어디로 배포를 하냐 의견이 분분히 발생하는데, 간단하게 정리를 해보고자 한다.
(참고: https://ikius.com/blog/vercel-vs-netlify)

Vercel

• nextJS에 한정해서 최적의 배포가 가능: vercel에서 nextjs를 만들었기 때문
• 빠른 로딩 속도

Netlify

• 다양한 정적 사이트 생성기 & 복잡한 배포 요구사항이 있을 경우에 사용이 좋음: vercel보다 플러그인이 많이 제공되기 때문
• 무료 플랜에서 상업 용도로 사용 가능 (vercel은 상업용으로 페이지 만들 시 플랜 구매 필요)

5. 결론

합리적인 가격(무료 또는 소액)으로 배포를 한다는 가정하에,
Vercel, Netlify, fly.io를 추천한다!

Github Pages는 NextJS에서 API 라우트를 구현하지 않았을 때만 추천한다.