CI/CD in AWS: 정적 웹사이트 배포 자동화를 위한 실습 - S3, CloudFront, CodePipeline 및 CodeBuild

Source: Dev.to

번역할 텍스트가 제공되지 않았습니다. 번역이 필요한 전체 내용(코드 블록 제외)을 알려주시면 한국어로 번역해 드리겠습니다.

소개

오늘날 개발 팀은 수동 오류를 줄이고 배포 속도를 높이기 위해 애플리케이션 배포를 자동화하려고 합니다. 이 실험실에서는 CI/CD 파이프라인을 구축하여 저장소에 변경이 발생할 때마다 정적 웹 사이트를 자동으로 배포합니다.

AWS 서비스 사용

• Amazon S3 – 정적 웹사이트를 호스팅합니다.
• AWS CodeBuild – 웹사이트를 빌드하고 패키징합니다.
• AWS CodePipeline – CI/CD 프로세스를 오케스트레이션합니다.
• Amazon CloudFront – 전 세계에 웹사이트를 배포합니다.

실험실이 끝나면, 저장소에 대한 모든 변경 사항이 자동으로 웹사이트에 배포됩니다.

솔루션 아키텍처

시스템 아키텍처는 간단하지만 강력합니다. 저장소가 업데이트될 때마다 파이프라인이 자동으로 실행되어 애플리케이션을 빌드하고 배포합니다.

배포 흐름

1. 웹 사이트용 버킷 생성
2. 버킷을 정적 호스팅으로 설정
3. 공개 액세스 정책 적용
4. CDN 배포 생성 (CloudFront)
5. 예제 저장소 포크
6. 파이프라인 생성 (CodePipeline + CodeBuild)
7. CloudFront 캐시 무효화

웹사이트용 버킷 만들기

단계

1. Amazon S3 콘솔로 이동합니다.
2. **“Create bucket”**을 클릭합니다.
3. 버킷에 고유한 이름을 입력합니다 (예: mi-sitio-web-estatico).
4. 원하는 리전을 선택합니다.
5. 필요에 따라 버킷 옵션을 구성합니다.
6. **“Create bucket”**을 클릭합니다.
7. 사이트를 공개적으로 접근 가능하게 하려면 공개 액세스 차단을 비활성화합니다.

정적 웹사이트 호스팅을 위한 버킷 설정

1. 버킷의 “Properties” 탭으로 이동합니다.
2. **“Static website hosting”**을 클릭합니다.
3. **“Use this bucket to host a website”**을 선택합니다.
4. 인덱스 문서로 index.html을 입력합니다.
5. 변경 사항을 저장합니다.

공개 액세스를 위한 버킷 정책

1. 버킷의 “Permissions” 탭으로 이동합니다.
2. **“Bucket Policy”**를 클릭합니다.
3. 다음 정책을 추가합니다 (your-bucket-name을 버킷 이름으로 교체).

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

CDN 배포 생성

성능 및 전 세계 배포를 개선하기 위해 Amazon CloudFront를 사용할 것입니다.

기본 설정

배포가 생성되면 다음과 같은 도메인을 얻을 수 있습니다:

https://xxxxx.cloudfront.net

이것이 우리 웹사이트의 공개 URL이 됩니다.

예시 저장소 포크

정적 웹사이트 코드를 포함한 저장소를 사용할 것입니다.

단계

1. 원본 저장소를 방문합니다.
2. 오른쪽 상단에 있는 “Fork” 버튼을 클릭합니다.
3. 포크 대상으로 GitHub 계정을 선택합니다.
4. 로컬 머신에 포크를 클론합니다:

git clone https://github.com/tu-usuario/astro-static-site-aws-cicd.git

파이프라인 만들기

이제 AWS CodePipeline을 사용하여 배포 전체 흐름을 자동화하는 파이프라인을 만들겠습니다.

단계별 안내

1. CodePipeline 콘솔로 이동합니다.
2. Create pipeline을 선택합니다.
3. Custom pipeline을 선택합니다.
4. 파이프라인 이름을 입력합니다 (예: web-static-astro-pipeline).
5. 기본 설정(역할 및 artifact 저장소)을 그대로 둡니다.

단계 1 – Source

단계 2 – Build

• 제공자: AWS CodeBuild
• 프로젝트 이름을 website-static-astro 로 생성합니다.
• 리포지토리 루트에 buildspec.yml 파일을 사용합니다.

단계 3 – Deploy

• 제공자: Amazon S3
• 버킷: site-astro-static (또는 만든 버킷)
• 입력 아티팩트: BuildArtifact
• 배포 전에 파일을 추출하는 옵션 **“Extract file before deploy”**을 활성화합니다 (웹사이트 파일이 버킷에 직접 배포되도록).

Source:

CloudFront 캐시 무효화

배포 후, 변경 사항을 즉시 확인하려면 Amazon CloudFront 캐시를 정리해야 합니다.

모범 사례: 환경 변수 사용

단계 1 – CodeBuild에 변수 정의

1. CodeBuild 콘솔로 이동합니다.
2. 생성한 프로젝트(website-static-astro)를 편집합니다.
3. Environment variables 섹션에서 CLOUDFRONT_ID라는 변수를 추가하고, CloudFront 배포 ID 값을 입력합니다.

단계 2 – buildspec.yml에 무효화 명령 추가

post_build:
  commands:
    - echo "CloudFront 캐시 무효화 중..."
    - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_ID --paths "/*"

단계 3 – 권한 설정

CodeBuild 실행 역할에 무효화를 허용하는 다음 정책을 추가합니다:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "cloudfront:CreateInvalidation",
      "Resource": "arn:aws:cloudfront::account-id:distribution/distribution-id"
    }
  ]
}

(account-id와 distribution-id를 해당 값으로 교체하세요.)

파이프라인 테스트

1. 저장소에 변경을 적용합니다 (예: src 내부의 파일을 수정합니다).
2. 커밋하고 푸시합니다.

이것은 파이프라인을 자동으로 트리거하여 업데이트된 웹사이트를 빌드하고 배포합니다. 진행 상황은 CodePipeline 콘솔에서 모니터링할 수 있습니다.

• 파이프라인이 실패하면, CodeBuild 로그를 확인하여 오류를 식별하고 해결하세요.

성공적인 파이프라인 예시

(각 단계에서 “Succeeded” 상태의 스크린샷 또는 설명.)

배포 확인

파이프라인이 정상적으로 실행되면, CloudFront에서 제공한 URL에 접속하여 웹사이트가 이용 가능한지 확인하세요:

https://xxxxx.cloudfront.net

최종 결과

• Commit이 저장소에 푸시되면 → CodePipeline이 자동으로 시작됩니다.
• CodeBuild가 사이트를 빌드하고, 완료되면 CloudFront 캐시를 무효화합니다.
• 사이트가 CloudFront를 통해 전 세계에 공개적으로 배포됩니다.

완료! 이제 AWS에서 정적 웹사이트를 위한 완전 자동화된 CI/CD 파이프라인을 갖게 되었습니다.

# Despliegue del proyecto

- Los archivos se despliegan en **Amazon S3**.  
- **Amazon CloudFront** entrega la nueva versión del sitio.  
- El sitio queda disponible en:  

---

11. 결론

이 실험실에서는 AWS 관리형 서비스를 사용하여 완전한 CI/CD 파이프라인을 구축했습니다. 이 접근 방식은 다음을 가능하게 합니다:

• 배포 자동화.
• 환경 간 일관성 향상.
• 인간 오류 감소.

Amazon S3, Amazon CloudFront, AWS CodePipeline 및 AWS CodeBuild의 조합은 정적 웹 사이트를 자동으로 배포하기 위한 간단하지만 강력한 솔루션을 제공합니다.