Docker, Travis CI, AWS Lightsail(Amazon Linux 2) 이용하여 React앱 테스트 및 배포 자동화

Docker, Travis CI, AWS Lightsail(Amazon Linux 2) 이용하여 React앱 배포 자동화 순서

1. vscode를 이용하여 React 앱 설치

2. Docker를 이용하여 React 앱 실행 및 테스트

3. Github에 push 이벤트 발생 시 Travis CI 연동 및 배포

4. AWS Lightsail 연동하기

5. nginx를 이용하여 배포 확인

 

전체적인 흐름은 아래와 같다.

전체적인 파일 구성은 아래와 같다.

 

1. React 앱 설치 

    - 아래 명령어를 이용하여 React 앱을 간단하게 설치하기 

 

2. Docker를 이용하여 React 앱 실행 

    - Dockerfile 작성하기

      - Dockerfile 작성 방법

          - FROM : 베이스 이미지를 명시한다. os라고 생각하시면 됩니다. 테스트하기 위해 가벼운 Linux alpine을 선택

          - WORKDIR : 모든 어플리케이션을 위한 소스들은 WORK 디렉터리를 따로 만들어서 보관

          - COPY : 모든파일을 컨테이너로 복사 

          - CMD : 컨테이너 시작시 실행될 명령어를 명시해준다.

     

    - docker-compose.yml 작성하기

     - docker-compose.yml 작성 방법

         - version : 도커 컴포즈의 버전

         - services : 이곳에 실행하려는 컨테이너들을 정의

            - react : 컨테이너 이름

               - build : 현 디렉토리에 있는 Dockerfile 사용

                  - context : 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치

                  - dockerfile : 도커 파일이 어떤 것인지 지정

               - ports : 포트 맵핑  로컬 포트 : 컨테이너 포트

               - volumes : 로컬 머신에 있는 파일들 맵핑 

               - stdin_open : 리액트 앱을 끌 때 필요

 

   - 작성 후  docker-compose up -d 백그라운드로  실행

      - docker ps로 컨테이너 실행 확인

 

 

3. Travis CI 연동 및 배포

 

CI(Continuous Integration) 란

 - 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미(Continuous Integration)

 - 자동으로 테스트와 빌드가 수행되어 여러 명의 개발자가 동시에 애플리케이션을 개발과 관련된 코드 작업할 경우 돌 할 수 있는 문제를 해결

 

CD(Continuous Deployment) 란

 - 빌드 결과를 실시간으로 프로덕션 환경으로 배포

 

Travis CI 란

 - Github에서 진행되는 오픈소스 프로젝트를 위한 지속적인 통합 서비스이다.

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

 - 가상머신을 스냅샷해서 각 빌드를 수행하고 빌드가 끝나면 롤백한다. 그래서 호스트 os에 영향을 끼치지 않고 각 실행 간에 어떤 상태도 유지되지 않으며 sudo를 사용할 수 있다.

 

Travis CI의 흐름

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

 

Travis CI 사용법

 

1. Settings 화면으로 이동

2. Github repository 버튼 활성화 -> Github repository 소스가 변경될때 마다 소스를 가져와서 테스트하고 배포 

 

3. Travis CI가 무엇을 해야할지 .travis.yml 작성 및 배포 (반드시 저장소의 루트위치에 있어야 한다. )

.travis.yml 작성방법 

 - sudo : 관리자 권한

 - language : 언어 선택

 - services :  도커 환경 구성 

 - before_install : 스크립트를 실행할 수 있는 환경 구성

 - script : 실행할 스크립트(테스트 실행)

 - after_success : 테스트 성공 후 할일

 - notifications : Travis CI 빌드시 메일로 알림 받게 설정

 

4. 작성 후 생성된 git repository에 push를 하면 Travis CI 가 인지하고 동작하고 Dashboard 화면에서 log 확인 가능

   - react 테스트 결과를 확인할 수 있고 마지막에 test success가 나타나면 Travis CI의 build 성공이다.

 

5. Dashboard에서 배포 내역 확인 가능

4. AWS Lightsail 연동하기

    서비스 역할 생성하기(Code Deploy Service Role)

       1. aws iam 서비스 역할 만들기

     2. CodeDeploy 선택 후 다음 버튼을 클릭한다.

    3. CodeDeploy 선택 시 관련된 AWSCodeDeployRole 정책이 연결된다. 다음 버튼을 클릭한다.

    4.  다음 화면에 있는 태그 추가는 생략하고 다음 버튼을 클릭 후  역할 이름 입력 후 역할을 생성한다.

S3 버킷 생성하기

    

  1.  버킷 만들기 버튼을 클릭한다.

  2. 아래와 같이 버킷 이름을 입력하고 버킷을 생성한다.

IAM 정책 생성하기

  1. 정책 생성 버튼을 클릭한다.

    2.  JSON으로 아래와 같이 입력 후 정책 검토 버튼을 클릭한다. ( S3 및 CodeDeploy 접근권한 부여)

 

         - Resource : 위에서 생성한 S3 버킷 이름을 입력한다.  "arn:aws:s3:::<S3 Bucket Name>/*"  ( "*" 전체를 적용하여도 된다.)  

 

   3. 정책 이름에 사용할 이름을 입력하고 정책을 생성한다. 밑에 S3 정책이 생성된 걸 확인할 수 있다.

IAM 사용자 생성하기

   1. 사용자 추가 버튼을 클릭한다.

   2. 사용자 이름을 입력하고 액세스 유형을 아래와 같이 선택한다.

    3. 위에서 만든 정책 이름을 검색하여 선택 후 다음 버튼을 클릭한다.

    4. 아래와 같다면 사용자 만들기 버튼을 클릭한다.

    5. 성공을 하면 아래와 같이 액세스 키 ID와 비밀 액세스 키가 생성되는데 .CSV로 다운로드하여서 보관이 가능하다. 사용자를 사용하려면 필요하니 보관하자.

AWS Lightsail 인스턴스 생성 및 세팅

 

     1. 인스턴스를 생성한다. 인스턴스 이름은 Docker_test로 생성하였다.

 

   nginx 및 docker 설치법은 아래에서 확인할 수 있다.

changhyunit.tistory.com/64?category=994138

Amazon Lightsail -Amazon Linux 2 (Nginx 설치)

changhyunit.tistory.com/71?category=960128

Amazon Linux 2 - docker, docker-compose 설치

  2. CodeDeploy agent를 생성한다. (실행되기 위해 IAM user 허가가 필요하다.)

       - CodeDeploy agent : S3에서 파일을 CodeDeploy 서비스가 다운로드할 수 있고 애플리케이션을 배포하거나 업데이트합니다.

 

    AWS Lightsail ssh를 열어 입력한다.

     - mkdir /etc/codedeploy-agent/

     - mkdir /etc/codedeploy-agent/conf

     - vim /etc/codedeploy-agent/conf/codedeploy.onpremises.yml -- 아래와 같이 입력하고 저장한다. (key값도 입력) 

     - yum install ruby

     - wget https://aws-codedeploy-us-west-2.s3.us-west-2.amazonaws.com/latest/install

     - chmod +x ./install

     - sudo ./install auto

     - sudo service codedeploy-agent status -- 설치가 잘되었는지 확인

     - 설치가 잘되었다면 The AWS CodeDeploy agent is running as PID 1234 와 같이 나타난다. pid는 다를 수 있다.

 

3. Lightsail 인스턴스와 Deploy Tags를 등록한다.

   - AWS Command Line Interface를 사용하기 위해서 사용자를 등록해야 한다.

    - aws configure -- 명령어를 실행하면 사용자를 등록할 수 있다. IAM 사용자 정보들을 입력한다.

      AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
      AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
      Default region name [None]: us-east-2
      Default output format [None]: json

 

    - aws deploy register-on-premises-instance --instance-name Docker_test --iam-user-arn arn:aws:iam::319297370672:user/Lightsail_IAMUser --region ap-northeast-2

        - instance-name : Lightsail에 생성한 인스턴스 입력

        - iam-user-arn : IAM에 생성한 사용자 ARN 복사 

   

    - aws deploy add-tags-to-on-premises-instances --instance-names Docker_test --tags Key=Name,Value=Lightsail-codedeploy-app --region ap-northeast-2

        - 이 태그는 CodeDeploy 서비스에 배포 그룹을 생성할 때 환경 구성:온프레미스 인스턴스에 사용된다.

        - instance-name : Lightsail에 생성한 인스턴스 입력

        - key : 키

        - Value : 값

        

          - aws deploy list-on-premises-instances --region ap-northeast-2   

인스턴스가 생성된 것을 확인 할 수 있다.

CodeDeploy 생성

 

 1. 애플리케이션 생성 버튼을 클릭한다.

 2. 아래와 같이 입력 후 애플리케이션을 생성한다.

 3. 배포 > 애플리케이션 > 배포 그룹 생성을 클릭한다.

 4. 아래와 같이 입력 후 배포 그룹 생성한다.

    - 서비스 역할 :  위에서 IAM에 등록한 역할 ARN을 입력한다. 위치 : IAM > 역할

    - 환경 구성 : 온프레미스 인스턴스를 입력하고 위에서 만든 Deploy Tag를 입력한다.

    - 로드 밸런서는 체크 해제한다.

 

Travis CI 키 등록

   - setting 화면으로 들어와서 Environment Variables에 name/value에 값을 입력한다.

   - IAM 사용자 AWS Access Key ID / AWS Secret Access Key를 등록한다.

   - .travis.yml에서 등록한 NAME으로 호출 가능하다. ( $AWS_ACCESS_KEY / $AWS_SECRET_ACCESS_KEY NAME )

.travis.yml 추가 작성하기 (deploy)

 

프로젝트 최상위 루트에 appspec.yml 생성 및 작성

   - AppSpec file(application specification file)은 CodeDeploy가 배포를 관리하기 위해 사용하는 YAML 형식의 파일 또는 JSON 형식의 파일입니다.

   - EC2/온프레미스 배포에 대한 AppSpec file의 이름은 appspec.yml 또는 appspec.json이어야 합니다.

   - deploy.sh : 배포가 되면 docker가 실행될 수 있게 .sh생성

   - AppSpec file에 대해서는 아래 URL에서 상세하게 알 수 있다.

docs.aws.amazon.com/ko_kr/codedeploy/latest/userguide/reference-appspec-file.html

CodeDeploy AppSpec File 참조 - AWS CodeDeploy

프로젝트 최상위 루트에 deploy.sh 생성 및 작성

   - 배포가 성공적으로 되면 docker를 실행한다.

 

Travis CI 빌드 성공 확인 및 로그 확인

 

CodeDeploy 배포 확인

 - 배포 성공 여부를 확인할 수 있다.

Lightsail 폴더 확인

- 아래와 같이 생성되었음을 확인 할 수 있다.

5. nginx를 이용하여 배포 확인

    1. /etc/nginx/nginx.conf를 열어 아래와 같이 수정한다. 

   2. service nginx start - nginx 실행을 한다.

  

   3. 외부에서 인스턴스 IP로 접속 확인을 한다.