[따라하며 배우는 도커와 CI환경] 7. 간단한 어플을 실제로 배포해보기(테스트 & 배포 부분)

 

이번에는 지난 포스트에서 생성한 애플리케이션을 배포해보자!
다음의 순서대로 애플리케이션을 테스트 및 배포할 것이다.

1. Github에 소스 코드 업로드
2. Travis CI 연동
3. AWS Elastic Beanstalk 환경 구성
4. 배포

 

✔️ Github에 소스 코드 업로드

먼저 Github에 애플리케이션의 소스 코드를 올려야 한다.

 

1️⃣  Repository 생성

깃허브에서 새로운 repository를 생성한다.
나는 docker-react-app 이라는 이름으로 repository를 생성하였다.

강의에서는 public은 무료, private 유료라고 했다.
그러나 나는 private으로 설정해도 별도의 요금은 부과되지 않았다.

 

2️⃣  로컬 git 저장소 만들기

$ npm init

우리는 처음에 npx create-react-app ./ 으로 애플리케이션을 생성해주었으므로 생략해도 된다.

 

3️⃣  Remote 연결하기

$ git remote add origin <repository 주소>

 

4️⃣  커밋 & 푸시

$ git add .
$ git commit -m "first commit"
$ git push origin master

현재까지의 변경 사항을 로컬 저장소에 저장하고, remote에 업로드한다.

 

 

✔️ Travis CI 

Travis CI 란❓

Travis CI는 Github에서 진행되는 오픈소스 프로젝트를 위한 지속적인 통합(Continuous Integration) 서비스이다.
2011년에 설립되어 2012년에 급성장하였으며 Ruby 언어만 지원하였지만 현재 대부분의 개발 언어를 지원하고 있다.
Travis CI를 이용하면 Github repository에 있는 프로젝트를 특정 이벤트에 따라 자동으로 테스트, 빌드하거나 배포할 수 있다.

 

 

Travis CI 의 흐름

Travis CI는 다음과 같은 흐름으로 지속적인 통합 서비스를 제공한다.

 

1. 로컬 Git 저장소에 있는 소스를 Github 저장소에 Push 한다.
2. Github master 저장소에 소스가 Push 되면, Travis CI에게 소스가 Push 되었다고 알린다.
3. Travis CI는 업데이트된 소스를 Github에서 가지고 온다.
4. 깃헙에서 가져온 소스의 테스트 코드를 실행한다.
5. 테스트가 성공 시, AWS와 같은 호스팅 사이트로 보내서 배포한다.

 

 

✔️ Travis CI 와 Github 연동하기

그럼 지금부터 Travis CI를 Github와 연결하고, 자동으로 테스트 코드를 실행하도록 해보자.

 

1️⃣  Travis 회원가입

먼저 Travis CI 사이트(https://www.travis-ci.com/)에 접속하여, 회원가입에서 SIGN UP WITH GITHUB 버튼을 눌러 깃허브 계정과 연동하자.

 

2️⃣  Github Repository 선택

깃허브 계정으로 로그인하면, Github의 repository 선택할 수 있다.
만들어둔 repository와 연결해주자.

 

3️⃣  plan 선택

이런 메세지가 보인다면 select a plan 을 클릭하여 plan을 설정하자.

나는 'Free Plan'을 선택했다.

 

당연히 무료인줄 알았는데 1달러(결제일 기준 1,302원)가 결제되었다...

+) 2022.06.22 추가
결제하고 10일 후에 Travis CI에서 결제되었던 1,302원이 입금되었다. (무료 맞다! 😊)

 

 

4️⃣ 활성화된 Repository 확인

이제 Dashboard를 클릭하면 다음과 같이 활성화된 repository 를 확인할 수 있다!

자세한 내용은 다음 공식 문서에서 확인할 수 있다.
https://docs.travis-ci.com/user/tutorial/#to-get-started-with-travis-ci-using-github

 

 

✔️ .travis.yml 파일 작성 및 테스트

Travis CI를 통해 애플리케이션 테스트 및 배포를 하려면  .travis.yml 파일을 작성해 주어야 한다.

1️⃣  .travis.yml 파일 작성

sudo: required

language: generic

services:

- docker

before_install:

- echo "start creating an image with dockerfile"

- docker build -t <이미지 이름> -f Dockerfile.dev .

script:

- docker run -e CI=true <이미지 이름> npm run test -- --coverage

after_success:

- echo "Test success"

📍 sudo

• 관리자(sudo) 권한을 갖도록 설정한다.

 

📍 language

• 언어(플랫폼)을 선택한다.
• generic 은 여러가지 언어를 포함하고 있다. 다음을 참고하자.
  https://docs.travis-ci.com/user/languages/minimal-and-generic/

 

📍 services

• 도커 환경을 구성한다. 

 

📍 before_install

• 스크립트(테스트)를 실행할 수 있는 환경을 구성하는 부분.
• 스크립트(테스트)를 실행하기 전에 해야하는 것들을 정의한다.
• 여기서는, 도커 파일을 이용하여 도커 이미지 생성하도록 한다.

docker build -t wisdom/docker-react-app -f Dockerfile.dev .

 

📍 script

• master 브랜치에 push 될 때 수행할 스크립트.
• 여기서는 테스트 코드를 실행하는 스크립트를 작성한다.

docker run -e CI=true <이미지 이름> npm run test -- --coverage

-e CI=true

• Travis CI를 위한 설정

-- --coverage

• 테스트 결과를 상세하게 보기 위한 옵션

 

📍 after_success

• 테스트 성공 후 수행할 명령어.

 

📌 공식 문서 참고
https://docs.travis-ci.com/user/docker/#using-a-docker-image-from-a-repository-in-a-build

 

 

2️⃣  테스트

.travis.yml 파일을 추가한 후 다음과 같이 커밋 & 푸시한다.

$ git add .
$ git commit -m "travis.yml file Added"
$ git push origin master

 

master 브랜치에 푸시하면, Travis CI 에서 자동으로 빌드하고 테스트를 수행한다.

다음 화면을 보면, docker를 실행하고, 깃허브 repository로부터 master 브랜치를 clone하여 가져오고, 도커 이미지 빌드 및 컨테이너 실행까지 수행하는 것을 알 수 있다.

 

 

✔️ AWS 배포

AWS의 EC2와 EB(Elastic Beanstalk)을 통해 애플리케이션을 배포할 것이다.

먼저 각 서비스에 대해 알아보자.

 

EC2 (Elastic Compute Cloud) 란?

Amazon Elastic Compute Cloud(Amazon EC2)는 소프트웨어 시스템을 구축하고 호스팅하는 데 사용하는 크기 조정 가능한 컴퓨팅 용량(말 그대로 Amazon 데이터 센터의 서버)을 제공하는 웹 서비스로써, Amazon Web Services(AWS) 클라우드에서 확장식 컴퓨팅을 제공한다.
Amazon EC2를 사용하면 하드웨어에 선투자할 필요가 없어 더 빠르게 애플리케이션을 개발하고 배포할 수 있다. Amazon EC2를 통해 원하는 만큼 가상 서버를 구축하고 보안 및 네트워크 구성과 스토리지 관리가 가능하다. 또한 Amazon EC2는 요구 사항이나 갑작스러운 인기 증대 등 변동 사항에 따라 신속하게 규모를 확장하거나 축소할 수 있어 서버 트래픽 예측 필요성이 줄어든다.

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

 

EB (Elastic Beanstalk) 란?

AWS Elastic Beanstalk는 Apache, Nginx 같은 친숙한 서버에서 Java, NET, PHP, Node.js, Python, Ruby, Go 및 Docker와 함께 개발된 웹 응용 프로그램 및 서비스를 배포하고 확장하기 쉬운 서비스다.
Elastic Beanstalk은 EC2 인스턴스나 데이터베이스 같이 많은 것들을 포함한 "환경"을 구성하며 만들고 있는 소프트웨어를 업데이트할 때마다 자동으로 이 환경을 관리해준다.

 

 

 

1️⃣ Elastic Beanstalk 환경 구성

AWS 로그인 후, Elastic Beanstalk 서비스(https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home)를 클릭하면 다음의 화면이 보인다. 
리전을 서울로 선택한 후, Create Application을 클릭하자.

1. 애플리케이션 이름을 설정한다.

ex) docker-react-app

 

2. 플랫폼을 선택한다.

3. 애플리케이션 생성 버튼 클릭

생성 버튼을 누르고 몇 분 후면 애플리케이션과 환경이 생성된다.

 

📌 참고
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/GettingStarted.html

 

 

2️⃣ .travis.yml 파일 수정 (배포 부분 추가)

이제 테스트에 성공한 소스를 AWS Elastic Beanstalk에 자동으로 배포하도록 해보자.
기존 .travis.yml 파일은 도커 이미지를 생성 후 애플리케이션 테스트를 진행하도록 설정되어 있는데, 여기에 자동 배포 부분을 추가하자.

sudo: required

language: generic

services:

- docker

before_install:

- echo "start creating an image with dockerfile"

- docker build -t <이미지 이름> -f Dockerfile.dev .

script:

- docker run -e CI=true <이미지 이름> npm run test -- --coverage

# 배포 (추가된 부분)

deploy:

    provider: elasticbeanstalk

    region: "ap-northeast-2"

    app: "docker-react-app"

    env: "Dockerreactapp-env"

    bucket_name: <버킷 이름>

    bucket_path: "docker-react-app"

    on:

        branch: master

📍 provider

• 외부 서비스를 설정한다. (s3, elasticbeanstalk, firebase 등)

 

📍 region

• 현재 사용하고 있는 AWS의 region.
• 서울(ap-northeast-2)으로 설정하였다.

 

📍 app

• 생성된 애플리케이션의 이름.

 

📍 env

• Elastic Beanstalk의 환경 이름.

 

📍 bucket_name

• Elastic Beanstalk의 환경이 사용하는 s3 버킷 이름.
• Elastic Beanstalk 애플리케이션을 생성하면 자동으로 s3 버킷이 생성된다.
  s3 서비스에서 버킷 이름을 확인하여 작성한다.

 

📍 bucket_path

• 애플리케이션의 이름과 동일하다.

 

📍 on.branch

• 어떤 브랜치에 푸시할 때 AWS에 배포할 것인지 설정한다.
• master 브랜치로 설정하였다.

 

3️⃣ Travis CI의 AWS ElasticBeanstalk 접근 설정

Github의 master 브랜치에 push 가 되면 Travis CI는 자동으로 빌드되고 테스트 코드 실행 후 AWS Elastic Beastalk에 소스 코드를 배포에 한다. 이때 Travis CI는 AWS ElasticBeanstalk에 접근 권한이 있어야 한다.

권한을 설정해주기 위해서는 AWS IAM 사용자를 추가하고, 액세스 키와 비밀 액세스 키를 발급받아야 한다.

 

1. IAM 사용자 추가

사용자 이름을 설정하고, 액세스 유형에서 액세스 키를 선택한다.

기존 정책 직접 연결을 클릭 후, AdiministratorAccess-AWSElasticBeanstalk 정책을 선택한다.

 

태그는 스킵해도 된다. (옵션)

 

검토 후 사용자 만들기 클릭

사용자를 성공적으로 추가하면 액세스 키 ID와 비밀 액세스 키가 발급된다.

 

 

2. Travis CI 환경 변수 설정

이제 Travis CI repository의 settings 에서 환경변수를 설정하자.

발급받은 액세스 키 ID와 비밀 액세스 키를 각각 AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY 라는 이름으로 환경변수 값을 저장한다.

 

 

3. .travis.yml 파일 수정 (AWS 액세스 key 추가)

이제 .travis.yml 파일에 다음을 추가하자.

# 배포

deploy:
    # 생략..

    access_key_id: $AWS_ACCESS_KEY
    secret_access_key: $AWS_SECRET_ACCESS_KEY

 

 

4. Dokerfile 수정 (nginx 포트 매핑 추가)

Elastic Beanstalk은 기본적으로 웹 애플리케이션을 nginx 서버 (포트 80번)를 통해 배포한다.
그렇기 때문에 Docker를 통해 Nginx 서버를 실행할 때 포트 번호를 80번으로 포트 매핑 설정해주어야 한다.

다음과 같이 Dockerfile에 EXPOSE 80을 추가하자.

# Builder stage
FROM node:alpine as builder
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY ./ ./
# CMD ["npm", "run", "build"]
RUN npm run build

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

 

📍 RUN npm run build

• 기존에 작성했던 CMD ["npm", "run", "build"] 대신 사용한다.
• CMD 명령어로 실행한 경우, elastic beanstalk에서 빌드 오류가 발생한다. 

 

 

참고) nginx 포트 매핑을 하지 않으면❓ 

Elastic Beanstalk 배포 시 다음과 같은 오류가 발생한다!

 

 

5. 배포 (최종!)

수정 후, 변경 사항을 remote repository에 업로드한다.

$ git add .
$ git commit -m "travis ci deploy"
$ git push origin master

 

 

이제 Travis CI에서 master 브랜치의 소스를 Elastic Beanstalk 환경에 전달하여 성공적으로 배포된 것을 확인할 수 있다!

 

 

 

참고

• https://www.inflearn.com/course/따라하며-배우는-도커-ci
• https://docs.travis-ci.com/user/docker/