AWS CodeBuild

AWS CodeBuild

  React를 AWS S3에 배포하기 위해선 프로젝트를 빌드하고 해당 S3 빌드파일을 올리는 작업을 해주어야 한다. 하지만 AWS CodeBuild를 이용하면 Git 저장소의 코드가 바뀌면 자동으로 빌드되어 S3에 재배포할 수 있다!

 

version: 0.1
phases:
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - npm install
      - npm install --save --legacy-peer-deps
  build:
    commands:
      - echo Build started on `date`
      - npm run build
  post_build:
    commands:
      - aws s3 cp --recursive --acl public-read ./build s3://ttmk/
      - >
        aws s3 cp --acl public-read 
        --cache-control="max-age=0, no-cache, no-store, must-revalidate" 
        ./build/index.html s3://ttmk/
artifacts:
  files:
    - "**/*"
  base-directory: build

  AWS CodeBuild에 접속하기 전에 프로젝트 루트 경로에 buildspec.yml이라는 파일을 만들어 위와 같이 작성해준다. buildspec.yml은 빌드 될 때 어떤 작업을 할지 설정하는 파일이다. 위 파일은 당연히 깃허브에 업로드되어 있어야 한다.

 

 

Code Build

  이제 AWS CodeBuild에 가서 빌드프로젝트 생성을 선택하자

 

프로젝트 구성

  프로젝트 구성에는 프로젝트 이름과 설명을 넣어주자.

 

소스

  소스 공급자를 GitHub로 선택한 후 어떤 저장소의 어떤 브랜치를 빌드할지 선택한다.

 

WebHook

  코드 변경이 이 리포지토리에 푸시될 때마다 다시 빌드에 체크를 해준 후 이벤트 유형을 지정한다. 나는 저장소의 master브랜치(refs/heads/master)에 Pull Request가 Merge 될 때 빌드되도록 설정해주었다.

 

환경

  환경 탭에선 우선 AWS에서 제공하는 관리형 이미지를 선택해준다. 나머지 설정은 가장 상단에 있는 옵션들로 선택해주었다.

 

역할

  역할은 새 서비스 역할 혹은 기존 서비스 역할을 선택해준다. 나는 기존에 만들어놓은 역할이 있어 이를 사용하였고 새 서비스 역할을 만들어도 상관없다 다만 IAM에 가서 만든 역할이 AmazonS3FullAccess 권한이 있는지 확인하고 없다면 꼭 추가를 해주어야 한다.

 

추가구성

  프로젝트에서 .env 파일을 이용하여 환경변수를 사용하고 있다면 추가 구성에서 해당 변수들을 환경 변수로 추가해주어야 한다. 깃허브에는 보안상의 이유로 보통 .env파일이 올리지 않기 때문이다. 

 

 

BuildSpec

  BuildSpec에서는 작성한 buildspec 파일을 입력해준다. 입력하지 않은 경우 기본 값은 buildspec.yml이라고 한다.

 

아티팩트와 로그

  아티팩트와 로그는 별도 설정을 하지 않아도 괜찮다. 다만 S3가 여러 개 있는 경우에는 아티팩트를 설정해주어야할 수 있다.

 

아티팩트 설정

 

  아티팩트 설정이 필요하다면 위와 같이 설정한다. S3의 어떤 버킷의 어떤 경로에 넣을 것인지 설정해주어야 한다. ttmk-shop이라는 S3의 루트 경로에 build된 파일이 있어야 하므로 위와 같이 설정해주었다. aws문서에 의하면 이름을 '/'로 지정해주어야 출력이 S3의 루트 경로에 저장된다고 한다. 출력 경로는 비워도 상관없다. 이후 빌드 프로젝트 생성 버튼을 눌러준다!

 

빌드 프로젝트 목록

  빌드 프로젝트 생성을 눌렀다면 빌드 프로젝트 목록에 내가 만든 빌드 프로젝트가 생성된 것을 볼 수 있다. 빌드 프로젝트 이름을 클릭하여 자세히 살펴보자.

 

빌드 프로젝트 자세히

  빌드 프로젝트 화면은 위와 같이 생겼다. 만든 직후에는 빌드 기록이 없지만 빌드를 여러번 하다보면 위와 같이 빌드기록이 생성된다. 이제 설정한 대로 Git에 PR 후 Merge하면 빌드가 자동으로 시작되는 것을 볼 수 있다. 수동으로 빌드하기 위해선 우측 상단의 빌드 시작을 누르면 되고, 환경 변수, Git 브랜치 등을 변경해서 빌드하고 싶다면 재정의로 빌드시작을 선택하면 된다.

 

Build Log

  cloudwatch를 체크한 후 빌드가 시작했다면 빌드로그를 실시간으로 볼 수 있다. 빌드에 실패한다면 로그를 보고 왜 실패했는지 분석해야한다. 예를 들어 위 로그는 buildspec.yml 내의 명령을 실행하는데 build 폴더에 service-worker.js가 없어서 발생한 오류이다.

 

  혹시 아티팩트를 설정한 후 빌드 후 배포 경로에서 Access Denied가 뜬다면 S3의 각 엔티티들의 속성을 확인해보자. 나의 경우 일부 파일이 서버 측 암호화 설정?이 활성화되어 Access Denied가 발생한 경험이 있다.

 

---

참고 링크: https://eunsukim.me/posts/react-cicd-pipeline-with-aws-s3-iam-codebuild