프론트엔드 배포하기 - (2) CloudFront가 뭔데? (feat. React + S3 + CloudFront + Route 53)

 CDN(Content Delivery Network)이 뭐길래 사용하는 걸까? 

최근 프론트엔드 개발자라면 한번쯤은 CDN(Content Delivery Network)에 대해서 들어봤을 겁니다.
AWS에서는 CDN을 "콘텐츠 전송 네트워크(CDN)로서 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크"라고 설명하고 있습니다. 좀 더 쉽게 말하자면 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 합니다. 이때 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸립니다. 이때 CDN를 사용하면 웹 사이트 콘텐츠가 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달하게 됩니다. 즉, 글로벌 사용자에게 빠르고 안전하게 웹 애플리케이션을 제공하기 위해 CDN 사용은 필수가 되었습니다. 여러 회사가 CDN 서비스를 제공하며, 대표적인 서비스로는 CloudFront(AWS), Cloudflare, Akamai 등이 있습니다.
이번 글에서는 AWS의 대표적인 CDN 서비스인 Amazon CloudFront의 작동 원리에 대해 알아보고, CloudFront를 활용해 React 애플리케이션을 배포하는 이유와 그 장단점에 대해 자세히 설명해 드리겠습니다.

 

CDN의 동작 원리는 어떻게 될까?

CloudFront의 동작 원리를 알아보기에 앞서 우선 CDN의 동작 원리를 미리 알아보겠습니다.
CDN(Content Delivery Network)은 콘텐츠를 빠르게 제공하기 위해 전 세계에 분산된 지리적 위치에 여러 접속 지점(POP, Points of Presence) 또는 엣지 서버를 배치하여 작동합니다. 이 시스템은 주로 캐싱, 동적 가속, 그리고 엣지 로직 계산이라는 세 가지 핵심 원리에 기반하고 있습니다. 이러한 메커니즘을 통해 사용자에게 빠른 응답을 제공하고, 서버의 부하를 줄이며, 사용자 경험을 개선할 수 있습니다

 

• 캐싱(Caching) :  캐싱은 웹사이트의 정적 콘텐츠(ex. 이미지, CSS, JavaScript, HTML 파일 등)를 여러 서버에 저장하여, 사용자에게 더 빠르게 제공하는 프로세스입니다.
  
  • 캐싱의 과정
    1. 최초 요청: 사용자가 웹 콘텐츠를 요청하면, 이 요청은 원본 서버(오리진 서버)에 도달하고, 해당 서버는 사용자에게 콘텐츠를 제공함과 동시에 **가장 가까운 CDN POP(엣지 서버)**에도 그 콘텐츠의 복사본을 보냅니다.
    2. 캐싱된 콘텐츠 제공: 그 후 동일 지역에서 다른 사용자가 동일한 콘텐츠를 요청할 경우, 캐싱된 서버에서 직접 응답을 제공하게 됩니다. 이 과정 덕분에 원본 서버에 대한 요청 횟수가 줄어들고, 로딩 속도가 크게 향상됩니다.
• 동적 가속(Dynamic Acceleration) : 동적 가속은 사용자마다 다를 수 있는 동적 콘텐츠에 대한 요청 응답 시간을 단축시키는 기술입니다. 동적 콘텐츠는 사용자에 따라 맞춤형으로 생성되기 때문에 캐싱이 어려운 경우가 많습니다. 예를 들어, 사용자 계정 정보나 실시간 데이터(주식 가격, 실시간 채팅 메시지 등)는 캐싱할 수 없지만, 동적 가속을 통해 전송을 최적화할 수 있습니다.
  • 동적 가속의 작동 원리
    1. 최적화된 서버 간 연결: CDN 서버는 사용자 요청을 받은 후, 가장 빠른 경로를 통해 오리진 서버와 연결하여 응답 시간을 단축합니다. 이 과정에서 네트워크 경로를 최적화하여 지연 시간을 줄입니다
    2. 연결 재사용: 여러 사용자가 동적 콘텐츠를 요청할 때, 기존의 서버 연결을 재사용하여 새로운 연결을 생성할 필요 없이 빠르게 응답할 수 있습니다.
• 엣지 로직 계산(Edge Logic Computation) : 엣지 로직 계산은 엣지 서버에서 간단한 계산이나 로직 처리를 수행하는 것을 말합니다. CDN은 단순히 콘텐츠를 제공하는 것을 넘어서, 사용자와 가까운 엣지 서버에서 웹 애플리케이션의 일부 로직을 처리하여 응답 시간을 줄일 수 있습니다.
  • 엣지 로직 계산의 예시
    1. A/B 테스트 로직: 사용자 세그먼트에 따라 다른 콘텐츠를 제공해야 할 경우, 원본 서버 대신 엣지 서버에서 해당 로직을 처리하여 응답 시간을 단축할 수 있습니다.
    2. 보안 및 인증 처리: 사용자의 요청을 엣지 서버에서 미리 검증하거나 필터링하여 원본 서버로 전달하기 전에 보안을 강화할 수 있습니다.

CDN은 이러한 세 가지 주요 원리를 통해 사용자에게 더 빠르고 안정적인 콘텐츠 제공을 목표로 합니다.

캐싱을 통해 정적 콘텐츠는 엣지 서버에 저장하여 빠르게 제공하고, 동적 가속을 통해 캐싱할 수 없는 콘텐츠도 최적화된 경로로 전송하여 응답 시간을 단축합니다. 또한 엣지 로직 계산을 통해 엣지 서버에서 간단한 로직을 처리함으로써 원본 서버의 부하를 줄이고 사용자에게 더 빠른 응답을 제공할 수 있습니다.

CloudFront는 어떤 원리로 동작하는 걸까?

Amazon CloudFront는 AWS의 대표적인 CDN서비스로, 웹 애플리케이션이나 동영상 스트리밍 같은 정적 및 동적 콘텐츠를 전 세계 사용자에게 빠르고 안전하게 전달하는 역할을 합니다. CloudFront는 전 세계에 분산된 *엣지 로케이션(Edge Location) 을 통해 사용자와 가까운 곳에서 콘텐츠를 제공하여 지리적 거리에 따른 로딩 지연을 최소화합니다.

 

 

*엣지 로케이션(Edge Location) : CloudFront 서비스가 콘텐츠를 캐싱하고 Client에게 제공하는 지점 혹은 캐시 서버를 의미한다. AZ(Availability Zone)와는 다른 AWS 데이터 센터로, AZ보다 훨씬 더 많이 전 세계에 배치되어 있다. 

CloudFront에서 사용자의 요청이 처리되는 흐름 정리

1. 사용자의 요청
   사용자가 웹사이트에 접속하거나 웹 애플리케이션을 실행하면, 그 요청은 가장 가까운 Edge Location으로 전달됩니다. Edge Location은 전 세계 주요 도시에 분포되어 있으며, 사용자가 지리적으로 가까운 곳에서 콘텐츠를 받을 수 있도록 설계되었습니다.
   
   
2. Edge Location에서 캐시 확인
   Edge Location은 요청된 콘텐츠가 캐싱되어 있는지 확인합니다. 만약 요청된 콘텐츠가 이미 Edge Location에 캐싱되어 있다면, 오리진 서버까지 가지 않고 바로 Edge Location에서 콘텐츠를 사용자에게 제공하게 됩니다. 이 과정을 통해 지연 시간(Latency)이 최소화됩니다.
   
   
3. **리전 엣지 캐시(Regional Edge Cache)
   요청된 콘텐츠가 Edge Location에 캐시되어 있지 않다면, 요청은 리전 엣지 캐시(Regional Edge Cache)로 전달됩니다. 리전 엣지 캐시는 Edge Location보다 더 큰 캐시 스토리지를 보유하고 있어 콘텐츠가 더 오래 저장될 수 있습니다.
4. 리전 엣지 캐시는 오리진 서버와 Edge Location 사이에서 중간 캐시 역할을 하며, 콘텐츠가 자주 요청되지 않더라도 더 오래 저장되기 때문에 오리진 서버에 요청하는 횟수를 줄이는 데 중요한 역할을 합니다.
   
   
5. 오리진 서버 요청
   만약 리전 엣지 캐시에도 요청한 콘텐츠가 없다면, 비로소 CloudFront는 오리진 서버(Origin Server)로 요청을 전달합니다. 오리진 서버는 주로 Amazon S3 버킷, EC2 인스턴스, 또는 외부 서버일 수 있습니다. 오리진 서버는 요청된 콘텐츠를 제공하고, 이 콘텐츠는 다시 리전 엣지 캐시와 Edge Location에 저장되어 다음 요청 시 더 빠르게 제공됩니다.
   
   **리전 엣지 캐시의 역할
   - 캐시 유지 시간: 리전 엣지 캐시는 Edge Location보다 캐시를 더 오래 보관합니다. 콘텐츠가 자주 요청되지 않더라도 리전 엣지 캐시에 저장된 덕분에, 오리진 서버로의 직접 요청을 줄일 수 있습니다.
   - 캐시 스토리지 용량: 리전 엣지 캐시는 Edge Location보다 캐시 스토리지 용량이 큽니다. 이는 더 많은 콘텐츠를 저장할 수 있음을 의미하며, 콘텐츠가 자주 변경되지 않는 경우에도 캐시가 오래 유지될 수 있습니다.
   - 오리진 서버 부담 감소: 리전 엣지 캐시는 오리진 서버에 대한 요청을 줄여 서버 부하를 낮추고, 더 나은 성능을 제공합니다.

 

CloudFront를 사용해서 얻는 실질적인 이점은 무엇일까?

이제 충분히 CloudFront가 무엇인지는 감을 잡으셨을 텐데요. 그렇다면 CloudFront를 사용해서 얻는 실질적인 이점에는 무엇이 있는지도 살펴보도록 하겠습니다.

 

• 향상된 성능 : CloudFront는 AWS 네트워크 인프라를 기반으로 동작하여 사용자 요청이 반드시 통과해야 하는 *네트워크의 수를 줄여 성능을 향상시킵니다. 이로 인해 *파일의 첫 바이트를 로드하는 데 걸리는 지연 시간(Latency)이 줄어들고, 콘텐츠가 사용자에게 더 빨리 전송될 수 있습니다.
  • 지연 시간 감소: 사용자와 가까운 엣지 로케이션에서 콘텐츠를 제공하므로, 사용자와 오리진 서버 간의 물리적 거리를 줄여 로딩 시간을 최소화할 수 있습니다.
  • 빠른 데이터 전송 속도: CloudFront는 사용자에게 빠른 콘텐츠 전송 속도를 제공하며, 특히 대용량 파일(예: 이미지, 동영상)의 전송 속도를 크게 향상시킵니다.

*네트워크의 수를 줄인다는 것은?
인터넷에서 데이터를 주고받을 때, 사용자와 서버 사이에는 여러 네트워크 장비와 경로가 존재합니다. 서버는 이 네트워크 경로를 거쳐 사용자에게 데이터를 전달하는데, 경로가 복잡하거나 길수록 그만큼 시간이 더 걸립니다. 이를 네트워크 홉(Network Hop)이라고도 부릅니다. CloudFront는 AWS의 글로벌 인프라를 사용해서 사용자와 서버 사이에 거치는 네트워크 경로(네트워크 홉)의 수를 줄이는 역할을 합니다. 이렇게 하면 데이터가 더 적은 경로를 통해 사용자에게 도달할 수 있어 성능이 더 빨라지는 효과를 가져옵니다.

*첫 바이트를 로드하는 시간이 줄어드는 이유?

"파일의 첫 바이트를 로드하는 시간"이 줄어든다는 의미는, 웹페이지나 파일을 불러올 때 첫 번째 데이터가 사용자에게 전달되기까지 걸리는 시간이 단축된다는 의미입니다. 왜냐하면 CloudFront는 사용자 가까운 엣지 로케이션에 데이터를 미리 캐싱해두기 때문에, 원본 서버에서 데이터를 요청할 필요 없이 바로 첫 번째 데이터를 빠르게 보낼 수 있습니다.

 

 

• 높은 안정성과 가용성 : CloudFront는 전 세계에 분포된 수많은 엣지 로케이션을 통해 콘텐츠를 캐싱합니다. 이 덕분에 오리진 서버에 장애가 발생하거나 트래픽이 급증하더라도 안정적인 콘텐츠 제공이 가능합니다.
  • 캐싱을 통한 안정성: 콘텐츠의 사본이 여러 엣지 로케이션에 캐시되어 있어, 오리진 서버에 문제가 발생하더라도 가까운 엣지 서버에서 콘텐츠를 제공할 수 있습니다. 이로 인해 서비스 중단이 최소화됩니다.
  • 높은 가용성: CloudFront는 전 세계 주요 도시에 위치한 엣지 로케이션을 통해 고가용성(High Availability)을 보장합니다. 이는 특히 글로벌 웹 애플리케이션에서 중요한 요소입니다.

• 보안성 강화 : CloudFront는 강력한 보안 기능을 통해 사용자의 콘텐츠와 데이터를 보호합니다. 오리진 서버와의 연결은 HTTPS를 통해 종단 간 암호화가 가능하며, DDoS 공격 방어 및 사용자 지정 보안 설정도 지원합니다.
  • HTTPS 지원: CloudFront는 오리진 서버와 사용자 간의 데이터 전송을 SSL/TLS 암호화를 통해 보호합니다. 이를 통해 데이터가 안전하게 전달되며, 중간에서 데이터가 탈취되거나 조작될 위험이 크게 줄어듭니다.
  • 서명된 URL 및 쿠키: CloudFront는 서명된 URL 및 서명된 쿠키 기능을 제공하여, 인증된 사용자에게만 프라이빗 콘텐츠를 제공할 수 있습니다. 이를 통해 민감한 데이터를 안전하게 보호할 수 있으며, 특정 사용자에게만 접근 권한을 부여할 수 있습니다.
  • DDoS 방어: CloudFront는 AWS Shield와 통합되어 DDoS(Distributed Denial of Service) 공격을 방어할 수 있습니다. 이를 통해 오리진 서버로의 악의적인 트래픽을 차단하고 서비스 중단을 방지할 수 있습니다.

---

3. 보안성 강화

CloudFront는 강력한 보안 기능을 통해 사용자의 콘텐츠와 데이터를 보호합니다. 오리진 서버와의 연결은 HTTPS를 통해 종단 간 암호화가 가능하며, DDoS 공격 방어 및 사용자 지정 보안 설정도 지원합니다.

• HTTPS 지원: CloudFront는 오리진 서버와 사용자 간의 데이터 전송을 SSL/TLS 암호화를 통해 보호합니다. 이를 통해 데이터가 안전하게 전달되며, 중간에서 데이터가 탈취되거나 조작될 위험이 크게 줄어듭니다.
• 서명된 URL 및 쿠키: CloudFront는 서명된 URL 및 서명된 쿠키 기능을 제공하여, 인증된 사용자에게만 프라이빗 콘텐츠를 제공할 수 있습니다. 이를 통해 민감한 데이터를 안전하게 보호할 수 있으며, 특정 사용자에게만 접근 권한을 부여할 수 있습니다.
• DDoS 방어: CloudFront는 AWS Shield와 통합되어 DDoS(Distributed Denial of Service) 공격을 방어할 수 있습니다. 이를 통해 오리진 서버로의 악의적인 트래픽을 차단하고 서비스 중단을 방지할 수 있습니다.

CloudFront는 전 세계적으로 웹 애플리케이션의 성능을 극대화하고, 보안을 강화하며, 비용 효율성을 제공하는 강력한 CDN 서비스입니다. 전 세계 엣지 로케이션을 통한 빠른 콘텐츠 전송, AWS 서비스와의 통합, 유연한 캐싱 정책 덕분에 CloudFront는 글로벌 사용자에게 최적화된 경험을 제공할 수 있습니다. 또한, 보안 및 확장성, 비용 절감 측면에서도 매우 우수한 솔루션으로, 대규모 트래픽을 처리해야 하거나 보안이 중요한 프로젝트에서 특히 강력한 선택지입니다.

 

CloudFront의 단점은 없을까?

1. 초기 설정 복잡성: CloudFront는 다양한 설정 옵션을 제공하지만, 처음 설정할 때 TTL(캐시 유지 시간)이나 오리진 설정, HTTPS 인증서 적용 등의 과정이 복잡할 수 있습니다. 잘못된 설정은 캐싱 문제나 성능 저하로 이어질 수 있습니다.
2. 비용: CloudFront는 대규모 트래픽을 처리할 때 비용이 빠르게 증가할 수 있습니다. 특히 전 세계적으로 엣지 로케이션을 활용할 경우 데이터 전송 비용이 높아질 수 있어, 중소 규모의 프로젝트에는 부담이 될 수 있습니다.
3. 콘텐츠 갱신 지연: 캐싱된 콘텐츠는 TTL 설정에 따라 만료되기 때문에, 자주 업데이트되는 콘텐츠의 경우 변경 사항이 바로 반영되지 않고, 캐시가 만료될 때까지 갱신되지 않는 경우가 있습니다.
4. 지리적 한계: CloudFront는 전 세계적으로 엣지 로케이션이 분포해 있지만, 특정 지역(예: 일부 개발도상국)에서는 엣지 로케이션이 상대적으로 적을 수 있어 성능 이점이 줄어들 수 있습니다.