NEXT.JS를 Serverless로 배포하고 CICD를 설정해보자.
package.json 설정
1. npm run deploy 설정
우선 script에 deploy:serverless를 추가해서 github Action이 deploy명령어를 실행했을 때 자동적으로 serverless가 실행될 수 있도록 하자
{
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"deploy": "serverless"
},
...
}2. serverless 설치
둘중에 하나로 하면 된다.
1. package.json에 입력후 npm install
{
...
"devDependencies": {
...
"serverless": "2.72.2",
...
}
...2. npm install serverless -D
serverless.yml설정
프로젝트 폴더 루트에 serverless.yml을 만든다.
프로젝트이름:
component: '@sls-next/serverless-component'
inputs:
deploy: true
bucketName: 's3버킷이름'
bucketRegion: 'ap-northeast-2' // 버킷 지역
nextConfigDir: './'
name:
defaultLambda: '람다 이름설정'
imageLambda: '이미지 람다 이름설정'
cloudfront:
comment: 'next deploy' # CloudFront 설명 설정이렇게 하면 설정한 bucketName, defulatLambda, imageLambda가 생성되고, cloudfront도 새로 생성된다.
Github Action 비밀키 등록
일단 AWS에서 IAM-> 사용자 추가를 통해 AWS엑세스키와 비밀 엑세스 키를 발급받는다.
이를 github 레포의 setting>Secrets에 가서 등록해준다.
deploy.yml작성하기
프로젝트 루트에 .github폴더를 만들고 그안에 workflows폴더를 만든 뒤, .github/workflows 경로에 deploy.yml파일을 다음과 같이 추가해준다.
name: NEXT Deploy prod
on:
push:
branches: main #푸쉬되었을 때 작동할 브랜치
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@main
- name: Install Dependencies
run: |
npm install
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} #깃헙에 등록한 비밀키
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-northeast-2
- name: Deploy Next.js app
run: |
npm run deploygithub에 push
적당히 커밋하고 push 해주자
appUrl에 클라우드 프론트 주소가 표기되는 것을 볼 수 있다.
이러면 aws에서 각각 s3, lambda(지역 미국 동부로 해줘야함), 클라우드 프론트가 잘 생성되었음을 확인할 수 있다.
클라우드 프론트 고정
근데 이러면 푸쉬할때마다 클라우드 프론트가 새로 생성된다.
serverless.yml에서 클라우드 프론트 아이디를 통해 고정시킬 수 있다.
이게 클라우드 프론트 아이디이다.
serverless.yml에 이렇게 추가해주자
...
cloudfront:
comment: 'next deploy' # CloudFront 설명 설정
distributionId: '클라우드 프론트 아이디'
...