NextJS 배포하기 - NextJS, Travis Setup

NextJS 프로젝트 생성

$ npx create-next-app sample-next
$ cd sample-next
$ npm run dev 

Git Repository 추가

sample-next 폴더 내부에 위치한 상태로 아래 명령어를 입력해주셔야 합니다.

$ git init 
$ git add .
$ git commit -m "initial commit" 
$ git remote add origin <본인 repo 주소>
$ git push origin master

Travis CI

Travis CI: https://travis-ci.org/

Github 과 연동하여 우리가 좀전에 만들었던 프로젝트를 찾아주세요

아래 체크버튼을 클릭하여 활성화시켜주세요

프로젝트 내부 루트경로에 .travis.yml 파일을 추가해주세요

# .travis.yml

language: node_js
node_js:
  - '12'

services: # docker 로 감싸서 배포할거에요
  - docker

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

branches: # 해당 브렌치로 push 될 경우에만 반응합니다
  only:
    - master

notifications: # 변경사항이 있을때 알림을 받을 수 있도록
  email:
    on_success: change
    on_failure: always
    recipients:
      - <본인 이메일>

Docker 로 감싸서 배포할 것 이기 때문에 Docker UserName/UserPassword 가 필요합니다.

여기 에서 가입해주세요

이 정보는 중요한 정보이기 때문에 Travis 의 환경변수를 이용해서 처리할거에요 아래의 Settings 버튼을 눌러 프로젝트 세팅 페이지로 이동해주세요

Env 탭에 DOCKER_USERNAME / DOCKER_USERPASSWORD 정보를 입력해주세요

이제 프로젝트 루트 경로에 Dockerfile 을 추가해주세요

# Dockerfile

FROM node:12 as base
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

ENV CONTINUOUS_INTEGRATION=1
ENV NODE_ENV=production

COPY . .
RUN npm run build

# next 의 default port 는 3000 번 이지만 beanstalk 의 default port 는 8081 이기 때문에
# 간편하게 맞추고자 8081 로 실행합니다.
EXPOSE 8081 
CMD [ "npm", "start" ]

여기까지 추가한 후 github 에 올리면 master 에 코드가 반영되기 때문에 travis 가 반응하고 우리가 설정해놓은 travis.yml 대로 처리되어집니다.

성공시 아래와 같은 화면을 볼 수 있습니다. 실패했다면 빨간색으로 표시됩니다.