Github Actions으로 AWS S3-CloudFront CI CD 구축하기

이젠 배포된 AWS S3, CloudFront에 CI, CD를 구축해보자.

나는 Github에 올라가 있는 프로젝트를 Github Actions으로 CI CD를 구축할 예정이다.

 

CI/CD(Continuous Integration and Continuous Deployment 또는 Continuous Delivery)는 소프트웨어 개발에서 코드 변경 사항을 보다 빠르고 안정적으로 배포할 수 있도록 돕는 일련의 프로세스와 도구입니다.

1. CI(Continuous Integration, 지속적 통합)

• 개념: 개발자가 새로운 코드를 중앙 저장소(예: Git)에 자주 병합하는 프로세스입니다.
• 목적: 코드 변경 시, 자동화된 빌드와 테스트를 통해 버그를 초기에 발견하고 해결합니다.
• 주요 작업:
  1. 코드 커밋
  2. 자동화된 빌드 실행
  3. 단위 테스트 및 통합 테스트 실행
  4. 문제 발생 시 개발자 알림

CI의 장점:

• 코드 병합 문제를 조기에 발견 (Merge Conflict 최소화)
• 코드 품질 유지
• 테스트 자동화로 안정성 향상

---

2. CD(Continuous Deployment, 지속적 배포) 또는 Continuous Delivery(지속적 전달)

• Continuous Deployment:
  코드를 프로덕션 환경까지 자동으로 배포하는 프로세스입니다. 코드 변경 후 모든 테스트를 통과하면 사람이 개입하지 않아도 바로 배포됩니다.
• Continuous Delivery:
  코드가 프로덕션 환경에 배포되기 직전까지 자동화되며, 실제 배포는 수동 승인 후 진행됩니다.

CD의 주요 작업:

1. 자동화된 배포 준비
2. 스테이징 환경에서 테스트 실행
3. (옵션) 수동 승인 후 프로덕션 환경 배포

CD의 장점:

• 빠르고 안정적인 배포 프로세스
• 배포 시간 단축 및 배포 오류 감소
• 코드가 항상 배포 가능한 상태로 유지

 

• 먼저, IAM에서 사용자를 생성하고 S3와 CloudFront에 접근할 수 있는 권한을 부여하자.

• AWS CLI로 접근할 수 있게 액세스 키를 발급받자.
• 발급받은 KEY_ID와 SCESS_KEY를 잘 적어두자.

• Cloudfront으로 이동한 후, distribution ID 적어두자.
• ARN에 distribution 다음에 오는 값이 distribution ID 이다.

• Vue 프로젝트에 .github/workflows 디렉토리에 deploy.yaml파일을 만들자.
• 나는 vue를 빌드하고 빌드한 후, 방급 발급한 IAM 권한으로 S3에 빌드한 프로젝트를 동기화하고 cloudfront 캐시 무효화를 진행할 것이다.

 

• Github 해당 프로젝트에 Settings으로 이동하면 Secrets and variables 항목으로 가자.
• 발급받은 IAM ID와 KEY, Cloudfront Distribution ID와 배포할 S3 Bucket을 입력하자.

 

• Master 브랜치에 Commit후 Push를 진행해보자.
• Github에 Actions으로 이동하면 초록색 체크 표시를 확인가능하고 Status Success라는 문구가 나타나면 정상적으로 배포가 되었다는 말이다.

• deploy를 클릭해보면 빌드 배포과정 파이프라인을 확인할 수 있다.

 

• S3에 배포가 잘되어있는지 확인해보자.
• S3 Bucket으로 이동하면 마지막 수정날짜가 배포된 시간으로 바뀐것을 알 수 있다.

 

 

• Cloudfront 무효화으로 이동하면 생성된 날짜에 배포시간을 확인 할 수 있다. 
• 정상적으로 배포된 것을 알 수 있다.

 

 

• 내 웹서버 도메인으로 접속해보자. 정상적으로 배포가 된 것을 알 수 있다.
• 홈페이지 대문 문구를 AWS CI CD Build로 바꾸었는데 잘 수정되었다.