[AWS] 33. AWS CodeBuild

구분	내용
서비스명	AWS CodeBuild
설명	소스 코드의 컴파일 단계부터 테스트 후 배포 단계까지를 지속적으로 지원하는 완전관리형 지속적 통합 서비스
주요 특징	- 소스 컴파일, 테스트, S/W 패키지를 생성하는 완전 관리형 빌드 서비스 - 지속적인 스케일 조정 및 동시에 여러 빌드 처리 지원 - Docker 이미지를 통한 사용자 요구에 맞는 사용자 지정 빌드 환경 제공 - 사용하는 컴퓨팅 리소스에 대한 분 단위 과금 - CodePipeline, Jenkins와 통합하여 서비스 활용 가능
프리티어(Free Tier)	- 매월 100분의 빌드 가능한 build.general1.small. 사용 가능 - 최초 12개월 이후에도 Free Tier 사용 가능

 

 

CodeBuild의 기대 효과

• 완전 관리형 빌드 서비스
• 자동으로 확장
• CI/CD 지원
• 손쉬운 확장
• 사용한 만큼 지불
• 높은 보안성

 

 

CodeBuild의 동작 방식

1. Source Control: CodeCommit, Github, S3 등의 소스 관리 툴에서 데이터를 불러온다.
2. Build Project: Source Control로부터 소스를 가져와 Build Project를 수행한다. Build Project는 CodeBuild에서 빌드 실행 방식을 정의하며, 소스 코드 위치, 빌드 환경, 실행할 빌드 명령 및 빌드 출력을 저장할 위치 등의 정보를 포함한다. 
3. Build Environment: Build Project에 정의된대로 또는 소스 코드에 직접 포함된 buildspec을 실행하여 Build Environment를 생성한다. Build Environment는 OS, 프로그래밍 언어 실행 시간 및 CodeBuild에서 빌드를 실행하는 데 사용되는 도구와 인증서, 권한 등 다양한 환경 정보를 선택한다.
4. S3 Bucket: Build Environment에서 Output을 Amazon S3 버킷에 업로드한다.
5. Notifications: Amazon SNS 주제에 빌드 알림을 전송하거나, 빌드가 실행되는 동안 빌드 정보를 Amazon CloudWatch Logs에 전송한다.
6. Destroy Build Environment: 빌드 작업이 완료된 후, Build Environment을 삭제하고 Clean Up 작업을 수행한다.

 

 

CodeBuild의 Build Spec

• 빌드 사양(Build Spec)은 CodeBuild가 빌드를 실행하는 데 사용하는 YAML 형식의 빌드 명령 및 관련 설정 모음이다.
• 소스 코드의 일부로 빌드 사양을 포함할 수 있으며, 빌드 프로젝트를 생성할 때 빌드 사양을 정의할 수 있다.
• buildspec.yml 파일의 이름에 관계없이 빌드 프로젝트에 대해 하나의 빌드 사양만 지정할 수 있다.

 

 

실습: Cloud9, CodeCommit, CodeBuild를 활용한 S3 정적 웹 사이트 구현

 

* 본 실습은 Cloud9, CodeCommit, CodeBuild, Vue.js를 활용하여 샘플 웹 페이지를 작성한다.

CloudBuild를 활용하여 빌드된 웹 페이지를 S3에 정적 웹 호스팅 서비스를 진행하고,

소스의 변경된 내용을 S3에 빌드하기 위해 CodeBuild를 활용한다. *

 

Step 1 Vue.js 설치 및 프로젝트 생성

1. 콘솔에 로그인한 후, [서비스] -> [개발자 도구] -> [Cloud9]으로 이동하여 [Open IDE] 버튼을 클릭한다. 이전에 생성한 Cloud9 환경이 없다면 [Create environment] 버튼을 클릭하여 신규로 생성한다.

2. 사용할 계정의 AWS CLI 설정을 진행하기 위해 AWS Configure 명령어를 실행한다.

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

4. Vue.js와 Vue CLI를 설치하기 위해 npm 명령을 실행한다.

5. Vue.js 프로젝트 생성 전에 CodeCommit 리포지토리를 생성하기 위해 Codecommit 콘솔에서 [리포지토리 생성] 버튼을 클릭한다.

6. 리포지토리 생성 페이지에서 리포지토리 이름을 입력한 후, [생성] 버튼을 클릭한다.

7. 리포지토리가 생성되면 [URL 복제] -> [HTTPS 복제] 버튼을 눌러 Git URL을 복사한다.

8. Cloud9 콘솔에서 git clone 명령과 함께 복사된 Git URL을 추가하여 CodeCommit의 리포지토리를 clone한다.

9. Vue.js WebPack을 활용하여 샘플을 생성하기 위해 위와 같이 명령어와 질문의 대답을 입력한다.

10. Vue init 명령어를 통해 생성된 코드들을 CodeCommit으로 push하기 위해 위와 같이 명령어를 입력한다.

11. CodeCommit 콘솔로 이동하여 소스가 정상적으로 push되었는지 확인한다.

 

Step 2 S3 정적 호스팅 구성

1. [서비스] -> [스토리지] -> [S3]로 이동하여 [버킷 만들기] 버튼을 클릭한다.

2. 버킷 만들기 페이지에서 버킷 이름을 입력한 후, [버킷 만들기] 버튼을 클릭한다.

3. 생성된 버킷의 속성 탭에서 정적 웹 사이트 호스팅 부분의 [편집] 버튼을 클릭한다.

4. 정적 웹 사이트 호스팅 편집 페이지에서 정적 웹 사이트 호스팅에 [활성화]를 체크하고, 호스팅 유형을 [정적 웹 사이트 호스팅]으로 선택한 후, 인덱스 문서에 'index.html'을 입력하여 [변경 사항 저장] 버튼을 클릭한다.

5. 이번엔 생성된 버킷의 권한 탭에서 퍼블릭 액세스 차단 부분의 [편집] 버튼을 클릭한다.

6. 퍼블랙 액세스 차단 편집 페이지에서 모든 퍼블릭 액세스 차단의 체크 옵션을 해제하고 [변경 사항 저장] 버튼을 클릭한다.

6. 그리고 버킷 정책 부분을 위와 같이 편집하여 저장한다.

 

Step 3 CodeBuild 설정

1. [서비스] -> [개발자 도구] -> [CodeBuild]로 이동하여 [빌드 프로젝트 생성] 버튼을 클릭한다.

2. 빌드 프로젝트 생성 페이지에서 프로젝트 이름을 입력한다.

3. 소스 항목에는 이전에 생성한 CodeCommit 리포지토리와 설정을 선택한다.

4. 환경, Buildspec, 아티팩트 항목을 위와 같이 설정한 후, [빌드 프로젝트 생성] 버튼을 클릭한다.

5. 빌드 프로젝트가 정상적으로 생성되면, 빌드 세부 정보 탭에서 환경 부분의 서비스 역할을 클릭한다.

6. 빌드 프로젝트 생성 시 생성된 역할에 권한을 추가하기 위해 [권한 추가] -> [정책 연결] 버튼을 클릭한다.

7. AmazonS3FullAccess 정책을 선택한 후, [정책 연결] 버튼을 클릭한다.

8. CodeBuild 빌드 진행을 위한 buildspec.yml 작성을 위해 Cloud9 콘솔로 이동하여 sample-repo 폴더 아래에 위와 같이 buildspec.yml 파일을 작성한다.

9. 작성한 buildspec.yml 파일을 CodeCommit으로 push한다.

10. CodeBuild 콘솔로 이동하여 [빌드 시작] 버튼을 클릭한다.

11. 빌드가 성공적으로 완료되었고, 아래 빌드 로그와 단계 세부 정보 탭에서 진행된 상세 결과에 대해 확인할 수 있다.

12. 버킷의 속성 탭에서 정적 웹 사이트 호스팅 부분의 버킷 웹 사이트 엔드포인트를 클릭한다.

13. 웹 페이지가 정상적으로 출력됨을 확인한다.

14. 다시 Cloud9 콘솔로 이동하여 메인 페이지 수정을 위해 sample-repo/src/components/HellowWorld.vue 파일 하단에 "<h1>My Second Deploy</h1>"를 추가한다.

15. 수정한 HelloWorld.vue 파일을 CodeCommit으로 push한다.

16. CodeBuild 콘솔에서 [빌드 재시도] 버튼을 클릭한 후, 빌드가 정상적으로 수행됨을 확인한다.

17. 다시 S3 정적 웹 사이트로 접속하여 코드 수정 내용이 정상적으로 반영됨을 확인한다.