📘 기록 남기기 - NextJS 배포 POC

최근 회사에서 디자이너 분들과의 원활한 협업을 목적으로 스테이징 배포 환경을 임시로 구성하게 되었다. 배포 플랫폼을 선택하는 과정에서 여러 플랫폼을 사용해보며 POC를 진행했는데, 기록 차원에서 포스팅으로 남겨두기로 했다!

NextJS 배포 환경

NextJS는 SSR을 지원하기 때문에 배포시 서버가 필요하다. 서버 환경을 구성하는 방법은 다양하지만 결국 서버 환경에 따라 아래와 같은 두가지로 나눌 수 있다.

• 클라우드(AWS, Azure등) 환경에서 직접 서버 환경 구성
• Vercel, Netlify, Amplify, Cloudflare, Netlify, Serverless등과 같은 zero configration 배포 플렛폼 사용

이번 포스팅에서는 배포 환경을 구성하며 검토했던 기술들과 도입시 고려사항에 대해 간단히 정리해보려 한다.

플랫폼 별 살펴보기

Vercel

가장 먼저 살펴본 선택지는 Vercel이다. Vercel의 가장 큰 장점은 역시 NextJS에서 제공하는 모든 기능 + 앞으로 추가될 기능을 가장 먼저, 가장 완벽하게 지원한다는 것이다.

zero configuration을 지향하는 Vercel답게 클릭 몇번으로 간단히 배포를 할 수 있다는 것도 큰 장점이다.

또 별도의 구성 없이 모든 push에 대한 배포가 진행되는 preview 기능을 제공하는데, 이게 상당히 편리하다.
Vercel에 Github Repository를 연결 하고 해당 원격 저장소에 push를 하면 배포된 화면을 확인할 수 있는 preview url이 발급된다. 이런 방식으로 매 커밋에 대한 배포 결과물을 확인해볼 수 있다.

더 놀라운 점은 해당 기능은 무료 요금제인 Hobby 플랜에서도 지원한다는 것이다.

개인 프로젝트에서는 Vercel이 최고인 것 같다. 하지만 아쉽게도 Github Team 계정 레포의 경우 Pro 플랜을 이용해야 하기 때문에, Vercel에 연결하기 위해 1인당 20달러가 필요하다.

Amplify

Amplify는 AWS에서 제공하는 서비스로 AWS내의 리소스들을 사용하여 손쉽게 프론트엔드, 백엔드, 호스팅, 배포까지 풀스택으로 애플리케이션을 개발하도록 도와주는 완전 관리형 서비스이다. Vercel과 비슷한 컨셉에 AWS 서비스라고 볼 수 있을 것 같다.

현 시점에서(22년 7월) Vercel을 제외하고 NextJS의 가장 많은 기능을 사용할 수 있다. NextJS 12버전의 middleware, i18n 관련 피처를 제외한 모든 기능을 지원한다.

단점으로는 배포 과정이 Vercel에 비해 까다롭다. IAM 설정부터 Amplify CLI 설정까지 추가적으로 설정해 주어야 할게 꽤 많지만, 비용 측면에서는 Vercel보다 더 저렴하다.

궁금한 분들은 잘 정리해 놓은 블로그가 있으니 참조해보시길!

AWS Elastic BeanStalk

AWS의 Elastic BeanStalk(이하 EB) 서비스를 이용하여 서버 환경을 직접 구성할수도 있다. 물론 EC2에서 직접 서버 환경을 구성할 수도 있으나, EB의 장점은 로드 밸런싱 및 Auto Scaling부터 시작하여 애플리케이션 상태 모니터링, 무중단 배포 등 다양한 기능을 더 지원해준다는 점이다.

또한 이런 자동으로 처리하는 것에 대한 추가 비용 없이 사용한 AWS 리소스에 대해서만 요금을 지불할 수 있다는 점도 장점이다.

배포 환경 구성이 크게 어렵지 않고(클릭 몇번이면 가능) Github Action/Jenkins와 같은 CI/CD도 쉽게 붙일 수 있다. 하지만 아무래도 다른 Zero Config 플랫폼들에 비해서는 조금 더 설정해 주어야 하는 부분들이 많다.

Serverless

Serverless Framework는, AWS 람다와 Azure 함수 서버리스와 같은 Serverless 서비스를 이용해 코드를 쉽게 배포해 주는 프레임워크이다.

Serverless Framework는 다양한 서비스들을 serverless 방식으로 배포할 수 있도록 플러그인들을 제공하며, 사용자들은 원하는 플러그인을 설치하여 배포를 진행할 수 있다.

Serverless-NextJS-plugin은 AWS 서비스를 이용해서 배포를 진행하며 아키텍쳐는 아래와 같이 구성된다.

기본적으로 모든 배포 환경은 Cloudfront에 구성되게 된다. 필요한 정적 파일은 S3 버킷을 통해 생성하고, SSR과 API 백엔드에 필요한 함수는 lambda@edge에 구성되어 배포된다.

필요한 모든 자원은 Cloudformation을 통해 자동으로 생성되기 때문에 사용자는 배포 설정을 담은 YAML파일만 잘 만들어주면 된다.

추가로 Serverless도 아직은 NextJS 12를 지원하지 않지만, 곧 지원 예정이라고 한다!

마치며

사내에서 배포 POC를 진행하며 회사 블로그에 글을 작성하게 되었다. AWS의 Elastic Beanstalk와 Serverless Framework의 배포 과정에 대해 궁금하신 분들은 참고하셔도 좋을 것 같다.

식스샵 기술 블로그 : NextJS 배포 어떻게 하시나요?