[새로운 버전] Serverless Framework를 사용하여 NextJS 프로젝트를 AWS Lambda를 통해 배포하기

Explanation

지난번에 serverless-nextjs와 serverless-nextjs-plugin를 사용해서 Next 프로젝트를 Cloud Formation을 사용해서 Cloud Front, API Gateway, Lambda@Edge, S3를 통해 배포하는 것에 대해서 이야기를 했었는데요.

링크. https://falsy.me/serverless-framework-nextjs-aws-lambda/

음.. 그때는 급해서 생각없이 막 했는데, 보니까 serverless-nextjs의 Serverless-next-plugin은 6개월 전에 마지막 업데이트를 하고 지금은 Serverless Components(https://github.com/serverless/components)를 사용해서 다르게 사용하고 있더라고요.
이번 글은 그래서 바뀐 serverless-nextjs의 배포에 대해 간단하게 적어보려 합니다.

이번 글은 지난번의 프로젝트를 기본으로 생각하고 진행이되어서
이 글만 봐서는 조금 이해가 어려울 수도 있어요.

1. 달라진 부분

앞서 이야기 한대로 serverless-nextjs-plugin은 Cloud Formation을 사용해서 Cloud Front, API Gateway, Lambda@Edge, S3로 배포가 되는데요, 이제는 @sls-next/serverless-component@1.18.0를 사용하고 Cloud Formation을 사용하지 않고 직접 Cloud Front, Lambda@Edge, S3에 바로 배포를 한답니다.

개인적으로 실제로 서비스에 사용하면서 API Gateway를 사용하는게 좀 오버스택 같은 느낌이이 있어서 아쉬웠는데, 기본 구성에 API Gateway가 빠져서 마음에 들었고, cloud Formation의 리소스 초과 오류도 신경쓰지 않아도 되서 좋았어요. 그리고 배포 속도도 빨라졌답니다.

2. 패키지 설치

저번 글과 비교했을때, serverless-nextjs-plugin가 빠졌고, next랑 serverless의 버전이 글 작성 시점에서 가장 마지막 버전으로 하였습니다.
그리고 deploy 커맨드가 ‘serverless deploy’ 였는데 지금은 그냥 ‘serverless’로 변경되었습니다.

앞서 @sls-next/serverless-component@1.18.0을 사용한다고 했는데, 위에 패키지로 설치하지 않았는데요.
https://github.com/serverless-nextjs/serverless-next.js#readme을 참고하면 package.json에 추가하지 않고 버전만 적어주면 서버리스가 알아서 npm에서 가져와서 동작한다고 해요.

3. Serverelss

이전에 작성했던 serverless.yml 파일은 잊고 새롭게 작성합니다.

끝! 엄청 간단하죠?

뒤에 @1.18.0은 제가 직접 버전을 정해준거고 버전을 지정해주지 않으면 알아서 최신 안정 버전이 적용됩니다.

4. Serverelss 배포

배포는 패키지에서 등록했던 ‘npm run deploy’ 또는 ‘npx serverless’ 커맨드로 실행할 수 있답니다.
그러면 Serverless frameworks에서 알아서 Cloud Front와 Lambda@Edge, S3에 배포를 하고 최종적으로 클라우드 프론트로 배포된 URL을 알려준답니다.

리전은 us-east-1(버지니아 북부)로 배포되지만 Lambda@Edge가 Cloud Front의 CDN에 연결되어 사용되기 때문에 리젼을 별로 상관없답니다.

5. 고정된 서비스에 배포하기

위와 같이 엄청 간단한 serverless.yml로 운영하다보면, 계속 새로운 Cloud Front와 Lambda@Edit, S3가 생성되는데요,
각 서비스에 이름을 정해줘야 정해진 서비스에 계속 업데이트가 된답니다.

차례대로 bucketName은 Next 파일이 업로드 될 S3 버킷의 이름을 정해주고, cloudfront의 distributionId은 AWS의 Cloud Front 페이지에서 보면 처음에 배포했던 클라우드프론트의 ID 값을 적어주고, 그리고 name의 defaultLambda, apiLambda는 serverless-next에서 생성해주는 두개의 람다의 이름을 정해줍니다.

그러면 이후에 배포에서 새롭게 서비스를 생성하지 않고 생성된 이름의 서비스로만 업데이트가 된답니다.

그 밖의 옵션들
https://github.com/serverless-nextjs/serverless-next.js