2020년 12월 22일 기록
이전 포스팅의 S3 정적 웹 사이트 호스팅은 수동으로 배포하는 방식이다. Git에 Push 했을 때 자동으로 프로젝트가 build되고 S3에 배포되어 도메인으로 접속했을 때 반영되도록 하려면 AWS CodeSuite를 사용하면 된다.
CodeCommit, CodeBuild, CodePipeline, CodeDeploy를 모두 합쳐 CodeSuite라고 명명한다고 한다. 나는 웹 호스팅만 하면 되기 때문에 CodeDeploy는 사용하지 않았다. React로 구현한 대시보드 웹 프로젝트의 자동 배포 과정을 기록해본다.
CodeCommit 레포지토리 생성하기
CodeCommit은 Git 기반 비공개 저장소이다. 주의할 점은 CodeBuild와 CodeCommit은 같은 리전 안에 있어야 한다.
생성한 레포지토리에 접근하기 위해서는 CodeCommit 접근 권한을 가진 사용자가 필요하다.
IAM에서 AWSCodeCommitFullAccess 권한을 가진 사용자를 생성해준다. 사용자를 만든 후 나오는 키와 시크릿 키는 잘 보관해둔다.
보안 자격 증명 탭에서 HTTPS Git 자격 증명을 생성한다.
생성 후 나오는 사용자 이름과 암호도 잘 보관해둔다.
터미널을 키고 aws configure로 현재 사용자 설정을 해준다. 아까 생성한 IAM 사용자 액세스 키와 시크릿 키를 입력해주면 된다.
레포지토리를 클론하기 위해 CodeCommit으로 이동한다. URL 복제 - HTTPS 복제를 누르면 깃 레포지토리 주소가 복사된다.
복사한 주소를 클론하려고 하면
위와 같은 창이 뜨는데, 아까 생성한 깃 자격 증명의 이름과 암호를 입력해준다. 레포지토리가 아직 비어있는 상태이기 때문에 .git 파일 말고는 아무것도 생기지 않는다.
테스트로 텍스트 파일을 푸시해보았다. 이제 이 레포지토리에 프로젝트 파일을 push하면 된다.
CodePipeline 생성하기 (CodeBuild)
CodeBuild 서비스에 들어가서 따로 프로젝트를 만들어도 되지만, CodePipeline을 생성하면서 한 번에 할 수 있기 때문에 CodePipeline을 생성할 것이다.
파이프라인을 생성한다.
이름을 적어준다. 역할은 생성해놓은 역할이 있다면 선택하고, 아니라면 새 서비스 역할을 생성하면 된다.
소스 공급자를 CodeCommit으로 선택하면, 이전에 만들었던 레포지토리와 브랜치를 선택할 수 있을 것이다. 위에서 만든 레포지토리는 포스팅을 위해 임시로 만든 것으로, 여기서부터는 다시 원래 만들었던 레포지토리로 진행하겠다.
빌드 공급자를 CodeBuild로 선택한다. 아직 빌드 프로젝트를 만들지 않았으므로 프로젝트 생성을 눌러 생성해줄 것이다.
이름을 적어주고
위와 같이 환경을 설정해준다. 프로젝트를 빌드하기 위해 프로비저닝할 환경을 설정해주는 것으로, AWS에서 제공하는 도커 이미지를 사용할 수도 있고 도커 허브에 저장된 개인 도커 이미지를 사용할 수도 있다.
역할은 마찬가지로 만들어 놓은 역할이 있다면 사용하고, 아니라면 위처럼 새로 생성하면 된다. 빌드한 React App을 S3에 올릴 때 필요한 역할이다.
Buildspec 파일은 CodeBuild에게 어떤 작업을 수행하도록 명시하는 스펙 파일이다. CodeBuild 는 기본적으로 프로젝트 root 디렉토리에서 buildspec.yml 이란 파일을 찾아 스펙 파일로 사용한다.
루트 디렉토리에서 buildspec.yml이라는 이름으로 빌드 스펙 파일을 만들 거라면 아무것도 적지 않아도 되지만, 다른 위치나 다른 이름으로 생성할 경우 경로와 이름을 적어주면 된다.
완료하고 나면 CodeBuild가 잘 생성된 것을 볼 수 있다.
마지막으로, 배포는 S3에 할 것이므로 Amazon S3를 선택하고 배포할 S3 버킷을 선택해준다. CodeBuild에서 프로젝트를 빌드하면 압축 파일로 생성되므로 배포하기 전에 압축을 풀도록 체크해준다. 검토 후 파이프라인을 생성한다.
Buildspec 파일 추가하기
기존에 존재하는 React App 루트 디렉토리에 buildspec.yml을 추가해주어야 한다. 자세한 문법은 공식 문서를 참고하면 된다.
buildspec.yml
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
files:
- "**/*"
discard-paths: no
base-directory: build실제 CI/CD 과정
buildspec 파일을 생성하고 CodeCommit 레포지토리에 push하면 CodePipeline이 소스코드 변경을 감지하고 실행된다.
Build의 세부 정보를 누르면 현재 빌드 상태를 확인할 수 있다.
아래에서 현재 빌드 로그도 확인할 수 있다.
정상적으로 구현되고 시간이 지나면 Build와 Deploy까지 모두 완료된 것을 확인할 수 있다.
이제 git push만 하면 자동으로 Build, Deploy를 수행하는 CI/CD가 구현된 것이다. 도메인으로 접속해보면 변경 사항이 잘 반영된 것을 확인할 수 있다.
