(AWS) AWS CodeBuild 란? 그리고 실습

 

개요 

AWS CodeBuild는 소프트웨어 개발에 필요한 소스코드를 컴파일하는 단계에서부터 테스트 후 소프트웨어 배포까지의 단계를 지원하는 완전 관리형 지속적 통합 서비스 입니다. 

 

CodeBuild를 사용하면 자체 빌드 서버가 필요하지 않으며, 빌드 서버를 프로비저닝하거나, 운영/관리 및 확장을 수행할 필요가 없습니다. 

 

AWS CodeBuild는 빌드를 수행할 볼륨에 따라 인프라가 자동으로 확장 및 축소를 지원하여, 제출되는 빌드에 대해 즉각적으로 처리되므로, 여러 빌드를 동시에 처리할 수 있기 때문에 빌드를 위해 대기하지 않고 빠르고 효율적으로 빌드작업을 수행할 수 있습니다.

 

주요 기능과 기대효과

1. 코드에 대한 빌드와 테스트입니다. AWS CodeBuild는 빌드작업을 수행하기 위해 사전에 구성된 빌드환경에서 작업을 수행합니다. 

 

2. 구성 설정입니다. AWS CodeBuild는 단위 테스트, 코드 패키지 및 Build-To-Package 설치와 같은 명령을 지정할 수 있습니다. 빌드 사양 파일 YAML로 구성하여 각 단계에서 수행할 명령어를 정의할 수 있으며 수행 단계별로 실행하도록 구성할 수 있습니다. 

 

3. 지속적인 통합과 지속적인 배포 워크플로우입니다. 

 

4. 빌드 프로세스에 대한 모니터링 입니다. AWSCodeBuild는 AWS Management Console, SDK, AWS CLI 및 API에서 빌드에 대한 상세 내역을 확인할 수 있으며, Build ARN, Build Project, 리포지토리, 시작 및 종료 시간, 빌드 상태 등의 빌드 정보를 손쉽게 확인할 수 있습니다.

 

Cloud9, CodeCommit, CodeBuild를 활용한 S3 정적 웹사이트 구현 실습 
- Vue.js 설치 및 프로젝트 생성

 

1. AWS Console에 접속 후 메뉴에서 [서비스] - [개발자도구] - [Cloud9] 을 클릭하여 [Cloud9] 페이지로 이동합니다. 'Your environments'를 클릭하여 이전 실습에서 사용했던 Cloud9 개발자 환경을 선택 후 'Open IDE'를 클릭합니다. 이전에 작성된 Cloud9 콘솔이 없다면 [Create environments] 버튼을 클릭하여 신규로 생성합니다. 

 

2. 이전 IAM에서 생성한 계정 AWS CLI설정을 진행하기 위해 AWS Configure 명령어를 실행하고 'CodeCommit_User' 계정 생성 시 발급받은 AWS Access Key ID, Secret Access Key, Region 정보를 다음과 같이 입력합니다. 

$ aws configure
AWS Access Key ID [None]: AKIAI-----------EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFE--------------AMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: json

 

3. 터미널에서 Git을 사용하여 git config를 실행합니다. 이때 AWS 자격증명 프로필로 Git 자격증명 헬퍼 사용을 지정하고, Git 자격증명  헬퍼가 경로를 리포지토리로 전송할 수 있도록 합니다. 

$sudo git config --global credential.helper '!aws codecommit credential-helper $@'
$sudo git config --global credential.UseHttpPath true

 

4. 리엑트와 함께 많은 인기를 얻고 있는 Vue.js를 설치하기 위해 다으모가 같이 npm 명령을 실행합니다.

$npm install vue

 

5. Vue 설치가 끝났다면 Vue cli 설치를 위해 다음과 같이 입력합니다. 

$npm install --global vue-cli

 

6. 설치가 완료되면 CLI를 통해 바로 vue.js를 활용할 수 있습니다. 다음과 같이 vue 명령어를 설펴보겠습니다.

$vue

 

7. Vue.js 프로젝트 생성 전에 CodeCommit 리포지토리를 생성하기 위해 CodeCommit 콘솔로 이동후 [리포지토리 생성] 버튼을 클릭합니다.

 

8. [리포지토리 생성] 페이지에서 '리포지토리 이름'에 'codebuild-sample' 입력 후 [생성] 버튼을 클릭합니다.

 

9. 리포지토리가 생성된 후 [URL복제] 버튼을 클릭하고 [HTTPS 복제]버튼을 클릭합니다. 

 

10. 다시 Cloud9 콘솔로 이동 후 다음과 같이 명령어를 입력하여 CodeCommit 리포지토리를 복제합니다. 

$git clone https://git-codecommit.ap-northeast-2.amazonaws.com/v1/repos/codebuild-sample

 

11. Vue.js WebPack을 활용하여 Sample을 생성하기 위해 다음과 같이 명령어를 입력합니다. 

$vue init webpack codebuild-sample

 

12. Vue init 명령어를 통해 생성된 코드들을 CodeCommit으로 Push하기 위해 다음과 같이 git 명령어를 입력하여 Push를 진행합니다.

$git add .
$git status
$git commit -m "CodeBuild-Sample Source Commit"
$git push

 

13. CodeCommit 콘솔로 이동후 소스가 정상적으로 Push되었는지 확인합니다. 

 

- S3 정적 호스팅 구성

 

1. AWS Console에 접속 후 메뉴에서 [서비스] - [스토리지] - [S3]을 클릭합니다. [S3] 페이지에서 [버킷 만들기] 버튼을 클릭합니다. 

 

2. [버킷 만들기] 페이지에서 '버킷 이름'에 'codebuild-sample-아이디' 입력 후 [생성] 버튼을 클릭합니다. 

 

3. 버킷 생성 완료 후 버킷의 관리 화면에서 [속성] - [정적 웹 사이트 호스팅]의 [비활성] 버튼을 클릭합니다.

 

4. '정적 웹 사이트 호스팅'에서 '이 버킷을 사용하여 웹사이트 호스팅 합니다.'를 선택하고 '인덱스 문서' 에 'index.html'입력후 [저장] 버튼을 클릭합니다.

 

5. '버킷 관리' 항목에서 [권한] - [퍼블릭 엑세스 차단] 버튼을 클릭후 [편집] 버튼을 클릭합니다. '모든 퍼블릭 엑세스 차단' 체크 옵션을 해제하고 [저장] 버튼을 클릭합니다. 이후 팝업 페이지에서 [확인]을 클릭합니다. 

 

6. [버킷관리] 페이지의 '권한' 항목에서 [버킷정책] 버튼 클릭 후 다음과 같이 입력하고 [저장] 버튼을 클릭합니다.

{
  "Version": "2012-10-17",
  "Id": "Policy1530611678296",
  "Statement": [
    {
      "Sid": "Stmt1530611670504",
      "Effect": "Allow",
      "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::codebuild-sample-본인아이디/*"
       }
  ]
}
       

 

CodeBuild

1. AWS Console에 접속 후 메뉴에서 [서비스] - [개발자도구] - [CodeBuild]를 클릭합니다. [CodeBuild] 페이지에서 [프로젝트 빌드] 메뉴 클릭후 [빌드 프로젝트] 버튼을 클릭합니다.

 

2. [빌드 프로젝트 생성] 페이지에서 '프로젝트 이름' 에 'codebuild-sample-s3'입력하고 하단으로 이동합니다. 

 

3. 소스 선택 화면에서 이전에 생성된 CodeCommit 리포지토리와 설정을 선택합니다. 

 

4. CodeBuild 환경 구성에 대해 다음과 같이 입력 구성합니다.

5. 'Buildspec' 항목에서 Codebuild 수행 시 사용할 buildspec를 선택하는 옵션은 기본 'buildspec 파일사용'을 선택합니다. 아티팩트는 Vue.js에 대한 Build 작업수행 후 Buildspec 항목에서 S3로 자동동기화 명령을 별도로 실행할 계획이므로, '아티펙트 없음'을 선택합니다. 단, buildspec.yml파일은 별도로 소스에 추가할 예정입니다.

 

6. 로그는 기본 설정으로 변경 사항없이 하단의 [빌드 프로젝트 생성] 버튼을 클릭합니다.

 

7. 빌드 프로젝트가 정상적으로 생성되었음을 다음과 같이 확인합니다.

 

8. CodeBuild 프로젝트 생성 시 생성된 역할에 권한을 추가하기 위해 [서비스] - [보안, 자격 증명 및 규정 준수] - [IAM] 으로 접속합니다. [역할] 메뉴 클릭 후 이전 codebuild 프로젝트 생성 시 작성된 'codebuild-sample-s3-service-role'을 클릭합니다. 

 

9. [역할 요약] 페이지의 [권한] - [정책연결] 버튼을 클릭합니다. 

 

10. [권한 연결] 페이지에서 '정책 필터' 창에 'S3' 입력 후 'AmazonS3 Full Access'항목에 체크하고 [정책 연결] 버튼을 클릭합니다. 

 

11. Codebuild 빌드 진행을 위한 buildspec.yml 작성을 위해 Cloud9 콘솔로 이동합니다. 'codebuild-sample'폴더에서 마우스 오른쪽 버튼 클릭 후 하단의 'New File'을 선택합니다. 

 

12. 'buildspec.yml'파일을 다음의 내용을 참고하여 작성하고, 'post_build' 항목에서 빌드된 소스를 동기화할 S3 버킷을 본인이 작성한 S3 버킷 정보로 변경 후 파일을 저장합니다. 

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 10
    commands:
      - npm i npm@latest -g
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - aws s3 sync ./dist s3://codebuild-sample-본인아이디

 

13. buildspec.yml 을 codecommit으로 push 하기 위해 다음과 같이 git 명령어를 입력하여 Push를 진행합니다. 

$git add .
$git status
$git commit -m "CodeBuild-Sample buildspace commit"
$git push

 

14. CodeBuild 콘솔로 이동 후 [프로젝트 빌드] 메뉴를 선택하여 이전에 생성한 'codebuild-sample-s3'를 클릭합니다. [Codebuild-sample-s3 프로젝트] 페이지에서 [빌드시작] 버튼을 클릭합니다.

 

15. [빌드시작] 페이지에서 [빌드 시작]버튼을 클릭합니다. 

 

16. 빌드가 진행되고 3~5분 후 빌드가 성공적으로 완료되면 다음과 같이 결과를 확인할 수 있습니다.

 

17. 빌드 상태 하단의 '빌드 로그', '단계 세부정보'를 통해 진행된 상세 결과에 대해 확인할 수 있습니다.