자바스크립트로 알아보는 알고리즘 #1 시간 복잡도
2019-03-02
[새로운 버전] Serverless Framework를 사용하여 NextJS 프로젝트를 AWS Lambda를 통해 배포하기
2020-12-13
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의 배포에 대해 간단하게 적어보려 합니다.
이번 글은 지난번의 프로젝트를 기본으로 생각하고 진행이되어서
이 글만 봐서는 조금 이해가 어려울 수도 있어요.
앞서 이야기 한대로 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의 리소스 초과 오류도 신경쓰지 않아도 되서 좋았어요. 그리고 배포 속도도 빨라졌답니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// 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에서 가져와서 동작한다고 해요.
이전에 작성했던 serverless.yml 파일은 잊고 새롭게 작성합니다.
|
1 2 3 |
// serverless.yml falsyExempleServerlessNext: component: '@sls-next/serverless-component@1.18.0' |
끝! 엄청 간단하죠?
뒤에 @1.18.0은 제가 직접 버전을 정해준거고 버전을 지정해주지 않으면 알아서 최신 안정 버전이 적용됩니다.
배포는 패키지에서 등록했던 ‘npm run deploy’ 또는 ‘npx serverless’ 커맨드로 실행할 수 있답니다.
그러면 Serverless frameworks에서 알아서 Cloud Front와 Lambda@Edge, S3에 배포를 하고 최종적으로 클라우드 프론트로 배포된 URL을 알려준답니다.
리전은 us-east-1(버지니아 북부)로 배포되지만 Lambda@Edge가 Cloud Front의 CDN에 연결되어 사용되기 때문에 리젼을 별로 상관없답니다.
위와 같이 엄청 간단한 serverless.yml로 운영하다보면, 계속 새로운 Cloud Front와 Lambda@Edit, S3가 생성되는데요,
각 서비스에 이름을 정해줘야 정해진 서비스에 계속 업데이트가 된답니다.
|
1 2 3 4 5 6 7 8 9 10 |
// 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
