배포방식

웹서비스를 배포하는 방법에는 여러가지가 있다.
1. vercel, netlify 등 플랫폼을 통한 배포
3. EC2 등 웹서버를 직접 띄워 배포
4. serverless 배포

이 외에도 더 있겠지만 이번에 해보고 싶은 배포방식은 serverless 방식이다.

serverless

서버리스 : 개발자가 서버를 직접 관리할 필요없음. 서버가 없다는 의미 X

• 동적으로 서버 자원 할당
• 사용자에 의해 서버 자원이 사용되는 양만큼만 비용 청구
• 간단한 패키징 및 배포 - serverless를 선택한 이유!
• 서버가 항시 요청에 대기하고 있는게 아니라 느리다.(cold start)
• 긴 시간이 필요한 작업(동영상 업로드, 데이터 백업 등)에는 비효율적.
• 함수가 1회 호출 될 때 사용할 수 있는 메모리 및 시간에 제한이 있기 때문.

개발환경 TMI

근데 환경설정하고 좀 지나서 글을 작성하는데 설정할 때 참고했던 글이 사라졌다 😂
검색을 좀 해보니까 next 13 버전에서는 serverless를 제대로 지원하지 않는 것 처럼 보였다. github issue
그래서 12버전을 다운받으려고 했는데 next 12버전이 npx create-next-app@12으로 설치가 안되는 것이다!! 그래서 create-next-app 없이 next 개발환경을 설정했는데 그 과정에서 많은 도움을 받았는데 지금은 또 못찾겠다 감사드립니다 개발자님🙏

npm install next@12.3.0 react react-dom @types/node @types/react @types/react-dom

내 기억으론 create-next-app에서 해주는 걸 수동으로 해주는 작업이였다. 패키지 설치, eslint, prettier 등 자동으로 해주던 걸 내가 직접 설정해보니 또 신기하기도 했다.

본론

serverless로 자동배포를 해볼 것이다.

🛠️ 환경 설정

먼저 serverless 라이브러리를 설치한다.

npm install --save-dev serverless@2.72.2

package.json에 다음 명령어를 추가해준다.

"scripts": {
    ...
    "deploy": "serverless"
  },

🛠️ serverless.yml

serverless 명령어 실행 시 읽어들일 serverless.yml 파일을 작성한다.
bucket이름 이랑 cloudfront ID 만 추가로 적어주면 된다. 따로 설정이 필요없어서 그냥 AWS에서 권장하는 설정으로 만들면 된다.

BF-frontend:
  component: '@sls-next/serverless-component@latest'
  inputs:
    deploy: true
    bucketName: 'bucket이름'
    bucketRegion: 'ap-northeast-2' # S3 Bucket 지역 설정
    timeout: 30
    memory: 1024
    name:
      defaultLambda: DefaultLambda #Default Lambda의 이름 설정
      imageLambda: ImageLambda # Image Lambda의 이름 설정
    cloudfront:
      comment: 'next deploy' # CloudFront 설명 설정
      distributionId: 'cloudFrount ID'

🛠️ github actions

.github/workflows/deploy.yml 파일을 만든다.

name: NEXT Deploy
on:
  push:
    branches: main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code.
        uses: actions/checkout@master
        with:
          ref: 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 }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Deploy Next.js app
        run: |
          npm run deploy

🛠️ 결과

성공 !
downgrade하느라 꽤 오래걸리긴 했는데 serverless 자체의 배포 방법은 간단한 것 같다. 원래 그런지 모르겠는데 배포가 6분이나 걸려서 놀랐다 😭

nextjs+serverless+github action
next+serverless+배포자동화