# 023) AWS CodeBuild 사용하기 ( + S3 정적 웹사이트 )

https://aws.amazon.com/ko/codebuild/

AWS CodeBuild – 완전관리형 빌드 서비스

 

 

Codebuild 란?
AWS 의 완전관리형 지속적 통합 서비스로 GitHub 나 CodeCommit 의 레포지토리에 있는 코드소스를 받아와서 buildspec.yml 파일에 따라 빌드,테스트 후 최종 목적지 artifacts 를 S3 에 저장 해 줍니다.

 

1. 레포지토리 생성

레포지토리를 생성 해 줍니다.

 

 

Codebuild 를 위한 레포지토리를 생성 해 줍니다.

 

 

개발환경으로 AWS Cloud9 을 이어서 사용 해 보겠습니다. 

vue 설치를 진행 해 줍니다.

npm install vue
npm install --global vue-cli
vue

 

 

Git clone 으로 codebuild-repo 의 주소를 실행 해 줍니다.

Vue init webpack 명령어 실행 시 yes/no 제외 전부 엔터 처리 해 주면 됩니다.

이후 명렁어를 차례대로 진행 해 줍니다.

cd codebuild-repo
git add .
git status
git commit -m "Uploading"
git push

 

 

 

2. S3 설정하기

정적웹사이트 호스팅을 위한 s3 버킷을 하나 생성 해 줍니다.

추후 정책 변경을 위해 퍼블릭 권한 block 을 해제시켜줍니다.

위 사진과 같이 생성한 버킷의 옵션으로 가서 정적웹사이트 호스팅 활성화로 변경 해 줍니다.

 

 

정적 웹사이트 호스팅 편집에서 다음과 같이 옵션을 설정 해 줍니다.

 

 

이후 정책 편집 부분의 정책 생성기로 가서 s3 버킷 정책을 새로 만들어 줍니다.

 

 

S3 Bucket Policy

Effect: Allow

Principal: *

Actions: GetObject

ARN: 정책생성 상단 ARN 참고 (arn:aws:s3:::s3.cloudbim.shop)

이후 Add Statement – Generate Policy 로 만들어진 정책을 복사해서 정책생성화면에 넣어 줍니다.

 

 

Resource 부분의 모든 파일을 적용시키기위해 /* 도 추가해 줍니다.

오류 발생 시 맨 앞 단락의 한칸 띄어쓰기가 되었는지 확인 해 줍니다.

 

 

3. CodeBuild

Codebuild 프로젝트를 생성하러 가줍니다.

 

 

코드빌드의 이름을 설정 해 줍니다.

 

코드빌드의 source 설정을 이어나갑니다.

 

 

다음과 같은 환경설정으로 마무리 해 주면서 생성을 완료 해 줍니다.

 

 

역할에 이전에 바로 생성된 codebuild-codebuild-s3-service-role 로 들어가서

정책 추가로 Amazons3FullAccess를 넣어 줍니다.

 

Buildspec.yml 파일을 생성해 준뒤 다음과 같이 s3 주소를 변경한뒤 코드를 넣어줍니다.

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 16
    commands:
      - npm i npm@latest -g
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - aws s3 sync ./dist s3://s3.cloudbim.shop

 

 

Start build 로 코드빌드를 진행 해 줍니다.

 

정적 웹사이트를 위한 s3 버킷을 보면 파일들이 업로드되어있습니다.

 

정적웹사이트 호스팅의 endpoint 주소로 들어가봅니다.

 

 

Vue.js App 웹화면이 나오게 됩니다.

 

+

파일 수정 시

git add .

git status

git commit –m “test”

git push

로 코드 푸쉬를 다시 해주고 codebuild 의 빌드 재시작을 해 줍니다.

 

 

---

# 024) CodeDeploy 사용하기

 

# 024) AWS CodeDeploy 사용하기