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

Explanation

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

링크. /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. 패키지 설치

// package.json
{
  "name": "typescript-serverless-nextjs",
  "version": "1.0.0",
  "description": "typescript serverless nextjs react boilerplate",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "deploy": "serverless"
  },
  "author": "falsy",
  "license": "WTFPL",
  "dependencies": {
    "next": "^10.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "ts-jest": "^26.2.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "serverless": "^2.15.0",
    "typescript": "^3.9.7"
  }
}

저번 글과 비교했을때, 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 파일은 잊고 새롭게 작성합니다.

// serverless.yml
falsyExempleServerlessNext:
  component: '@sls-next/serverless-component@1.18.0'

끝! 엄청 간단하죠?

뒤에 @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가 생성되는데요,
각 서비스에 이름을 정해줘야 정해진 서비스에 계속 업데이트가 된답니다.

// serverless.yml
falsyExempleServerlessNext:
  component: '@sls-next/serverless-component@1.18.0'
  inputs:
	  bucketName: 'falsy-exemple-s3'
	  cloudfront:
	    distributionId: ABCDEFG..
	  name:
	    defaultLambda: 'falsy-exemple-default-lambda'
	    apiLambda: 'falsy-exemple-api-lambda'

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

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

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