docker , travis, aws 를 활용한 react 자동 배포하기

순서

github에 repository를 생성해서 코드를 올려놓는다 -> push시에 travis가 이를 인식 해서 테스트및 빌드 처리를 해준다

-> AWS에 배포한다.

 

EB에서 빌드하는것이 아닌

Dockerfile.dev 로 이미지 빌드 -> 성공시 운영환경에서 Dockerfile을 이용해서 빌드 -> 도커 허브 -> AWS식으로 진행하는 방식에 비해서는 간략한 방식이다. 

 

 

React app 설치및 Dockerfile.dev 생성하기 

먼저 react를 create-react-app을 활용해서 

 react app을 생성해준다. 

 

npx-create-app

create-react-app을 통해 1회성으로 설치하기 때문에 npm이 아닌 npx로 설치하였습니다.

(npm설치시 global로 설치하기 때문에 패키지가 로컬에 남는다, 또한 업데이트가 되더라도 이미 존재한 패키지를 제거하고 설치해야한다)

 

 

npm run start

설치한 패키지가 정상 동작하는것을 확인 했으면 Dockerfile을 생성해준다. 

 

Docker file 설정하기

 

Dockerfile.dev

FROM node:alpine

WORKDIR '/usr/src/app'

COPY package.json ./

RUN npm install

COPY ./ ./


CMD ["npm", "run", "start"]

 

먼저 테스트를 위해 npm run build가 아닌 npm run start를 통해 실행해준다.

 

 

 

github에 올리기 

 

travice CI와 연동을 하기 위해 먼저 github에 배포한다. 

 

 

repository를 생성한 후 

 

저장소에 코드를 추가해준다.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/아이디/저장소
git push -u origin main

Travis CI

github에서 진행되는 오픈소스 프로젝트를 위한 지속적인 통합(continuous Integration) 서비스

github repository에 있는 프로젝트를 특정 이벤트에 따라 자동으로 테스트, 빌드하거나 배포할 수 있다.

private repository는 유료로 일정금액을 지불하고 사용 할 수 있다.

 

 

travis-ci.org/

Travis CI - Test and Deploy Your Code with Confidence

 

 

 

 

settings -> repository에 가서

 

방금 올린 repository를 활성화 해준다. 

이를 활성화 하면

push가 일어날 때마다 travis CI가 이를 파악해서 테스트및 여러가지 활동을 가능케 한다.

메인에 와보면 추가 push작업은 일어나지 않았기 때문에 아직 그대로 존재한다.

 

이제 travisCI에 대한 설정을 정의하는 .travis.yml을 설정해준다. 

일단 먼저 AWS에 배포하기 전에 travis CI가 정상 동작하는지 확인하는 코드로 확인후 정상적으로 돌아가는것이 확인되면

AWS에 연동해줄 것이다. 

.travis.yml

# 관리자 권한 갖기
sudo: required

#언어(플램폿)선택
language: generic 

#도커 환경 구성
services:
  - docker

#스크립트를 실행할 수 있는 환경
before_install:
  - echo "start Creating an image with dockerfile"
  - docker build -t loy124/docker-react -f Dockerfile.dev .

#실행할 스크립트
script:
  - docker run -e CI=true loy124/docker-react npm run test -- --coverage

#테스트 성공 후 
after_success:
  - echo "Test Success"

 

 

 

docker 환경에서 하기 때문에 travis의 환경또한 docker로 진행해 주었다. 

 

해당 yml 파일을 만들고 나서 git 에 추가해준다.

git add.
git commit -m "travis"
git push

 

push 후에 travis 홈페이지 들어가 본다.

 

 

에러 로그 없이

정상적으로 테스트까지 마친 것을 확인하였다.

 

따라서 이제 

 

AWS에 연동해주도록 해보곘다. 

 

해당 elastric beanstalk 을 활용해서 배포하는 방식을 진행한다.

 

 

Elastic Beanstalk(EB)

apache, nginx와 같은 서버에서 java,net,node.js python, ruby, go 및 docker와 함께 개발된 웹 응용 프로그램을 배포및 확장하기 쉬운 서비스로써 환경을 구성및 관리해준다

 

이를 활용해서 EC2, DB, Security Group, Auto-Scaling Group,로드 밸런서등 여러가지 환경을 컨트롤해준다.

ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/gettingStarted

 

 

 

create-application을 눌러준다 

 

 

위와 같이 설정을 한 후에 어플리케이션을 생성해준다.

 

 

생성 완료

 

 

AWS EC2에 와보면 방금 생성한 대로 EC2가 생성되어 있다.

 

S3에 접속한 이에 대한 버킷이 생성되어있다.

이제 .travis.yml 을 수정해준다

# 관리자 권한 갖기
sudo: required

#언어(플램폿)선택
language: generic 

#도커 환경 구성
services:
  - docker

#스크립트를 실행할 수 있는 환경
before_install:
  - echo "start Creating an image with dockerfile"
  - docker build -t loy124/docker-react-practice -f Dockerfile.dev .

#실행할 스크립트
script:
  - docker run -e CI=true loy124/docker-react-practice npm run test -- --coverage

#테스트 성공 후 
deploy:
  #외부 서비스 표시(s3, elesticbeanstalk, firebase 등등)
  provider: elasticbeanstalk
  #현재 사용하고 있는 AWS의 서비스가 위치하고있는 물리 장소
  region: "ap-notheast-2"
  #생성된 어플리케이션의 이름
  app: "docker-react-app"
  env: "DockerReactApp-env"
  #elasticbeanstalk을 위한 s3 버켓이름
  #travis에서 가지고있는 파일을 압축해서 먼저 s3에 보낸다.
  bucket_name: "elasticbeanstalk-ap-northeast-2-770628485357"
  bucket_path: "docker-react-app"
  #특정 branch에만 해당 aws서버에 올릴 수 있게 설정 
  on:
    branch: main

 

이제 travis CI와 AWS가 실질적으로 소통을 할수 있게 인증해주는 작업 이 필요하다.

 

이를 위해 IAM 계정을 먼저 생성하고 진행한다

기존 AWS root login을 진행할 경우 보안상 좋지 않기 때문에 I AM 계정을 생성한다.

 

 

 

IAM -> 사용자 추가 

 

 

권한설정 -> 기존정책 직접 연결 

 

AWSElasticBeanstalkFullAccess 클릭

사용자 만들기로 사용자를 생성해준다. 

 

 

생성을 하면 위와 같이 액세스키ID와 비밀 액세스키 가 나오게 된다. 

 

travis.yml에 해당 API KEY와 액세스키를 노출하면 보안에 크나큰 영향을 끼치기 때문에 

travis 사이트에 방문한다

 

more options -> settings를 클릭해준다. 

 

 

화면과 같이 ACCESS KEY와 SECRET KEY를 Environment Variables에 추가해준다.

 

그리고 .travis.yml을 수정해준다.

 

# 관리자 권한 갖기
sudo: required

#언어(플램폿)선택
language: generic 

#도커 환경 구성
services:
  - docker

#스크립트를 실행할 수 있는 환경
before_install:
  - echo "start Creating an image with dockerfile"
  - docker build -t loy124/docker-react-app -f Dockerfile.dev .

#실행할 스크립트
script:
  - docker run -e CI=true loy124/docker-react-app npm run test -- --coverage

#테스트 성공 후 
deploy:
  #외부 서비스 표시(s3, elesticbeanstalk, firebase 등등)
  provider: elasticbeanstalk
  #현재 사용하고 있는 AWS의 서비스가 위치하고있는 물리 장소
  region: "ap-northeast-2"
  #생성된 어플리케이션의 이름
  app: "docker-react-app"
  env: "DockerReactApp-env"
  #elasticbeanstalk을 위한 s3 버켓이름
  #travis에서 가지고있는 파일을 압축해서 먼저 s3에 보낸다.
  bucket_name: "elasticbeanstalk-ap-northeast-2-770628485357"
  bucket_path: "docker-react-app"
  #특정 branch에만 해당 aws서버에 올릴 수 있게 설정 
  on:
    branch: main
  access_key_id: $AWS_ACCESS_KEY
  secret_access_key: $AWS_SECRET_ACCESS_KEY

 

 

 

git add .
git commit -m "travis CI deploy"
git push

yml을 수정해줬으니 다시 git repository에 배포를 해서 travis가 해당 코드를 인식 할 수 있도록 한다. 

 

또한 Dockerfile을 생성해준다.

 

FROM node:alpine as builder

WORKDIR '/usr/src/app'

COPY package.json ./

RUN npm install

COPY ./ ./

# ENV CHOKIDAR_USEPOLLING=true

RUN npm run build

#nginx base image
FROM nginx
#포트 매핑 문제 nginx는 80번 포트에서 켜진다
EXPOSE 80
#builder stage에서 생성된 파일들은 /usr/src/app/build에 들어가는데 이 폴더를 nginx에 넣어준다.
#웹 브라우저에 http 요청이 올때 마다 nginx가 알맞게 표시해준다. 
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

 

 

Dockerfile.dev로 travis.yml에서 script를 실행해주었지만. 전체 코드를 AWS내 EB에서도 따로 이미지를 만들어서 

컨테이너를 생성해서 앱을 실행한다.

기본 플랫폼 설정이 Docker이기 때문에 Dockerfile을 찾아서 알아서 build해 준다. 

 

travis 사이트에 확인해보면 테스트 및 배포가 완료된 것을 확인 할 수 있다. 

 

Elastic beanstalk에 방문해 보면 build 중인것을 확인 할 수 있다. 

 

 

 

 

배포가 완료되고 접속 또한 정상적으로 되는 것을 확인 할 수 있다.

 

 

 

 

위 글은 

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

해당 강의를 듣고 정리하는 내용입니다.