GitHub Actions와 AWS S3를 활용한 정적 사이트 자동 빌드 및 배포

핵심 기술

이 콘텐츠는 GitHub Actions를 활용하여 정적 웹사이트 프로젝트를 자동으로 빌드하고 AWS S3 버킷으로 배포하는 CI/CD 파이프라인 구축 방법을 상세히 안내합니다. 외부 플랫폼 없이 자체적으로 CI/CD를 구현하고자 하는 개발자에게 실질적인 도움을 제공합니다.

기술적 세부사항

• CI/CD 개념: Continuous Integration(지속적 통합) 및 Continuous Deployment(지속적 배포)의 원리와 이점을 설명합니다.
• GitHub Actions 워크플로우: .github/workflows/ 디렉토리에 YAML 파일을 작성하여 워크플로우를 정의합니다. Pushes, Pull Requests, Manual/Scheduled Triggers 등 다양한 이벤트에 대한 자동 실행 설정을 다룹니다.
• AWS S3 설정:
  • S3 버킷 생성 및 고유한 이름 부여
  • 퍼블릭 액세스 차단 해제 및 "Block all public access" 설정 해제
  • 정적 웹사이트 호스팅 활성화 (index document 설정)
  • 버킷 정책을 통해 파일에 대한 공개 읽기 권한 부여
• GitHub Actions 워크플로우 구성: Vite-React 프로젝트를 예시로, YAML 파일에 다음 단계를 포함하는 방법을 설명합니다:
  • actions/checkout@v3: 코드 체크아웃
  • actions/setup-node@v3: Node.js 20.x 환경 설정
  • npm install: 의존성 설치
  • .env 파일 생성 (Repository Secrets 활용)
  • npm run build: 프로젝트 빌드
  • aws-actions/configure-aws-credentials@v2: AWS 자격 증명 구성
  • aws s3 sync: 빌드된 파일(dist 폴더)을 S3 버킷으로 동기화 및 배포 (--delete 옵션 포함)
• Repository Secrets 설정: GitHub 저장소의 Settings > Security > Secrets and Variables > Actions에서 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION, AWS_S3_BUCKET, ENV 등의 필수 시크릿을 설정하는 방법을 안내합니다.
• 모니터링 및 검증: GitHub Actions 탭에서 워크플로우 실행 상태를 확인하고, S3 버킷의 "Bucket website endpoint"를 통해 배포된 사이트를 확인합니다.

개발 임팩트

• 수동 배포 프로세스를 자동화하여 시간 절약 및 오류 감소
• 개발자가 코드 작성 및 기능 개발에 더 집중할 수 있는 환경 조성
• 외부 호스팅 플랫폼에 대한 의존성 제거 및 인프라 비용 최적화 가능성
• CI/CD 파이프라인 구축 역량 강화

커뮤니티 반응

(원문에서 구체적인 커뮤니티 반응은 언급되지 않았으나, 이러한 방식의 CI/CD 구축은 개발자 커뮤니티에서 널리 사용되고 긍정적으로 평가받는 표준적인 방법입니다.)

톤앤매너

전문적이고 실무 지향적인 톤으로, 단계별 설명과 코드 예시를 통해 독자가 쉽게 따라 할 수 있도록 구성되었습니다.