[Docker] 간단한 어플을 실제로 배포해보기(테스트 & 배포)

현재 글은 
https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard
을 수강하며 정리한 내용입니다. 
문제시 비공개로 처리 하도록 하겠습니다. 

따라하며 배우는 도커와 CI환경 - 인프런 | 강의

 

이번 글에선 저번 글에서 만든 docker-react-app 을 github에 배포를 한 후 Travis CI라는 곳에서 소스를 가져간 후에 

그 곳에서 소스 코드가 잘 돌아가는지 테스트를 한 후 성공한다면 AWS에 보내서 배포까지 해보겠습니다. 

Github에 소스코드 올리기

github repository에 docker-react-app 을 만든 후 

# git 등록
git init

# 소스파일들 staging에 올림
git add .

# git commit
git commit -m "first commit"

# github에 연결
git remote add origin https://github.com/ksoon1985/docker-react-app.git

# 원격 github, master branch에 올림  
git push origin master

 

github에 잘 올라간 것을 확인할 수 있습니다.

Travis CI 란 ?

Travis CI 는 Github 에서 진행되는 오픈소스 프로젝트를 위한 지속적인 통합(Continuous Integration) 서비스 입니다. Travis CI를 이용하면 Github repository에 있는 프로젝트를 특정 이벤트에 따라 자동으로 테스트, 빌드, 배포할 수 있습니다. Private Repository는 유료로 일정 금액을 지불하고 사용할 수 있습니다.

Travis CI의 흐름

로컬 Git -> Github -> Travis CI -> AWS

 

1. 로컬 Git 에 있는 소스를 Github 저장소에 Push를 합니다.

2. Github master 저장소에 소스가 Push되면 Travis CI 에게 소스가 Push 됐다고 얘기를 해줍니다.

3. Travis CI는 업데이트 된 소스를 Github에서 가져 옵니다.

4. 깃헙에서 가져온 소스의 테스트 코드를 실행해 봅니다.

5. 테스트 코드 실행 후 테스트가 성공하면 AWS같은 호스팅 사이트로 보내서 배포합니다.

 

travis ci를 이용해서 테스트코드를 실행하고 애플리케이션을 배포까지 해줘야 하는데

travis ci 설정을 위해선 .travis.yml 파일을 작성해야 합니다.

.travis.yml 파일 작성 (테스트 까지)

일단 간단하게 구성 흐름을 보겠습니다.

before_install : script(test)를 하기 전에 이미지가 필요하기 때문에 이미지를 만들어줍니다.

 

script : build를 한 이후에 테스트를 하는 부분입니다.

-e CI=true : travis ci 에서 이부분이 없으면 에러가 발생합니다.

-- --coverage : 테스트 한 부분을 더욱더 상세하게 볼 수 있게 하는 부분입니다.

 

after_success : 테스트 성공 시에 출력하는 부분입니다.

 

 

이제 .travis.yml 파일을 작성해 보겠습니다.

sudo : required

language : generic

services:
  - docker

before_install:
  - echo "start creating an image with dockerfile"
  - docker build -t ksoon1985/docker-react-app -f Dockerfile.dev .

script :
  - docker run -e CI=true ksoon1985/docker-react-app npm run test -- --coverage

after_success:
  - echo "Test success"

 

작성한 파일을 github에 다시 배포하면 travis가 인지하고서 .travis.yml 파일을 실행하게 됩니다.

git add .

git commit -m "travis.yml file Added" 

git push origin master

 

https://app.travis-ci.com/ 에서 연동된 부분을 보면 잘 실행이 된 것을 볼 수 있습니다.

-- --coverage 옵션으로 테이블형식의 출력부분이 나온것을 볼 수 있고

테스트도 잘 성공하고 

after-success 도 잘 실행된 것을 볼 수 있습니다.

 

테스트까지 성공하였고 이제는 AWS에 배포할 차례입니다.

AWS 알아보기

AWS는 안정적이고 확장가능한 클라우드 컴퓨팅 서비스를 제공합니다.

 

AWS에서 제공하는 무수히 많은 서비스들이 있지만 

 

이번 프로젝트에선 EC2에 대해 알아보겠습니다.

EC2 (Elastic Compute Cloud)

EC2 는 AWS 클라우드에서 확장식 컴퓨팅을 제공합니다.
EC2를 사용하면 하드웨어에 선투자 할 필요없이 더 빠르게 애플리케이션을 개발하고 배포할 수 있습니다.
그리고 원하는 만큼 가상 서버를 구축하고 보안 및 네트워크 구성과 스토리지 관리가 가능합니다.
그리고 요구사항이나 갑작스런 인기 증대 등 변동사항에 따라 신속하게 규모를 확장하거나 축소할 수 있어 서버 트래픽 예측 필요성이 줄어듭니다.

즉 한대의 컴퓨터를 임대한다고 생각하면 됩니다.

그리고 그 컴퓨터에서 OS를 설치하고 웹서비스를 위한 프로그램들(웹서버, DB)를 설치해서 사용하면 됩니다.

1대의 컴퓨터를 하나의 EC2 인스턴스라고 부릅니다.

 

EB (Elastic BeanStalk)

AWS Elastic BeanStalk 는 아파치, Nginx 같은 친숙한 서버에서 Java, php, Node.js, Python, Ruby, Go 및 Docker와 함께 개발된 응용 프로그램 및 서비스를 배포하고 확장하기 쉬운 서비스입니다.
EC2 인스턴스, DB 같이 많은 것들을 포함한 환경을 구성하며 만들고 있는 소프트웨어를 업데이트를 할 떄마다 자동으로 이 환경을 관리해줍니다.

 

이제 리액트앱을 배포할 때 Elastic BeanStalk을 사용해보겠습니다.

 

새로운 Elastic BeanStalk 을 만들기 위해선

 

1. Elastic BeanStalk 서비스를 클릭한 후 

2. create application 버튼을 눌러줍니다.

3. 그리고 application name 을 기입해줍니다. (docker-react-app)

4. 그리고 application platform을 선택해 줍니다. (Docker Linux 2 선택)

5. create application으로 생성을 합니다.

 

※ Docker running on 64bit Amazon Linux2

Docker running on 64bit Amazon Linux 와 멀티 컨테이너 버전은 현재 서비스 중단에 있고

Linux2로 플랫폼 교체로 Dockerrun.aws.json 대신에 docker-compose.yml을 이용해야합니다.

참고 : https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/docker-multicontainer-migration.html

 

생성 후 몇분 기다리면 

EB 가 생성이됩니다.

로드 밸런서

- 트래픽이 많지 않을 때

- 트래픽이 많을 때

.travis.yml 파일 작성 (배포 부분)

현재까지는 도커 이미지를 생성 후 애플리케이션을 실행하여 테스트하는 부분까지 travis를 설정하였습니다.

 

이제는 테스트 성공한 소스를 AWS Elastic BeanStalk 에 자동으로 배포하는 부분을 travis.yml 파일에 넣어줄 차례입니다.

sudo : required

language : generic

services:
  - docker

before_install:
  - echo "start creating an image with dockerfile"
  - docker build -t ksoon1985/docker-react-app -f Dockerfile.dev .

script :
  - docker run -e CI=true ksoon1985/docker-react-app npm run test -- --coverage

after_success:
  - echo "Test success"

#================================= aws 추가===================================
deploy : 
  provider : elasticbeanstalk
  region : "us-east-1"
  app : "docker-react-app"
  env : "Dockerreactapp-env"
  bucket_name : "elasticbeanstalk-us-east-1-681085781418"
  bucket_path : "docker-react-app"
  on :
    branch : master

위 사진을 참고하여 

provider : 외부 서비스 표시(s3, elasticbeanstalk, firebase)

region : 현재 사용하고 있는 AWS 물리적 장소

app : 생성한 애플리케이션 이름

env : 생성한 env 이름

bucket_name : 해당 elastic beanstalk 을 위한 s3 버킷 이름 (EB를 생성하면 s3도 자동 생성됨)

bucket_path : 애플리케이션 이름과 동일

branch : 어떤 브랜치에 push 할 때 AWS에 배포할 것인지 설정

 

이렇게 설정이 끝냈습니다.

 

하지만 이렇게 아무런 인증 없이는 Travis CI 에서 마음대로 AWS에 파일을 전송할 수 없습니다.

그래서 Travis CI가 AWS에 접근할 수 있게 해주겠습니다.

 

Travis CI의 AWS접근을 위한 API 생성

현재까지 Travis CI에서 AWS에 어떤 파일을 전해줄 거며, AWS에서 어떤 서비스를 이용할 거며, 부수적인 설정들을 셋팅해주었습니다.

 

하지만 Travis CI와 AWS가 실질적으로 소통을 할 수 있게 인증하는 부분을 설정해주진 않았습니다.

소스 파일을 전달하기 위한 접근 요건

인증을 하기 위해선 API Key가 필요합니다.

Secret, Access API Key 받는 순서

일단 AWS에서 IAM USER 를 생성해줍니다.

- IAM USER

IAM (Identity and Access Management) 
AWS 리소스에 액세스를 안전하게 제어할 수 있는 웹 서비스입니다.
IAM을 사용해서 리소스를 사용하도록 인증(로그인) 및 권한 부여(권한있음)된 대상을 제어합니다.

순서는 다음과 같습니다.

 

Dashboard -> iam 검색 -> 사용자 클릭 -> 사용자 추가 클릭

-> 사용자 세부 정보 설정 : 사용자 이름 작성 (docker-react-user) , 액세스 유형 (비밀키 액세스키)

-> 사용자 권한 설정 : elastic beanstalk (AdministratorAccess-AWSElasticBeanstalk)

-> 계정 생성 성공 

 

이렇게 계정 만들기에 성공을 하면 access key id, access key(비밀키) 가 생성이 됩니다. 

이 키들은 한번만 볼수있기때문에 잘 관리해야 합니다. !!

 

API 키들은 .travis.yml 에 적어두면 노출이 될 위험이 있기때문에

Travis 웹사이트 해당 저장소 대시보드에서 설정을 클릭 후 

Enviroment Variables 에서

AWS_ACCESS_KEY : access key id 

AWS_SECRET_ACCESS_KEY : access key(비밀키) 로 저장 해두면 .travis.yml 에서 불러올 수 있습니다.

 

.travis.yml 파일입니다.

sudo : required

language : generic

services:
  - docker

before_install:
  - echo "start creating an image with dockerfile"
  - docker build -t ksoon1985/docker-react-app -f Dockerfile.dev .

script :
  - docker run -e CI=true ksoon1985/docker-react-app npm run test -- --coverage

#after_success:
#  - echo "Test success"

# aws 추가
deploy : 
  edge : true 
  provider : elasticbeanstalk
  region : "us-east-1"
  app : "docker-react-app"
  env : "Dockerreactapp-env"
  bucket_name : "elasticbeanstalk-us-east-1-681085781418"
  bucket_path : "docker-react-app"
  on :
    branch : master
  access_key_id : $AWS_ACCESS_KEY
  secret_access_key: $AWS_SECRET_ACCESS_KEY

 

git push origin master를 하면 travis 환경에선 빌드와 테스트가 잘 되지만

docker 환경에서 에러를 뿜습니다.

 

그 이유는 EB docker linux1 버전에선 Dockerfile을 찾아서 이미지를 만들어 주지만

docker linux2 버전에선 docker-compose.yml으로 이미지를 만들어 주기 때문입니다.

 

그렇기 때문에 compose 파일을 

운영 환경에서의 docker-compose.yml 파일 과 개발 환경에서의 docker-compose-dev.yml 파일로 나누겠습니다.

 

docker-compose.yml (운영)

version: '3'
services:
  react:
    build: 
      context: . 
      dockerfile: Dockerfile
    ports:
      - "80:80"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true

 

docker-compose-dev.yml (개발)

# 도커 컴포즈의 버전
version: "3"
# 실행하는 컨테이너들을 정의
services:
# 서비스 이름
  react:
  # 현 디렉터리에 있는 Dockerfile 사용
    build: 
    # 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치
      context: .
      # 도커 파일 어떤 것인지 지정
      dockerfile: Dockerfile.dev
    # 포트 매핑 로컬 포트 : 컨테이너 포트
    ports:
     - "3000:3000"
    # 로컬 머신에 있는 파일들을 매핑
    volumes:
     - /usr/src/app/node_modules
     - ./:/usr/src/app
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
# 서비스이름
  tests:
    stdin_open: true
    # 현 디렉터리에 있는 Dockerfile 사용
    build:
      # 도커 이미지를 구성하기 위한 파일들이 있는 위치 
      context: .
      # 도커 파일이 어떤 것인지 지정
      dockerfile: Dockerfile.dev
    # 로컬 머신에 있는 파일을 매핑 
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    #  테스트 컨테이너가 시작될 때 실행되는 명령어
    command: ["npm", "run", "test"]

 

Dockerfile 도 변경해주겠습니다.

 

Dockerfile

FROM node:alpine as builder
WORKDIR '/usr/src/app'
COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build 

FROM nginx
EXPOSE 80
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

EXPOSE 80으로 포트 매핑을 해줘야 합니다. 

 

git push를 해보면

 

travis.ci

 

docker

 

Dockerreactapp- 어쩌구 url 클릭하면

 

잘 배포가 되고 있음을 볼 수 있습니다.

 

그리고 이젠 이 EB를 안쓸것이기 때문에 (AWS가 적당선에서 1년치는 무료지만 ... 혹시 몰라서)

 

작업에서 -> 환경 종료를 눌러줍니다.

 

 

 

이로서 이번 프로젝트는 개발환경과 운영 배포 환경까지 끝이 났습니다. ~~~

 

간략히 요약을 하자면

 

Github 에서 push가 일어나면 소스파일의 변동사항에 맞게 Travis CI 도 소스파일을 가져옵니다.

Travis CI에서 dockerfile을 build해서 테스트를 진행합니다.

만약 push된게 master branch라면 테스트 통과시에 AWS s3 버킷에 소스파일을 zip파일로 압축해서 전송합니다.

이는 AWS s3에 들어가보면 쉽게 알 수 있습니다. 

EB(Elastic Beanstalk - docker linus2 version) 가 s3 버킷에 있는 zip(travis ci 가 보내준)파일을 해제하여

docker-compose.yml 파일을 up 하여 Dockerfile(운영 환경 도커파일)을 통해

애플리케이션을 build하고 -> 만들어진 이미지 파일을 컨테이너로 만든 후 

EC2(Elastic Compute Cloud) 에 할당하고 애플리케이션이 실행이 됩니다.

 

 

다음 글에선 조금 더 복잡한 애플리케이션을 배포해보겠습니다.

- 복잡한 애플리케이션을 실제로 배포해보기(개발 환경 부분)

- 복잡한 애플리케이션을 실제로 배포해보기(테스트 & 배포 부분)