NextJS 배포하기 - Beanstalk

AWS 가입

먼저 AWS 계정이 필요합니다.

I AM 생성

계정을 만든후에 배포 권한을 계정에게 추가합니다.

사용자 탭으로 이동한 후 사용자 추가를 선택해주세요

이름을 적어주시고 액세스 유형을 프로그래밍 방식으로 선택해주세요

그룹 생성을 선택하여 권한을 가진 그룹을 만들어야합니다.

아래의 세 가지 권한을 찾으신후 체크하시고 그룹을 생성해주세요

사용자에게 방금 만든 그룹을 할당하고 다음을 눌러주세요

그러면 아래와 같이 사용자에 대한 접근 Key 들이 나옵니다. 이제 요 정보들을 가지고 배포를 하려고합니다.

Travis Env 에 Key 추가

조금전에 얻은 Key 정보를 Travis 에 추가합니다.

S3

Local 개발 -> Github push -> Travis CI -> CD (S3로 이미지를 올린다)-> S3 에 올라온 이미지 파일을 Beanstalk 에서 사용하는 구조로 이루어집니다.

먼저 이미지를 올릴 공간을 만들어주셔야 됩니다.

모든 액세스 차단 체크를 해제하시고 버킷을 생성해주세요

AWS - Beanstalk

Beanstalk 을 이용하면 많은 설정없이 간단하게 배포가 가능합니다.

오른쪽 상단에 있는 새 애플리케이션 생성 버튼을 클릭하여 만들어주세요

Travis Deploy 설정 추가

language: node_js
node_js:
  - '12'

services:
  - docker

before_install:
  - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
  - docker build -t sample-next -f Dockerfile .

branches:
  only:
    - master

deploy:
  provider: elasticbeanstalk
  access_key_id: '$AWS_ACCESS_ID'
  secret_access_key:
    secure: '$AWS_SECRET_ID'
  region: 'ap-northeast-2'
  app: 'sample-next'
  env: 'sample-next-env'
  bucket_name: 'sample-next-deploy'
  on:
    branch: master   

notifications:
  email:
    on_success: change
    on_failure: always
    recipients:
      - appear.ko@gmail.com

Deploy 설정을 추가하였습니다.

bucket_name: 좀전에 만든 s3 버킷의 이름입니다.
app: 우리가 만든 Beanstalk App 의 이름입니다.
env: 아직 만들지 않았지만 <app-name>-env 형식으로 만들고자하여 미리 등록했습니다.
AWS KEY 들은 환경변수로 이미 추가 했기 때문에 따로 신경쓰지 않아도 됩니다.

설정 부분을 추가하여 github 에 코드를 올려보겠습니다.

$ git add .
$ git commit -m "deploy 설정 추가"
$ git push origin master

아직 env 를 추가하지 않았기 때문에 CI 는 실패합니다.

우리의 목적은 Beanstalk env 에 추가할 이미지를 생성하는게 목적이었기 때문에 괜찮습니다. S3 버킷 페이지로 가보시면 이미지가 생성되어 업로드된걸 확인 하실 수 있습니다. 이 이미지를 바탕으로 env 를 생성합니다.

BeansTalk Env 추가

애플리케이션 환경을 생성해주세요

웹 서버 환경을 선택해주세요

<app-name>-env 형식으로 만들어보려고합니다.

플랫폼은 Docker 를 선택해주시고 애플리케이션 코드는 S3에 올라가있는 이미지를 선택해주시면됩니다.

환경 구성중 ..... 몇분 걸립니다.

NextJS Default Port 변경

Beanstalk 은 8081 port 를 기본적으로 사용합니다. NextJS 는 3000 port 를 기본포트로 지정하고 있기 때문에 8081 port 로 실행 할 수 있도록 변경하려고합니다. 배포 과정도 한번 살펴볼겸 좋은 것 같아요 package.json 에 있는 start script 를 살짝 바꿔줄거에요

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p 8081"
},

변경된 코드를 적용하여 올려보겠습니다.

$ git add .
$ git commit -m "NextJS default port 변경"
$ git push origin master

Travis 에서 변경사항을 캐치하여 이미지를 배포합니다.

S3에 해당 버전의 이미지가 쌓입니다.

Beanstalk 에서는 S3 에 쌓인 최신 이미지를 캐치하여 변경합니다.

배포에 성공했습니다. 도메인 연결과 HTTPS 는 다른 챕터로 찾아뵙겠습니다.

마무리

PreviousNextJS 배포하기 - NextJS, Travis Setup NextStorybook

Last updated 5 years ago