본문 바로가기
JavaScript/Next.js

Next.js) Next.js serverless로 배포하기 (@sls-next/serverless-component - Next.js13 지원 안됨)

by 박채니 2024. 4. 12.
SMALL
안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

 

 

Next.js 프로젝트 서버리스로 배포하기

Next.js 프로젝트를 서버리스로 배포할 일이 생겼다.

어떻게 배포하는지 열심히 서치하고 아티클을 찾아서 정리했는데.. Next.js 13에서는 지원이 안됐다.🤦🏻‍♀️

 

@sls-next/serverless-component 로 배포하는 방식이였는데, 우선 열심히 삽질한 내역을 공유하려고 한다.

 

@sls-next/serverless-component 로 NextJS 프로젝트 배포하기

⚠️ Next13 버전 이상부턴 지원되지 않음!!!!!!

 

참고 사이트

* https://2nnovate.github.io/next.js/ssr/serverless/deploy-next-ssr-app-by-severless/
* https://falsy.me/%EC%83%88%EB%A1%9C%EC%9A%B4-%EB%B2%84%EC%A0%84-serverless-framework%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-nextjs-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-aws-lambda%EB%A5%BC-%ED%86%B5/
* https://github.com/serverless-nextjs/serverless-next.js#readme
* https://velog.io/@ghenmaru/Next-next-serverless-%EB%B0%B0%ED%8F%AC-%EA%B5%AC%EC%A1%B0-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
* https://aerolabs.tistory.com/357

1. 배포환경 만들기

✅ Node12 이상

✅ Serverless Framework 설치

 

2. 도메인 등록

  • 도메인 생성해서 Route 53에 등록
  • 커스텀 도메인 설정을 하지 않으면 serverless에서 생성

 

3. serverless.yml 파일 생성

sample:
	component: "@sls-next/serverless-component"
	inputs:
		# cloudfront 설정 
		cloudfront:
			distributionId: SAMPLE # cloudfront id 값
		# 커스텀 도메인 설정		
		domain: "sample.com" # www는 기본값, domain이 sample.com이라고 가정
		bucketName: sample-dev # 정적파일들이 담길 S3 bucket명 지정
		bucketRegion: ap-northeast-2
		runtime:
			defaultLambda: "nodejs18.x"
			imageLambda: "nodejs18.x"
		# 람다이름 정의
		name: 
			defaultLambda: sampleDefaultLambda
			imageLambda: sampleImageLambda
  • regionless이기 때문에 별도의 region 설정이 없어도 됨 (CloudFront를 통해 엣지 로케이션으로 전파)

설정 옵션 설명

component
  • @sls-next/serverless-component 패키지 설치는 필요하지 않음
    • Serverless가 npm에서 자체적으로 가져오는 데 사용되므로 패키지 설치하면 정상적으로 작동하지 않음
  • @sls-next/serverless-component@{verison}로 버전을 지정해줄 수 있지만, 지정하지 않으면 알아서 최신 안정 버전이 설치
domain

 

  • 커스텀 도메인 설정
  • 커스텀 도메인 설정 시 아래 두가지 조건 만족해야 함
    • Route 53에 도메인에 대한 호스팅 영역 포함
    • 도메인 레지스터에 나열된 네임서버를 새로운 호스팅 영역에 제공된 네임서버로 갱싱
  • 자동으로 SSL 인증서 생성, CloudFront 배포를 가리키는 새 레코드 생성
cloudfront

 

AWS Permissions

 

inputs:
	roleArn: "arn:aws:iam::123456789012:role/MyCustomLambdaRole"

혹은

inputs:
	policy: "arn:aws:iam::123456789012:policy/MyCustomPolicy"
memory

 

  • default, api, image edge lambda는 기본적으로 512mb 제공
  • 메모리 늘리려면 설정 필요
inputs:
	memory: 1024

 

bucket

 

  • S3 bucket 이름 설정
inputs:
	bucketName: sample-dev

 

4. AWS 자격 증명 환경변수 설정

AWS_ACCESS_KEY_ID=""
AWS_SECRET_ACCESS_KEY=""

 

5. Next.js 빌드 타겟 세팅

  • nextjs를 serverless 빌드하겠다고 정의

next.config.js

module.exports = {
	target: "serverless"
}

 

6. 배포

$ serverless

 

⚠️ $ serverless deploy로 배포하면 오류 발생

 

 

총 6단계를 거쳐서 NextJS를 serverless로 배포할 수 있다는 것을 알게 되었다.

기술 검토를 하며 AWS에 대해 배운 내용들을 정리하려고 한다.

 

AWS CloudFront

  • AWS의 CDN 서비스
    • CDN 서비스란?
      Client의 콘텐츠 요청으로 서버에서 받아온 콘텐츠를 캐싱하고, 이후 같은 요청이 왔을 때 캐싱해둔 것을 제공하는 서비스
  • 물리적으로 거리가 먼 곳에서도 빠르게 요청 가능 → 서버 부하를 낮춤

Edge Location

  • CloudFront 서비스가 콘텐츠를 캐싱하고, Client에게 제공하는 지점 혹은 캐시 서버

Lambda@Edge

  • CloudFront용 Lambda

 

 

이렇게 공부를 했는데..! 엄청난 삽질이였다 ㅎ

왜냐면? @sls-next/serverless-component는 서비스가 중단되었고, 그로 인해 Next.js13에서는 지원이 안되기 때문이다.

하지만 엄청난 삽질을 통해 배운 지식들이 있다.

 

1️⃣ AWS CloudFront, Edge Location, Lambda@Edge

당시 Lambda만 깔짝깔짝 해본 나는 저게 뭐야..? 했었는데, 이번 계기를 통해 확실히 알게 되었다.

 

2️⃣ 기술검토 검색 시, 버전 검색 필수

내가 왜 이걸 놓쳤을까? 생각해보면 검색 할 때 "nextjs serverless deploy" 이런 식으로 검색했었다.

바보 ㅠ 완전 바보!!! 부랴부랴 "nextjs13 serverless deploy"로 검색해봤는데 바로 지원 안된다는 아티클을 발견해서 슬펐다.

 

3️⃣ github issue 탭 확인하기

매번 패키지 설치하고 사용 방법 확인 후 바로 프로젝트에 적용하던 습관이 여기서 발목을 잡았던 것 같다.

이슈 탭을 한 번이라도 확인했더라면, 바로 NextJS13과 호환이 안된다는 걸 확인할 수 있었을 것이다.

이슈 탭에 들어가니 처음 나오는 이슈 제목이 "Is Serverless Next.js Dead? Seeking Alternatives for Next.js 13" 였다.. ㅋㅋ

 

 

 

아무튼 여러모로 배운 게 많았던 삽질이라서 시간이 아깝진 않았다.

그렇다면 NextJS 13을 serverless로 어떻게 배포할 수 있을까?

 

다음 아티클에서 SST에 대해 정리해보겠다.

LIST
저작자표시

'JavaScript > Next.js' 카테고리의 다른 글

Next.js) Next.js SST 이용하여 AWS에 배포하기  (0) 2024.04.12

관련글

티스토리툴바