Next.js 프로젝트를 진행하면서 많이 들어본 CDN란 무엇일까? Vercel로 Next.js를 배포하면 CDN에 빌드 파일인 .next가 올라간다고 하는데, 이 말도 잘 이해가 되지 않았다. 그래서 공부해 보기로 했다.

출처 : 토스 페이먼츠
CDN에 대해 정리 하기 앞서, 내가 궁금한 것이 무엇인지 우선 리스트업 해보았다.
•EC2와 같은 가상 서버와 같은 건가?
•그렇다면, .next 폴더는 가상 서버에 배포되는 건가?
•Origin 서버와 차이는 뭔가?
•왜 필요하지?
# CDN이란?
Content Delivery Network, 직역하면 콘텐츠 전송 네트워크로 웹 콘텐츠를 전 세계에 흩어진 서버들에 분산하여 저장하는 기술을 말한다.
왜 필요할까?
모든 건 물리적인 거리 문제에서 시작한다고 볼 수 있다. 서울에 서버가 있다고 가정해 보자. 한국 사용자는 서울 서버까지 약 20ms 밖에 걸리지 않지만, 미국 사용자는 약 300ms가 걸린다. 단순히 거리 차이로만 약 15배의 지연이 발생하는 것이다. 빛의 속도는 일정하기 때문에, 데이터가 태평양을 건너는 시간은 물리적으로 줄일 수 없다. 문제는 이 지연이 요청마다 누적된다는 점이다.
웹 페이지를 불러오려면 HTML 파일 하나와 최소 JS, CSS 파일 하나씩 요청해야 한다. 한국에서는 20ms 밖에 걸리지 않기 때문에 금방 웹 페이지를 불러올 수 있지만, 미국에서는 하나의 파일당 약 15배 이상이 지연되기 때문에 사용자 경험은 최악일 것 이다.
결국 거리를 줄일 수 없다면, 사용자와 가까운 거리에 파일을 미리 두는 방법이 필요하다. 이것이 바로 CDN(Content Delivery Network)이다. CDN은 단순한 개념이 아니라, 실제 전 세계에 분산된 물리적인 서버들의 네트워크다. 이런 시스템은 Cloudflare, AWS CloudFront, Akamai 등 여러 회사가 지원해 주고 있다. 그리고 이 서버들은 엣지 서버(Edge Server)라고 부른다.
# EC2와 CDN의 차이
Next.js 프로젝트를 Vercel에 배포하게 되면 .next는 CDN 서버에 올라간다는 설명을 들었을 땐 ‘아, 그럼 CDN은 가상 서버와 같은 역할을 하는 건가?’ 라고 생각이 들었다. 하지만 CDN은 전 세계에 분산된 엣지 서버들의 네트워크 전체를 의미하며, 엣지 서버는 실제로 콘텐츠를 캐싱하고 사용자에게 서빙하는 물리적인 서버다. EC2는 범용 컴퓨팅을 위한 가상 머신으로, 사용자가 SSH 접속을 통해 직접 소프트웨어를 설치하고 제어할 수 있다. 반면, CDN은 정적 파일 전달에 특화된 네트워크다. 개발자는 CDN 설정만 제어할 수 있으며, 파일을 직접 실행하거나 환경을 제어할 수 없다.
.next 폴더와 배포 구조
Next.js를 빌드하면 .next폴더가 생성된다. 이 폴더는 빌드 결과물로, 정적 파일과 서버 코드가 함께 포함되어 있다. Vercel은 이 폴더를 분석해 정적 파일은 CDN으로, 동적 코드는 Serverless Functions로 각각 분리해 배포한다.
정적 파일은 전 세계 엣지 서버들(CDN)에 복사되어 캐싱된다. 반면, API 라우트나 SSR 페이지 등 동적 코드는 특정 리전의 Serverless 환경에서 실행된다. 즉, 정적 콘텐츠는 전 세계 어디서나 빠르게 제공되고, 동적 처리는 필요한 곳에서만 수행된다.
# Origin 서버와 엣지 서버
CDN의 구조를 이해하려면 Origin 서버와 엣지 서버의 관계를 알아야 한다. 오리진 서버는 원본 파일을 보관하고 동적 처리를 담당한다. 일반적으로 한 리전에만 존재하며, EC2나 서버리스 환경이 여기에 해당한다. 반면 엣지 서버는 Origin의 복사본을 서빙하는 전 세계에 분포된 분산 노드이다.
즉, 미국 사용자가 서울 서버에 접근하기 전 가까운 엣지 서버를 우선 탐색하고 캐싱된 파일이 없다면 Origin 서버로 리다이렉트 하거나 가까운 엣지 서버를 다시 탐색하게 된다.
# 캐싱과 성능
CDN의 핵심은 캐싱(caching)이다. 사용자가 최초로 서버에 요청을 보내면 엣지 서버에 캐싱된 파일이 없기 때문에 Origin 서버에서 파일을 가져온 후 엣지 서버 디스크에 저장한다. 이후 같은 파일을 요청하는 사용자는 원본 서버가 아닌 엣지 서버에서 즉시 응답받는다. 첫 요청(캐시 미스)은 느리지만, 두 번째부터는 캐시 히트로 매우 빠르게 웹 콘텐츠를 서빙할 수 있게 된다.
# 마무리
CDN은 전 세계 엣지 서버에서 정적 파일의 복사본을 두고, 사용자와 가장 가까운 서버에서 빠르게 제공하는 서버 네트워크다. Origin 서버는 원본을, CDN은 복사본을 담당하며 Origin 서버의 트래픽을 줄이고 사용자에게 더 빠르게 웹 콘텐츠를 빠르게 서빙할 수 있게 만들어주는 시스템이다
CDN의 본질은 물리적인 거리는 줄일 수 없다면, 데이터를 옮길 거리는 줄여버리자.로 볼 수 있겠다.
다음에는 Next.js와 CDN의 연결점에 대해 알아보려고 한다.