[AWS Code###] React 프로젝트 자동 빌드/배포 (CI/CD)

이전 글에서 S3에 프론트엔드 프로젝트의 빌드된 파일들을 업로드하여 정적 웹 호스팅을 하는 방법을 살펴보았습니다. 프론트엔드의 소스가 변경되는 경우 로컬에서 build 후 다시 그 파일들을 수동으로 S3에 업로드해야 하는 번거로움이 있었기 때문에 AWS Code Series를 사용하여 자동으로 빌드/배포하는 방법을 알아보겠습니다.

 

1. Code Commit에 소스 올리기

(1) Code Commit Git Repository 생성

리포지토리를 생성하고 git repository url을 복사합니다.

 

 

(2) AWS 사용자 생성 및 권한 부여

AWS IAM에서 사용자를 생성합니다. 로컬에서 Repository에 접속해 pull, push 등을 사용할 사용자는 AWS Management Console에 접속할 필요가 없기 때문에 AWS 액세스 유형을 "프로그래밍 방식 액세스"만 선택해도 됩니다.

 

 

기존 그룹이 있는 경우 관련 그룹을 선택합니다.

 

 

그룹이 없는 경우에는 직접 정책을 찾아서 연결합니다.

 

 

식별이 어려운 경우 태그를 부여하여 구분합니다.

 

 

검토 후 ssh 접속을 위해 반드시 csv 파일(액세스 키, 비밀 액세스 키 포함)을 다운 받아서 잘 보관하도록 합니다.

 

 

(3) Code Commit 용 자격 증명 생성

위에서 생성한 사용자의 정보에서 AWS CodeCommit에 대한 HTTPS Git 자격 증명 생성을 클릭하여 csv 파일(사용자이름, 패스워드 포함)을 다운받습니다. 

 

 

(4) Code Commit Repository 연결

먼저, 프로젝트 소스가 로컬에 없는 경우 git clone 명령을 통해 Code Commit의 Repository를 가져옵니다. 이때 로그인을 하게 되는데 위에서 생성한 AWS CodeCommit에 대한 HTTPS Git 자격 증명 csv 파일(사용자이름, 패스워드)의 정보를 사용합니다.

 

$ git clone REPOSITORY_URL

 

만약 이미 프로젝트 소스가 로컬에 있는 경우 remote repository의 주소를 Code Commit으로 변경하는 방법을 사용할 수 있습니다. 먼저 기존 remote repository의 주소를 삭제한 뒤, Code Commit Repository 주소를 연결합니다. 로그인에 관한 설정이 나오는 경우 위와 같이 AWS CodeCommit에 대한 HTTPS Git 자격 증명 csv 파일의 정보를 사용하면 됩니다.

 

$ git remote -v
$ git remote remove origin
$ git remote add origin REPOSITORY_URL

 

이제 수정한 내용 및 관리할 소스를 작성하고 아래 명령어를 통해 Code Commit Repository에 소스를 업로드합니다.

 

$ git add .
$ git commit -m "COMMIT_MESSAGE"
$ git pull origin BRANCH_NAME
$ git push origin BRNACH_NAME

 

2. Code Build로 빌드 후 S3에 파일 업로드

(1) Code Build 생성

Code Build에서 빌드 프로젝트를 생성합니다. 빌드 관련 내용은 추후 프로젝트 내 buildspec.yml 파일에 작성할 예정입니다.

 

 

(2) S3 접근 권한 설정

"AWS IAM > 역할"로 접속하여 Code Build에서 생성한 role을 찾아 S3 접근 권한을 추가합니다.

 

 

(3) buildspec.yml 파일 작성

기존 리액트 프로젝트를 열어 최상위 디렉토리 밑에 buildspec.yml 파일을 생성하고 다음과 같은 내용을 작성합니다.

 

version: 0.2

env:
  variables:
    S3_BUCKET: "S3_BUCKET_NAME"

phases:
  install:
    runtime-version:
      nodejs: 12
  pre_build:
    commands:
      - echo Installing source NPM dependencies
      - npm install
  build:
    commands:
      - echo Build started on `date`
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
      - echo Delete all resources in this bucket
      - aws s3 rm s3://${S3_BUCKET} --recursive
      - aws s3 sync ./build s3://hson-web-test.hist.co.kr
cache:
  paths:
    - '/root/.npm/**/*'
    - 'node_modules/**/*'

 

(4) Build

Code Build의 생성한 빌드 프로젝트에서 빌드 시작을 눌러 빌드를 진행합니다. 아래와 같이 테일로그를 확인하여 진행되는 과정을 볼 수 있습니다.

 

빌드 테일 로그

빌드가 끝나면 다시 브라우저에서 S3의 버킷 웹 사이트 엔드포인트로 접속하면 아래와 같이 기존 서비스가 정상적으로 동작하는 것을 확인할 수 있습니다.

 

 

3. Code Pipeline으로 자동 빌드/배포

지금까지 작업한 내용을 보면 소스 코드를 수정하고 Code Commit으로 소스를 업로드하면 Code Build로 이동하여 직접 빌드 시작을 눌러 변경된 소스를 빌드하도록 하였습니다. 직접 빌드 시작을 하지 않고 소스가 업로드됨에 따라 자동으로 빌드와 배포가 진행될 수 있도록 Code Pipeline을 사용해 보겠습니다.

 

(1) Code Pipeline 생성

 

빌드에 사용되는 소스와 빌드 후 결과 아티팩트를 저장할 별도의 S3 버킷을 생성한 경우, 고급 설정을 눌러 아래와 같이 미리 생성한 버킷을 찾아 지정해줍니다.

 

 

이번 테스트에서는 buildspec.yml 파일 안에서 빌드 후 S3로 build 디렉토리의 내용을 모두 옮기는 방식을 사용할 것이기 때문에 배포 스테이지는 건너뛰기 하겠습니다. 하지만 buildspec.yml 파일이 아닌 자동으로 배포를 구현하고 싶은 경우 아래와 같이 배포 스테이지를 추가하면 됩니다.

 

 

이렇게 Code Pipeline을 작성하고 나면 Code Commit Repository의 지정된 브랜치로 수정한 소스를 push 할 때 자동으로 파이프라인이 실행되면서 buildspec.yml 파일에 적힌 내용대로 빌드가 이루어지고 build 디렉토리의 내용이 자동으로 S3에 업로드됩니다.

 

브라우저에서 S3의 버킷 웹 사이트 엔드포인트로 접속하면 이전에 볼 수 있었던 웹 서비스가 정상 동작하는 것을 볼 수 있습니다.

---

지금까지 구조를 살펴보면 다음과 같습니다.

 

 

현재 브라우저에서 S3 버킷의 엔드포인트로 접속을 하고 있는데 S3 버킷 자체를 외부로 노출하는 것은 보안상의 취약점을 많이 가지고 있습니다. 따라서 S3 버킷을 노출하지 않고 서비스를 하는 방법으로 Cloud Front를 사용할 수 있습니다. 다음 글에서는 프론트엔드 서비스를 Cloud Front를 통해 서비스하는 방법을 알아보겠습니다.