> For the complete documentation index, see [llms.txt](https://simplereact.gitbook.io/simplereact/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplereact.gitbook.io/simplereact/nextjs-beanstalk.md).

# NextJS 배포하기 - Beanstalk

### AWS 가입

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

{% embed url="<https://us-east-2.console.aws.amazon.com/console/home?region=us-east-2>" %}

### I AM 생성

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

{% embed url="<https://console.aws.amazon.com/iam/home#/home>" %}

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

![](/files/-Lrs_Tr5W-j9fCQqu9hg)

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

![](/files/-Lrs_bIqW4O_r-hJ1XDK)

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

![](/files/-Lrs_nsc8JscYeW3lCd8)

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

![](/files/-LrsaJBmQASvAnhz-erY)

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

![](/files/-LrsaPfPfghnU-iLNYw7)

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

![](/files/-Lrsa_nthP1HeeSfxG8S)

### Travis Env 에 Key 추가

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

![](/files/-Lrsb_pZAFIEp3UFxbB8)

### S3

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

{% embed url="<https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2#>" %}

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

![](/files/-LrsX7F1SMXO6hdoc3QT)

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

![](/files/-LrsXvuY_Qztkci_FVML)

### AWS - Beanstalk

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

{% embed url="<https://aws.amazon.com/ko/elasticbeanstalk/>" %}

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

![](/files/-LrsVCEcuotIb5HNkYes)

### 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 설정을 추가하였습니다.&#x20;

* 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 는 실패합니다.

![](/files/-Lrse-MKCc8X8EC0UwVA)

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

![](/files/-LrseC0oHgB-lrdYQDV7)

### BeansTalk Env 추가

애플리케이션 환경을 생성해주세요&#x20;

![](/files/-LrsVLkfBQj0oprDu2Iz)

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

![](/files/-LrsVS1X9i_whArNa9SU)

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

![](/files/-LrseYFoMpokofsv4NQZ)

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

![](/files/-Lrsem3E5yqw1Bh8O5fP)

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

![](/files/-LrseygIzBazLrsEfiNO)

![](/files/-Lrsg7zVRoILMXTfJvh6)

### 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 에서 변경사항을 캐치하여 이미지를 배포합니다.

![](/files/-LrshRkJS-IyF6LqeS_J)

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

![](/files/-LrshWa7vk4EHHDqOY0v)

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

![](/files/-LrshPjYKZxlpSiLSkR0)

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

![](/files/-LrsiY08xiEgsIBaqKpf)

### 마무리

{% embed url="<https://github.com/appear/example-next-deploy>" %}