이번 글에서는 일반 웹 프로젝트 구조에 CI/CD를 적용하는 방법에 대해 알아보겠습니다.
이번 글에서 다루는 CI/CD 파이프라인의 대략적인 흐름은 다음과 같습니다.
1. GitHub에서 소스 코드 푸시
- 개발자가 코드를 작성한 후 GitHub에 푸시(Git Push)합니다.
2. GitHub Actions에서 자동화 작업 실행
- 푸시가 트리거가 되어 GitHub Actions가 실행됩니다.
- 여기에서 설정된 워크플로우에 따라 코드를 빌드(컴파일 또는 파일 생성)합니다.
- 빌드된 파일(웹사이트의 HTML, CSS, JS 등)을 AWS S3(스토리지 서비스)로 업로드합니다.
3. CloudFront 캐시 무효화 명령
- S3에 새 파일이 업로드되면 GitHub Actions는 CloudFront(콘텐츠 배포 네트워크)에 캐시를 무효화하라는 명령을 보냅니다.
- CloudFront는 기존에 저장된 콘텐츠(캐시)를 새 파일로 업데이트하도록 준비합니다.
4. CloudFront에서 캐시 무효화 실행
- CloudFront가 캐시를 무효화합니다.
- 이렇게 하면 사용자들이 웹사이트에 접근할 때 최신 파일(새로 배포된 콘텐츠)을 볼 수 있습니다.
- 사용자가 항상 최신 버전의 웹사이트를 볼 수 있게 만드는 과정입니다.
GitHub Repository 생성 후 프로젝트 올리기
- 간단한 웹 프로젝트를 하나 생성한 후 깃허브 리포지토리에 올립니다.
S3 세팅 및 웹 호스팅 설정
1. S3 세팅
- S3 버킷 만들기 - 버킷 이름 작성
- 모든 퍼블릭 엑세스 차단 체크 해제 - 주의 사항 체크 - 페이지 하단의 버킷 만들기 선택하여 버킷 생성 완료
- S3 권한 정책 편집 - 리소스 추가
- S3 권한 정책 편집 -
S3:GetObject권한 추가
2. S3 웹 호스팅 설정
- 생성한 S3 버킷 선택 - 속성 - 정적 웹 사이트 호스팅 편집 선택
- 정적 웹 사이트 호스팅 활성화 체크
- 기본 웹 페이지는
index.html(본인이 생성한 프로젝트 내 파일명에 맞게 작성) - 페이지 하단의 변경 사항 저장 선택하여 편집 완료
S3에 프로젝트 파일 업로드
- S3 버킷에 프로젝트 파일 업로드
CloudFront 연결
- CloudFront - 배포 생성
- 앞에서 생성한 S3 버킷 선택 - 웹 사이트 엔드포인트 사용 선택
- 웹 애플리케이션 방화벽 부분에서 보안 보호 비활성화 선택
- 설정 부분에서 북미, 유럽, 아시아, 중동 및 아프리카에서 사용 선택
GitHub Actions를 위한 IAM 생성
- IAM - 사용자 생성 - 사용자 이름 작성
- S3, CloudFront 권한 부여
- 생성한 사용자 선택 - 보안 자격 증명 - 액세스 키 만들기
- AWS 외부에서 실행되는 애플리케이션 선택
- 생성 완료
- 액세스 키와 비밀 액세스 키는 반드시 별도로 저장해야 함
GitHub Actions Secret 값 설정
- 액세스 키, 비밀 액세스 키를 GitHub Actions Secret 값으로 설정합니다.
GitHub Actions 코드 작성
- 다음과 같이 워크플로 코드를 작성합니다.
name: Deploy To S3
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Github Repository 파일 불러오기
uses: actions/checkout@v4
- name: AWS Resource에 접근할 수 있게 AWS credentials 설정
uses: aws-actions/configure-aws-credentials@v4
with:
aws-region: ap-northeast-2
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
- name: S3 기존 파일들 전체 삭제 후 새로 업로드
run: |
aws s3 rm --recursive s3://{s3 버킷 이름}
aws s3 cp ./ s3://{s3 버킷 이름}/ --recursive
- name: CloudFront 캐시 무효화
run: aws cloudfront create-invalidation --distribution-id {cloudfront 배포 ID} --paths "/*"결과 확인
- GitHub Actions에서 설정한 CloudFront 무효화가 잘 작동하는 것을 확인할 수 있습니다.
donggyun_ee