Next.js 배포 어떻게 하시나요?

안녕하세요. 🙂

식스샵 프론트엔드 개발팀입니다. 저희는 Next.js 프레임워크를 사용하여 제품을 개발하고 있는데요.

오늘은 Next.js 웹 어플리케이션 배포환경을 구축하며 저희가 검토했던 기술들을 소개해 드리려 합니다.

Next.js로 개발한 웹 애플리케이션을 배포하기 위해서는 서버가 필요한데요. 서버 환경을 구성하는 방법은 다양하지만 결국 서버 환경을 직접 구성하느냐, 프레임워크를 이용하느냐에 따라 두 가지로 나눌 수 있습니다.

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

최근에는 이 중 Vercel을 이용한 Next.js 프로젝트 배포를 가장 많이 볼 수 있는데요. Vercel은 팀 레포지터리에 대해서 멤버 당 20$(월 비용)을 부과하는 요금 정책을 시행하고 있습니다.

식스샵에서는 스테이징 환경에서 비용 없이 빠르게 배포하는 방법을 리서치 하던 중에 AWS의 Elastic Beanstalk 서비스를 이용한 방식과 Serverless Framework를 이용한 배포 방식을 경험해 보게 되었습니다. 오늘은 이 두 가지 방법으로 배포하는 과정에 대해서 공유해 드리려 합니다.

Next.js 프로젝트 생성

배포 예시를 보여드리기 위해 CNA를 이용해 Next.js 어플리케이션을 생성합니다.

build 명령어를 입력하면 빌드 된 파일들이 .next 폴더 하위에 생성됩니다.

zip 명령어를 이용해 배포할 파일을 압축해야 하는데요. 앞서 생성된 .next폴더는 숨김 폴더이기 때문에 압축 시 위와 같이 명령어를 입력하여 숨김파일까지 압축해 주셔야합니다.

1. Elastic Beanstalk를 사용한 배포

첫 번째로는 Elastic Beanstalk를 통한 배포 방법을 소개하려 합니다.

우선 Elastic Beanstalk가 무엇인지 간단하게 알아보고 갈까요?

Elastic Beanstalk란?

AWS Elastic Beanstalk는 Java, .NET, PHP, Node.js, Python, Ruby, Go, Docker를 사용하여 Apache, Nginx, Passenger, IIS와 같은 친숙한 서버에서 개발된 웹 애플리케이션 및 서비스를 간편하게 배포하고 조정할 수 있는 서비스입니다.

인프라에 자세히 알지 못하더라도 코드를 업로드하기만 하면 Elastic Beanstalk가 선택된 지원 가능 플랫폼 버전을 구축하고 Amazon EC2 등의 리소스를 하나 이상 프로비저닝하여 애플리케이션을 실행하는데요.

용량 프로비저닝, 로드 밸런싱, Auto Scaling부터 시작하여 애플리케이션 상태 모니터링에 이르기까지 배포를 자동으로 처리합니다. 이뿐만 아니라 애플리케이션을 실행하는 데 필요한 AWS 리소스를 완벽하게 제어할 수 있으며 언제든지 기본 리소스에 액세스할 수 있습니다.

Elastic Beanstalk의 가장 큰 장점은 위와 같이 자동으로 처리하는 것에 대한 추가 비용 없이 애플리케이션을 저장 및 실행하는 데 필요한 AWS 리소스에 대해서만 요금을 지불하면 된다는 점입니다. 🙂

Elastic Beanstalk에 대한 자세한 사항은 아래 링크에서 확인해주세요. 😊

AWS Elastic Beanstalk란 무엇입니까?

Elastic Beanstalk를 통해 애플리케이션을 배포하는 방법은 2가지가 있습니다.

1. EB(Elastic Beanstalk) 콘솔을 통해 어플리케이션과 환경을 생성해 배포 파일을 업로드하는 방법
2. EB CLI를 통해 명령어로 어플리케이션과 환경을 생성해 배포하는 방법

오늘은 EB콘솔의 GUI를 이용하여 어플리케이션과 환경을 생성하고 소스 코드를 업로드 하는 방법과 EB CLI를 통해 Next.js 프로젝트를 배포하는 방법 2가지 모두를 살펴보겠습니다.

1–1. EB 콘솔

애플리케이션 및 환경 생성

Elastic Beanstalk 탭을 클릭한 후 애플리케이션 → ‘새 애플리케이션 생성’을 선택합니다.

애플리케이션 이름을 입력하고 플랫폼은 ‘Node.js’를 선택해주세요. (플랫폼 브랜치와 버전은 디폴트 설정을 따르셔도 되지만 원하는 버전이 있다면 변경해주세요.). ‘코드 업로드’를 선택 후 앞서 생성한 deploy.zip 파일을 업로드해줍니다.

5–10분여의 시간이 지나고 환경 생성이 정상적으로 완료된 것을 확인할 수 있습니다.

1–2. EB CLI

이제 CLI를 통한 배포방법을 알아보겠습니다.

선행작업으로 AWS CLI와 EB CLI를 설치해주세요.

어플리케이션 생성

Next.js 프로젝트로 이동하여 EB 초기화를 진행합니다.

(만약, aws-access-key와 aws-secret-key 입력을 요구한다면 AWS IAM 유저의 키를 발급받아 입력해주세요. 키 발급에 관련된 내용은 아래에서 참고해주세요.)

위 명령어를 입력하여 어플리케이션의 이름, 리전, 플랫폼 등 어플리케이션 설정을 진행할 수 있습니다.

환경 생성

어플리케이션 생성이 완료된 후 위 명령어를 입력하여 로드밸런서 타입, 개수 등 환경 설정을 진행할 수 있습니다.

설정을 완료했다면 AWS에 접속하여 Elastic Beanstalk로 이동 후 생성한 환경으로 이동해주세요.

콘솔과 동일하게 5–10분여의 시간이 지나면 정상적으로 프로젝트가 배포된 것을 확인할 수 있습니다.

AWS 액세스 키 발급

AWS IAM 사용자의 액세스 키와 비밀번호를 발급받아주세요.

액세스 키 발급에 대한 자세한 안내 사항은 AWS에서 참고해주세요. 😊

AWS 키 발급 안내

Github Actions

만약 코드를 수정할 때마다 위와 같이 매번 직접 배포한다면 매우 귀찮고 번거로운 일이겠죠?

자동 배포를 진행해봅시다.

1. AWS Secret key 등록

앞서 생성한 AWS IAM 유저의 액세스 키와 Elastic Beanstalk 환경을 구성한 region을 Github Settings > Secrets > Actions에 다음과 같은 이름으로 등록해주세요.

2. Github workflows > create main.yml

main.yml

위와 같이 yml 파일을 작성한 후 main 브랜치에 새로운 commit을 push하면 새로운 코드로 자동 배포가 진행됩니다.

2. Serverless

Serverless Framework란?

두번째로는 Serverless Framework를 이용한 배포 방법에 대해 소개하겠습니다 :) 우선 Serverless Framework가 무엇인지 알아볼까요? 😉

Serverless Framework란, AWS 람다와 Azure 함수 서버리스와 같은 Serverless 서비스를 이용해 코드를 쉽게 배포해 주는 프레임워크입니다. Serverless Framework는 다양한 서비스들을 serverless 방식으로 배포할 수 있도록 플러그인들을 제공합니다. 사용자들은 원하는 플러그인을 설치하여 배포를 진행할 수 있습니다.

저희는 오늘 Next.js를 Serverless 방식으로 배포하는데 도움을 주는 Serverless-Nextjs-Plugin을 사용할 예정인데요. 해당 플러그인에 대한 소개 문구는 아래와 같습니다.

A zero configuration Next.js serverless component for AWS Lambda@Edge aiming for full feature parity.

쉽게 말하면 AWS Lamdba@Edge를 사용해서 Next.js 웹 어플리케이션을 배포해주는 서비스라고 볼 수 있습니다.

Architecture

기본적으로 배포시 모든 배포 환경은 Cloudfront에 구성되게 됩니다. 필요한 정적 파일은 S3 버킷을 통해 생성하고, SSR과 API 백엔드에 필요한 함수는 lambda@edge에 구성되어 배포됩니다. 필요한 모든 자원은 Cloudformation을 통해 자동으로 생성되기 때문에 사용자는 배포 설정을 담은 YAML파일만 잘 만들어주면 됩니다.

정리하면 Serverless Component가 사용하는 AWS내의 서비스는 아래와 같습니다.

• CloudFormation
• S3
• Cloudfront
• Lambda@Edge

Deploy

이제 Serverless Framework를 이용하여 배포를 진행해보겠습니다. Serverless Framework 또한 zero configuration을 지향하는 프레임워크인 만큼 직접적으로 설정할 부분이 많지 않습니다.

1. Next.js 프로젝트 생성

2. Serverless package script 추가

서버리스 배포를 위해 serverless 패키지를 설치하고, 빌드 명령어를 수정해줍니다.

3. Github Actions

이번에도 CI/CD 툴로 Github Action을 이용해 볼 예정인데요.

앞선 배포와 마찬가지로 AWS 배포를 위해 AWS access key를 발급받은 후, Github의 프로젝트 Repository에 등록해 줍니다.

이제 배포를 위한 yml 파일을 프로젝트에 생성해줍니다.

serverless.yml

배포가 완료된 후 실행내역을 보면 배포가 된 url과 버킷 이름, Cloudfront ID를 확인할 수 있습니다.

4. 추가 설정

기본 설정으로는 배포를 실행할 때마다 CloudFront와 S3 Bucket, Lambda가 새로 생성됩니다. 이를 고정하고 싶다면 serverless.yml 의 bucketName과 distributionId를 고정해주어야 하는데요. bucketName과 distributionId 는 AWS나 Github Action의 실행 결과를 보면 확인할 수 있습니다.

첫 배포 이후 yml 파일에 아래 라인을 추가해주면 다음 배포부터 기존에 생성된 자원을 이용하게 됩니다.

serverless.yml

👣 마치며

오늘은 Next.js 배포방법에 대해 알아보았습니다.

앞서 말씀드린 것과 같이 Next.js 배포를 위해서는 여러 가지 배포 플랫폼과 방법을 이용할 수 있는데요. 여러 가지 방법 중 프로젝트에 알맞은 배포 방법을 찾아 선택해보시면 될 것 같습니다.

오늘도 식스샵의 글을 읽어주셔서 감사합니다. 😊

References

https://docs.aws.amazon.com/ko_kr/elasticbeanstalk/latest/dg/eb-cli3.html

https://www.serverless.com/

식스샵은 올인원 이커머스 플랫폼을 만들고 있는 팀입니다.

B2B | E-Commerce | SaaS 시장에 대해 함께 고민하고, 빠른 실험과 검증을 통한 사업의 성장을 경험하고 싶은 분을 모시고 있습니다.

채용 중인 포지션은 이곳에서 확인하실 수 있습니다 🙂