[Network] AWS S3, CloudFront로 CDN 구축하기

 

안녕하세요 

오늘은 AWS를 이용해 CDN을 구축하는 가장 최신 방법을 알려드리겠습니다.

 

---

CDN을 구축하려는 이유

 

제가 CDN을 진행하려는 이유는 이미지 깜빡임 이슈 때문이였습니다.

저희 프로젝트에서 차량 정보에 대한 이미지를 가져와 화면에 보여줘야 하는데

이미지 캐러셀에서 움직일 때마다 이미지가 깜빡거리는 현상이 잦았고, 

이를 해결하기 위해 모든 이미지를 용량이 작은 webp로 변경하였지만 그럼에도 제가 원하는 만큼의 해결은 되지 않았습니다.!

 

 

저희가 사용하는 대부분의 이미지는 AWS S3 버킷에 저장하고 관리하고 있었기 때문에,

찾아보다가 한 팀원분이 CDN 이야기를 해주었습니다.

CDN의 개념만 알고 있었을 뿐, 실제 사용도 어떻게 구축하는지 방법도 모르고 있었지만

찾아보니 CDN은 캐싱을 통해 이미지를 빠르게 로드해줄 수 있기 때문에 하나의 해결책이 될 수 있겠다고 판단하여 직접 구축해보기로 했습니다.

 

 

1. S3 버킷 생성하기

 

 

저희는 이미 정적 파일들을 저장하는 s3 버킷이 존재하였기에 새롭게 버킷을 생성하지는 않았습니다.

 

대신 아래 AWS 공식 문서에 잘 설명이 되어 있으니 참고하시면 좋을 것 같습니다!

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/create-bucket-overview.html

버킷 생성 - Amazon Simple Storage Service

 

 

 

2. Cloudfront Distributions 생성하기

 

 

먼저, Create distribution 버튼을 클릭해줍니다.

 

 

아래 화면이 뜨면 Origin domain에 생성해둔 s3 버킷을 연결해줍니다.

 

 

다른 설정들은 따로 하지 않고 아래 설정에서 보안 관련 설정만 체크해줍니다.

 

찾아보니 WAF를 활성화 한다면 추가 비용이 발생할 수 있다고 하여 저는 비활성화 하였습니다.

하지만, 보안적으로 중요한 콘텐츠라면 상황에 맞게 활성화 여부를 선택하시면 될 것 같습니다.

 

 

생성 버튼을 누르면 조금 시간이 지난 후, 생성이 완료된 것을 확인할 수 있습니다.

 

 

3. OAC생성하기

 

하지만, cloudfront domain으로 사진에 접근하려고 하면 이런 오류가 발생하는 것을 확인할 수 있습니다.

 

이는 s3 버킷 정책에서 cloudfront에서의 접근을 허용하지 않아서 발생하는 문제였습니다.

 

 

 

따라서, s3 버킷 정책을 수정하기 위해 먼저, OAC를 생성해 주어야 합니다.

OAC(Origin Access Control)는 CloudFront에서 S3 버킷에 대한 요청을 서명하여 안전하게 접근할 수 있도록 하는 기능입니다.

 

 

이를 위해 만들어둔 cloudfront의 origins 탭에서 현재 존재하는 origins를 클릭하고 edit 버튼을 눌러줍니다.

 

그럼 Origin access가 Public으로 설정이 되어 있을 텐데

2번째를 선택하고 create new OAC를 클릭해줍니다.

 

 

 

그럼 다음과 같은 모달이 뜨고 Create를 눌러주시면 됩니다.

그럼 작은 alert창과 함께 policy를 변경했다고 알려주고 이 때 아마 확인을 누르면 Policy가 복사됩니다.

 

 

복사된 policy를 S3 bucket policy에 넣어주고

 

그럼 CDN 구축과 S3 연동이 완료됩니다.

 

 

따라서, 이전 이미지는 

s3://[s3 버킷 이름]/main-page/charging_background_image.svg

이런 url을 가졌다면

대신 이렇게 cloudfront에서 이미지를 가져올 수 있는 url이 생성된 것을 확인할 수 있습니다.

[cloudfront 도메인 네임]/main-page/charging_fast_image.svg

 

 

 

 

참고

https://velog.io/@ygreenb/AWS-S3-CloudFront%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-CDN-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0