# NextJS 배포하기 - NextJS, Travis Setup

### NextJS 프로젝트 생성

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsKIv3PJwA05u-eZmM%2Fimage.png?alt=media\&token=ed74891e-8a97-4935-9a4e-9a132f9eb3e5)

### Git Repository 추가

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsKrToFrWOnAQUKjHE%2Fimage.png?alt=media\&token=68216604-6eed-4e73-8dae-e89848590f56)

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

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsLjQD0VkGY3OH3A8h%2Fimage.png?alt=media\&token=4fba4e61-f179-433d-84d6-1fa85af0668f)

### Travis CI&#x20;

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

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsM9IYP0DEyG5C89OY%2Fimage.png?alt=media\&token=0987cf11-fd8d-4627-a762-545603ae9284)

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsMMIceAnjp4qND7W_%2Fimage.png?alt=media\&token=d7a5c963-7851-499a-94d5-7aae99513179)

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

```
# .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 가 필요합니다.

> [여기](https://hub.docker.com/u/appeargo) 에서 가입해주세요&#x20;

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsQAFDQzbBAObTUBIg%2Fimage.png?alt=media\&token=0fb2fbb2-a816-419c-abfe-42b72f5240d4)

Env 탭에 DOCKER\_USERNAME / DOCKER\_USERPASSWORD 정보를 입력해주세요

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsQRqG51rfJ1Tqb-vV%2Fimage.png?alt=media\&token=dbb1dd9b-f8da-43ba-8d96-5cffe02c29c2)

이제 프로젝트 루트 경로에 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 대로 처리되어집니다.

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsJjO2XrKiclVHiOAh%2F-LrsRjbOBg2P4JML1yDK%2Fimage.png?alt=media\&token=464ea48a-3eb8-4de7-af73-071161cc18a4)

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

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LrsSdmYwqdwQxcNyKB7%2F-LrsTTG6qk766FGLJSTj%2Fimage.png?alt=media\&token=5a268e60-611d-415e-8c3d-30f147735219)