serverless next.js 를 사용해보자! 그리고 자동화까지?

사이드 프로젝트로 앱을 만들면서, 어드민 페이지가 필요했었는데,

자연스럽게 어드민 페이지 배포를 위해 배포방법을 고민을 하게 되었다.

우리가 next 앱을 배포하기 위해서 다양한 방법을 고려해볼 수 있다.

• Netlify
• Vercel
• Github page
• EC2, Lambda, s3 등을 구축하여 배포 하거나 기타 aws 인프라를 직접 구축
• serverless next.js component

이번에 선택한 것은 serverless next.js component package 를 사용해보기로 했다.

 

사실 s3 에 정적 웹 호스팅 하고 cdn 으로 cloudfront, 도메인 연결로 route53 이용해서 이미 어느정도 구축을 다 해놓은 상태이긴 했으나,

serverless 를 써보고 싶기도 했고, github actions 로 자동화 할때도 셋팅이 길어져서 serverless next.js component를 붙여 보았다. 그리고 간단한 serverless yml 파일로 cloudfront, aws s3, lambda 셋팅과 배포를 진행해준다는 점이 참 맘에 들었다.

어드민 배포에 오랜 시간을 쏟을 순 없어 ..🥲

 

serless next.js component 에 대해선 의견이 다양하지만..!

이렇게 간단하게 배포 프로세스를 구축할 수 있다고? 하며 좀 놀랬었다.

 

serverless next.js 가 어떤 방식으로 배포 프로세스를 구축해주는지 잘 설명이 되어있는 그림이 있어서 가지고왔다.

 

serverless yml file 작성하기

우선 serverless.yml 이라는 이름으로 파일을 만들고 파일을 작성해 준다.

• component 는 3.5.3 버전을 사용해서 셋팅해 주었다.
• domain 은 여러분이 구매해서 route53이랑 붙여놓은 도메인명을 넣으면 된다.
• bucketResion, bucketName 은 s3 버킷을 구축할 때 사용할 이름과 리전을 설정하면 된다.
• defaultLambda 는 defaultLambda 이름을 지정 해준다.
• imageLambda 는 image optimization을 위한 defaultImageLambda 이름을 지정 해준다.
• distributionId 는 클라우드 프론트가 생성 된 후에 ID를 넣어주면 된다.
• comment는 해당 클라우드 프론트에 대한 간략한 설명을 적어주면 된다.

셋팅은 이것 뿐만 아니라 되게 다양하다. 그리고 필수가 아니라 옵셔널인 것들도 있다.

어떤게 옵셔널이고 어떤 추가 값들을 넣어서 셋팅할 수 있는지 확인하고 싶으면 아래 링크를 참고하자.

👉🏻 https://github.com/serverless-nextjs/serverless-next.js 👈🏻

 

AWS 자격증명 설정하기

aws 에 배포하는 것이므로 당연히 aws 에 대한 credentials 를 설정해줘야 한다.

aws iam 계정에 대한 엑세스키와 시크릿키를 설정해준다.

IAM 에 권한 부여하기

참고로 나는 https 를 사용하기 위해 ssl 인증서를 발급 받아놓았고,

serverless nextjs 에서는 람다 엣지, s3, cloudfront를 사용하므로,

우리의 IAM 계정에 권한을 부여해주어야 한다.

그리고 부가적으로 여러분이 필요한 권한을 추가 부가 해주면 된다.

난 아래와 같이 권한을 부여해 주었다.

이게 끝

여기까지가 serverless nextjs 셋팅 끝이다.

놀라울 정도로 간단하다.

 

배포하기

아래 명령어를 입력 후, 잠시 기다려주면 cloudfront, s3, 람다엣지 들어가서 확인해보면, 셋팅이 잘 되어있는걸 확인할 수 있다.

---

배포 자동화 하기

배포할때는 보통 필요한 패키지 업데이트 → 테스트 → 워닝 확인 → 배포 등등 처럼 일련의 과정이 있다.

따라서 해당 배포 프로세스를 자동화 시켜두면 편한데, 나는 이번 프로젝트에서 github actions 을 썼다.

 

1. github 에서 시크릿키들 등록하기Settings → secrets → Actions 에 들어가서 필요한 값들을 셋팅하자

우리의 aws 엑세스 시크릿 키를 코드에 노출시키지 않고 보호하기 위해 github에 등록 해 두도록 하자!

2. deploy script 등록하기

package.json에 deploy script를 등록해주자!

3. deploy.yml 파일 작성하기

🗂 .github / workflows / deploy.yml

나는 master 로 push 됐을 때 배포 되길 원한다!

deploy yml 파일은 여러분이 원하는 배포 프로세스 대로 작성하면 된다!

4. 깃헙 액션 돌려보기

깃헙 레포에 master 브랜치로 푸시 하고, 배포가 잘 되는지 확인해보자!

---

 

끗