개발하는데 다 이유가 있겠지

지난번에 CI/CD를 구축하고 나서 정적 페이지를 호스팅까지 했었다.

오늘은 AWS의 CDN(Content Delivery Network) 서비스인 CloudFront를 이용해 정적, 동적 콘텐츠를 배포하고자 한다.

[CI/CD 구축] / [CloudFront 정리]

---

1. CloudFront 생성

CloudFront 배포 생성

`원본 도메인`을 선택하고, `원본 엑세스`를 원본 엑세스 제어 설정으로 선택하고 `OAC(Origin Access Control)`을 생성한다.

*OAC(Origin Access Control) 목적

• S3 버킷에 대한 직접 접근을 차단
• CloudFront를 통해서만 S3 콘텐츠에 접근 가능하도록 제한

뷰어 프로토콜은 선택사항이지만, HTTPS만 사용하기 위해서 HTTP 요청을 HTTPS로 리다이렉트하도록 설정한다.

`기본값 루트 객체`를 `index.html`로 배포되도록 설정한다.

위와 같이 CloudFront 서비스 연동이 완료됐다.

S3 버킷 정책을 업데이트 아래와 같이 업데이트 해야 한다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket/*",	# 버킷이름으로 수정
            "Condition": {
                "StringEquals": {
                    # AWD ID(12자리)/CloudFront ID
                    "AWS:SourceArn": "arn:aws:cloudfront::your-account-id:distribution/your-distribution-id"
                }
            }
        }
    ]
}

이렇게 설정해도 url에 접속되지 않는 경우에는 오류 페이지 설정에서 에러 발생시 응답 페이지를 설정한다.

S3 + CloudFront 배포 완료

 

---

 

2. CloudFront Invalidation 갱신

CloudFront의 `Cache Invalidation 갱신`을 통해 새로운 프로젝트가 업데이트가 되면 전 세계 엣지 로케이션의 배포된 정적 리소스들을 새로 업데이트된 리소스로 변경해야한다.

   - name: Create CloudFront invalidation
      run: |
        aws cloudfront create-invalidation \
          --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
          --paths "/*"

`.yaml` 파일에 해당 내용을 추가해 `Cache Invalidation 갱신`을 한다.

secret에 새로 `CloudFront ID`(보통 E로 시작)를 등록해야한다.

IAM에서 `CloudFrontFullAccess`권한 정책을 추가해야한다.

성공적으로 S3와 CloudFront 연동이 완료됐다👍👍

 

References
GitHub Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기