CDN(Content Delivery Network): 정적파일 캐싱

박수빈98 2025. 4. 28. 23:20

2025. 4. 28. 23:20

세미프로젝트 시작하면서 자신있게 잘 알지도 못하는데 어디서 들어본건 있어서 CDN 서버도 만들어 보기로 했었다.

1차 목표를 완료 했으니 CDN까지 만들어 보기위해 이게 뭔지 제대로 알아보자

CDN이란?

전 세계에 분산된 서버 네트워크를 이용해서, 사용자에게 더 빠르고 안정적으로 콘텐츠(이미지, 동영상, 파일 등)를 제공하는 기술

가까운 서버(Edge 서버)에서 바로 제공하므로써 빠른 응답 속도 + 서버 부하 분산 + 장애 대응이 가능

동작흐름

사용자가 웹사이트 접속 요청
DNS*가 가장 가까운 CDN 서버를 찾아줌
엣지 서버에 캐시된 콘텐츠가 있으면 바로 응답
없으면 원본 서버에서 가져와 저장 후 응답

DNS가 가장 가까운 CDN 서버를 찾아준다는 의미

CDN이 없는 경우, DNS는 해당 도메인의 오리진 서버를 그냥 알려줌

하지만 CDN이 있고, 해당 요청이 CDN에 캐싱을 하는 내용*이라면

DNS가 CDN의 주소를 먼저 알려줌

만약 CDN에 없다?

-> DNS로 다시 질의하는게 아닌 CDN에서 다음 CDN이든 오리진 서버든 대신 요청해줌

없던 걸 오리진에서 가져오면서 캐싱하고 사용자에게 주는 것

서로 목적은 다르지만 이 부분에서 프록시와 형태가 유사함

사용자는 CDN만 볼 수 있고, CDN이 오리진과 연결되어 있다.

여기서 어떤걸 캐싱할까?

이미지, 비디오 스트리밍
웹사이트 정적 파일(HTML, CSS, JS)
다운로드 파일
API 응답

정적 컨텐츠 관리 방식

여기서 캐싱할 콘텐츠를 관리하는게 성능을 크게 좌지우지 한다.

CDN 관리 소프트웨어는 지능형 알고리즘과 머신 러닝을 사용하여 콘텐츠 요청을 예측하고, 필요하기 전에 콘텐츠를 CDN으로 가져오며, 원본 서버의 변경된 콘텐츠와 동기화하고, 인식된 성능을 향상시킵니다.

정적 콘텐츠를 수동으로 저장해 놓을 지, 캐싱하는 알고리즘을 통해 자동으로 관리할 지 선택해 운영해야한다.

1. 수동 저장 (Pre-caching, Origin Push)

콘텐츠를 미리 직접 CDN에 업로드
예: 이미지, JS/CSS, 동영상 파일 등을 CDN 스토리지에 수동으로 올려서 배포하는 경우.
장점: 항상 최신 파일이 CDN에 존재하고, 요청이 없어도 준비되어 있음.
단점: 새 버전이 나오면 사람이 직접 업데이트하거나 자동화 스크립트로 갱신해야 함.

예시: AWS S3 + CloudFront를 쓰는데 S3에 파일을 미리 저장하는 경우

2. 자동 캐싱 (Pull 방식, Cache Miss 시 Origin Fetch)

사용자가 처음 요청할 때 CDN이 오리진(원본 서버)에서 파일을 가져와서 자동 저장
이후에는 CDN이 자체적으로 캐시를 관리해서 재사용합니다.
장점: 필요할 때만 저장되니 저장 공간과 관리 비용이 절약됨.
단점: 처음 요청하는 사용자는 캐시가 없어 느릴 수 있음. (Cold Start)

예시: 일반적인 CloudFront, Akamai, Cloudflare의 Pull CDN 모드

3. 혼합 방식

중요한 콘텐츠는 수동으로 미리 저장하고,
나머지는 요청될 때마다 자동 캐싱하는 혼합 전략도 사용

자동 캐싱의 경우 캐싱하고 만료 시켜 자동으로 운영해야한다.

이때 캐시 무효화/ 만료 시키는 방법을 선택해야 한다.

TTL(Time To Live): 정적 파일을 캐시한 후 얼마 동안 유지할지 설정 (예: 1시간, 1일)
Cache-Control, Expires Header: 오리진 서버가 응답 헤더에 명시해주기도 함.
Least Recently Used (LRU) 알고리즘: 오래 안 쓰인 파일부터 캐시 삭제.
수동 Invalidate 요청: 개발자가 CDN에게 "이 파일 다시 받아와!" 명령할 수도 있음.

Amazon CloudFront

AWS가 제공하는 CDN 서비스이다.

항목	설명
네트워크	전 세계 600개 이상 Edge Location 보유
요금	사용량 기반 (GB당 비용)
특징	AWS S3, EC2, Load Balancer, MediaStore 등과 쉽게 연동 가능
HTTPS 지원	자체 SSL 인증서 가능, 무료 제공 가능
보안 기능	AWS Shield, WAF(Web Application Firewall) 연동 가능
캐시 제어	TTL(Time to Live) 설정 가능

CloudFront 동작 흐름

CloudFront 배포(Distribution) 생성
Origin 설정 (ex: S3 버킷, EC2, ALB)
Route53이나 DNS에 CloudFront 도메인 등록
사용자는 CloudFront 경유해서 빠르게 콘텐츠 제공받음

아직 AWS를 실제로 이러한 서비스를 써보지 못했지만,

서버를 만들어 파일을 통해 설정하는 것보다 간편할 것 같다.

프로젝트에서 CDN 서버 만들기

준비물

서버 하나 + nginx

캐싱 방식은 수동으로 썸네일 이미지를 넣고 이 곳에서 받아 오는 간단한 방식의 CDN 구현

1. VM 만들기

2. Nginx 설치

3. Nginx 설정

4. Web 서버의 Nginx 설정

5. 썸네일 이미지 CDN에 저장

2. CDN 서버 디렉터리 구성

예를 들어 스트리밍 서버에 같이 올린다면:

bash

복사편집

sudo mkdir -p /var/www/cdn/thumbs

→ 여기다가 썸네일 이미지 복사

bash

복사편집

sudo cp -r /usr/share/nginx/html/cdn/thumbs/* /var/www/cdn/thumbs/

※ 복사할 때 경로 주의! (/var/www/cdn/thumbs/로 정리)

3. nginx 설정 (CDN 서버)

# /etc/nginx/conf.d/cdn.conf 
server { 
    listen 8083; # 예시로 8083 포트 사용 
    server_name _; 
    root /var/www/cdn; # /cdn 경로를 루트로 
    
    location /cdn/ { 
        try_files $uri $uri/ =404;
        add_header Cache-Control "public, max-age=86400"; # 캐시 하루 적용 
    } 
    
    error_page 404 /404.html; 
}

설명

/cdn/ 요청 → /var/www/cdn/ 디렉터리에서 찾아서 제공
캐시를 걸어줘서 성능 최적화
포트 8083 예시. (물론 80으로도 할 수 있지만 충돌 방지용)

4. nginx 재시작

sudo systemctl reload nginx

5. WEB 서버 nginx 수정

WEB nginx에 프록시 규칙 추가해줍니다.

location /cdn/ { 
	proxy_pass http://192.168.1.108:8083/cdn/; # CDN 서버 IP + 포트
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

/cdn/으로 오는 요청은 모두 CDN 서버로 넘김.

6. Vue 코드

const thumbnailUrl = computed(() => `/cdn/thumbs/${props.movie.id}.jpg`);

원래는 /public/cdn/thumbs/

이 경로에 이미지들을 넣어서 빌드 시 포함 되었는데
이걸 CDN 서버로 옮긴 것

마무리

CDN이 뭔지 캐싱할 때 어떤 방식들이 있는지 공부했다.

세미프로젝트에서는 인프라를 위주로 구축하는 프로젝트이기에

CDN 서버를 만들고 다른 서버들과 연결하는 과정을 경험하기 위해서

간단한 수동 방식의 CDN 서버로 만들어 보겠다.

이미지 출처:https://300cbt.com/blogs/ecommerce-marketing/what-is-a-cdn-and-how-do-cdns-work

나의 성장 아카이브