[Docker | AWS] .travis.yml 파일 작성(배포)

 

 

안녕하세요, 쯀리입니다.

지난시간에 travis CI를 통해 테스트 환경까지 구성해보고

AWS Elastic Beanstalk 환경 설정까지 진행해보았는데 . 

[AWS] AWS EC2, EB (Elastic Beanstalk) 초기설정

[Docker] 리액트 어플을 실제로 배포해보기 (테스트까지)

 

오늘은 travis.yml을 작성하여 배포까지 진행해보겠습니다. 

 

 

---

 

우선 AWS를 환경설정을 종료했었기 때문에 다시 켜주도록 하겠습니다.

 

 

---

 

travis 설정

현재까지의 .travis.yml 파일을 살펴보겠습니다. 

# 관리자 권한
sudo: required

language: generic

#도커 환경 구성
services:
  - docker

# 스크립트를 구성 할 수있는 환경
before_install:
  - echo "start creating images with dockerfile"
  - docker build -t jjwdocker/docker-react-app -f Dockerfile.dev .

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

# 테스트 후 할일
after_success:
  - echo "Test Success"

 

 

이제 travis 설정 코드에 배포 부분을 설정해주겠습니다. 

# 관리자 권한
sudo: required

language: generic

#도커 환경 구성
services:
  - docker

# 스크립트를 구성 할 수있는 환경
before_install:
  - echo "start creating images with dockerfile"
  - docker build -t jjwdocker/docker-react-app -f Dockerfile.dev .

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

## 테스트 후 할일
#after_success:
#  - echo "Test Success"

deploy:
  # 외부 서비스 표시 (s3, elasticbeanstalk, firebase... )
  provider: elasticbeanstalk
  # 현재 사용하고 있는 AWS의 서비스가 위치한 물리적 장소
  region: "ap-northeast-2"
  #어플리케이션 이름
  app: "DockerReactApp"
  #환경 이름
  env: "DockerReactApp-env"
  #해당 elasticbeanstalk을 위한 s3이름
  bucket_name: "버킷이름"
  bucket_path: "App이름과 동일합니다. "
  on:
    #어떤 브랜치에 push할때 AWS에 배포 할 것인지?
    branch: master

 

 

s3를 따로 설정된 것은 없는데?? 

travis CI에서 소스를 배포를 해야하는데, 

파일을 압축해서 S3에 보낸 뒤 배포가 됩니다.

Elasticbeanstalk를 생성할때 자동으로 생성이 됩니다. 

 

S3를 따로 설정해준적은 없지만 새로 생성된 것이 보여집니다.

 

bucket_name은 여기 명시되어있습니다. 

 

 

 

 

---

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

 

이제 기본적인 설정이 완료되었다면 TravisCI와 AWS 가 연결하기 위해서는 Secret Key가 필요합니다.

 

인증을 위해서는 API Key가 필요합니다. 

 

Secret, Access API Key받는 순서

1. IAM(Identity and Access Management) USER 생성

 - 맨처음 가입을 하게되면  Root 계정을 사용하는데 이것은 보안상 좋지 않기 때문에 IAM사용자에게 권한을 부여합니다.

 

지난시간에 IAM을 사용해서 역할을 추가해주었는데 이제는 유저를 추가해주겠습니다.

 

저는 docker-react-user라는 이름의 사용자를 추가하겠습니다. 

 

권한설정 : 

직접 정책 연결 -> AdministratorAccess-AWSElasticBeanstalk를 체크해주겠습니다

다음-> 사용자 생성

 

액세스 키를 잘 보관해주겠습니다. 

 

---

액세스키를 가지고 travis-ci에 옵션을 추가해주러 가겠습니다.

travis-ci 홈페이지 로 가겠습니다.

 

지난시간에 만들어둔  app에 settings로 들어가보겠습니다. 

 

Environment Variables에 변수로 설정해주겠습니다.

AWS_ACCESS_KEY : 공개키

AWS_PRIVATE_ACCESS_KEY : 비밀키

 

 

이 변수를 사용해 travis.yml파일에 작성해보겠습니다.

 

.travis.yml

# 관리자 권한
sudo: required

language: generic

#도커 환경 구성
services:
  - docker

# 스크립트를 구성 할 수있는 환경
before_install:
  - echo "start creating images with dockerfile"
  - docker build -t jjwdocker/docker-react-app -f Dockerfile.dev .

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

## 테스트 후 할일
#after_success:
#  - echo "Test Success"

deploy:
  # 외부 서비스 표시 (s3, elasticbeanstalk, firebase... )
  provider: elasticbeanstalk
  # 현재 사용하고 있는 AWS의 서비스가 위치한 물리적 장소
  region: "ap-northeast-2"
  #어플리케이션 이름
  app: "DockerReactApp"
  #환경 이름
  env: "DockerReactApp-env"
  #해당 elasticbeanstalk을 위한 s3이름
  bucket_name: "내가 설정한 s3이름"
  bucket_path: "앱 이름"
  on:
    #어떤 브랜치에 push할때 AWS에 배포 할 것인지?
    branch: master
  access_key_id: $AWS_ACCESS_KEY
  secret_access_key: $AWS_PRIVATE_ACCESS_KEY

 

 

 

 

---

Travis CI & AWS 확인하기

실제로 GitHub에 Push 해보겠습니다. 

 

 

Travis CI에서도 반영되는지 살펴보겠습니다. 테스트 성공입니다!

 

deploy도 완료되었습니다.

 

포트 매핑 때문에 에러가 발생할 것입니다. 

Dockerfile에서 nginx를  80번으로 포트매핑 시켜주겠습니다.

 

# ----------------- builder stage -------------------------
FROM node:alpine as builder

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

RUN npm run build

# ----------------- run stage -------------------------

# nginx를 위한 베이스 이미지
FROM nginx
EXPOSE 80
# build파일들을 /usr/share/nginx/html 부분으로 복사해줍니다.
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

 

이제 환경으로 이동해보면 원하던 페이지가 생성되었습니다! 

 

 

---

참조

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