본문 바로가기
개발/devOps

[AWS] CloudFront 배포 완전정복!!!

by coking 2023. 5. 16.

이 글은 Route53 등록, ACM발급, S3 배포는 완료 됐다는 가정하에 진행된다. 

 

https://coking.tistory.com/36

 

[AWS] Route53 도메인 등록

이번에 회사에서 cloudflare에 등록되어있던 도메인을 AWS로 아예 옮기는 작업을 진행했는데 Route53에 도메인등록, ACM발급, cloudfront 배포, EC2 API 서버 도메인 연결까지 단계별로 정리할 예정이다! 도

coking.tistory.com

 

https://coking.tistory.com/37

 

[AWS] ACM(AWS Certificate Manager) 발급

ACM이란?? AWS Certificate Manager(ACM)은 AWS 웹 사이트와 애플리케이션을 보호하는 퍼블릭 및 프라이빗 SSL/TLS X.509 인증서와 키를 만들고, 저장하고, 갱신하는 복잡성을 처리합니다. ACM에서 직접 발급하

coking.tistory.com

 

 

aws cloudFront 메뉴 이동후 오른쪽 상단 배포 생성 버튼 클릭 

 

원본 도메인 밑에 돋보기 칸을 클릭하면 자신이 s3에 생성한 버킷 목록이 뜰 것이다. 여기서 자신이 사용할 버킷을 선택하면 된다. 

그럼 위 이미지처럼 경고 문구와 함께 웹 사이트 엔드포인트 사용이라는 권고 문구가 뜰 것인데 무조건 사용해야 한다. 그냥 버킷으로 배포했을 경우 버킷에 새로운 배포가 올라와도 웹 사이트에 적용이 안 되는 문제가 발생하기 때문에 무조건 무조건!! 사용해야 한다. 아무도 알려주지 않아 실제로 겪고 나서 고치게 됐다(처음에는 이유를 몰라서 캐시 설정 바꾸고 진짜 몇 시간 동안 몇 개의 시도를 한 지 모르겠다..) 

 

웹 엔드포인트 사용 버튼을 클릭하면 주소가 바뀌고 원본 액세스라는 메뉴가 사라질 것이다. 

 

다른 옵션들은 그대로 놔두고 뷰어 프로토콜 정책을 Redirect HTTP to HTTPS로 변경하고 나머지는 그대로 놔두면 된다.

 

연결할 함수가 있다면 함수 연결에서 선택하고 없다면 그대로 놔두면 된다. 밑에 옵션은 WAF라고 불리는 서비스를 붙일 거냐인데 

AWS WAF는 고객이 정의한 조건에 따라 웹 요청을 허용, 차단 또는 모니터링(계수)하는 규칙을 구성하여 공격으로부터 웹 애플리케이션을 보호하는 웹 애플리케이션 방화벽입니다.라고 공식에서 설명한다. 필요한 사람들은 사용하고 나는 지금 사용하지 않겠다. 

 

이제 마지막 설정인데 여기서는 동그라미 친 네 군데를 바꿀 것이다. 

 

가격분류에서는 총 3가지 선택이 있는데 이건 웹 사이트 속도를 위한 캐시를 어디에 할 것이냐를 선택하라는 것이다. 당연히 가격 차이도 있기에 상황에 맞게 선택하면 된다. 

 

대체 도메인 이름은 본인이 배포할 사이트 도메인을 입력하면 된다. 

 

SSL 인증서는 미리 발급받은 ACM 발급서를 선택하면 되는데 작은 글씨를 보면 인증서는 반드시 미국 동부(버지니아 북부)리전 (us-east-1)에 있어야 한다.라는 글이 적혀있는데 이거 모르고 서울 리전에 ACM인증서 발급하고 왜 안 뜨냐고 헤맬 수 있으니 주의하자(그런 사람 바로 나....)

 

기본값 루트 객체는 기본으로 반환할 객체 파일 이름을 입력하면 된다.

 

이렇게 본인에 맞게 설정하고 배포 생성

 

마지막으로 Route53 메뉴로 이동후 호스팅 영역에서 배포할 도메인 선택 후 레코드 생성 버튼 클릭 후 레코드 이름에는 cloudFront 배포 시에 입력했던 대체 도메인을 하나씩 입력해서 만들면 된다. 레코드 이름 입력 후 별칭 스위치 클릭 

 

트랙픽 라우팅 대상에서 CloudFront 배포에 대한 별칭 클릭하고 아래 배포선택을 클릭해 보면 아까 cloudFront 배포 시에 넣었던 대체 도메인이 연결될 것이다. 선택 후 레코드 생성 클릭하면 완료 이런 방식으로 자신이 대체 도메인에 등록한 도메인들을 다 레코드 생성해서 등록해 주면 된다. 

 

여기서 추가할 점은 우리는 cloudFront 배포 마지막 옵션에서 IPv6 옵션을 켜기 상태로 배포를 완료하였다. 그럼 IPv6에 해당하는 레코드도 생성해야 하는 데 위 절차와 똑같이 하지만 레코드 유형만 아래와 같이 바꿔주면 된다.  이 부분에 대해서도 다들 켜기 옵션은 하고 레코드 등록은 하지 않던데 IPv6 배포를 하지 않을 것이라면 옵션에서 끄기를 선택하고 배포하면 된다. 

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesEnableIPv6

 

Values that you specify when you create or update a distribution - Amazon CloudFront

If you choose GET, HEAD, OPTIONS or GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE, you might need to restrict access to your Amazon S3 bucket or to your custom origin to prevent users from performing operations that you don't want them to perform. The follo

docs.aws.amazon.com

https://docs.aws.amazon.com/ko_kr/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html

 

도메인 이름을 사용하여 Amazon CloudFront 배포로 트래픽을 라우팅합니다. - Amazon Route 53

변경 사항은 일반적으로 60초 이내에 모든 Route 53 서버로 전파됩니다. 변경 사항을 전파하는 경우 이 절차에서 생성한 별칭 레코드의 이름을 사용하여 트래픽을 CloudFront 배포로 라우팅할 수 있

docs.aws.amazon.com

IPv6 관련 공식문서 

 

이제 해당 도메인으로 접속하면 잘 배포된 것을 확인할 수 있을 것인데 마지막으로 옵션 변경을 해야 한다. 

 

cloudFront 메뉴로 이동후 자신이 배포한 ID를 클릭한다. 

 

오류페이지로 이동후 오른쪽 사용자 정의 오류 응답 생성 버튼 클릭 (이미 만들어놔서 리스트가 존재)

 

HTTP 오류 코드 400, 403번 두 개 만들면 되고 오류 응답 사용자 정의 설정을 통해 경로는 /index.html, 응답 코드는 200번으로 반환하게 설정 이 설정을 하지 않으면 배포가 성공적으로 돼도 새로고침시 바로 에러 

 

마지막으로 무효화 페이지로 이동해 무효화 생성 버튼 클릭 

 

CloudFront 엣지 캐시에서 파일이 만료되기 전에 파일을 제거해야 할 경우, 그러니까 배포를 했을 때 캐시돼 있는 파일 말고 새로운 파일을 적용하게 할 때 사용하는 방법으로 자신이 원하는 경로를 추가해 주면 된다. 나는 전체 파일을 업데이트할 것이기에 전체 경로를 지정 

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

 

파일 무효화 - Amazon CloudFront

아직 진행 중인 무효화를 복사하고 무효화 경로의 목록을 업데이트하여 업데이트된 무효화를 실행하는 경우, CloudFront에서는 복사한 무효화를 중단하거나 삭제하지 않습니다. 무효화 경로가 원

docs.aws.amazon.com

파일 무효화 관련 공식문서 

 

수정)) 이 글을 올릴때 까지만 해도 무효화(invalidation)를 설정해 놓으면 s3업로드시 자동으로 영구적으로 적용된다고 생각하고 있었다. 하지만 무효화 설정은 등록하는 순간 한 번만 작용한다는 사실을 알게 되었다. 그래서 빠른 적용을 위해서는 s3파일마다 상황에 맞는 캐시 설정을 하거나 파일 무효화를 적용하거나 파일 버전 관리를 사용해야 한다. 나는 github action을 사용 중이기에 s3업로드시 마지막 단계에 invalidation처리를 하는 것으로 문제를 해결했다.  aws 람다 서비스를 s3와 연동해서 해결하는 방법도 존재한다. 

 

https://github.com/marketplace/actions/invalidate-aws-cloudfront

 

Invalidate AWS CloudFront - GitHub Marketplace

Invalidate CloudFront distribution paths

github.com

참고한 github action 문서

 

이렇게 하면 cloudFront 배포는 끝이 난다. 최근에 올라온 글들이 잘 없어서 엄청나게 많은 글을 보고 또 직접 배포하고 깨지면서 배웠던 거 같다 아직 완벽하지는 않지만 그래도 많은 분들께 도움이 되길 바란다. 

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

 

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

Amazon CloudFront란 무엇입니까? Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션

docs.aws.amazon.com

AWS CloudFront 공식문서 

 

AWS 공식문서는 잘 모를 때 보면 그렇게 어려울 수 없는데 어느 정도 알고 보면 그렇게 좋을 수가 없다...ㅋ

댓글