[250709] TIL
Today I Learned (2025-07-09)
- 결국은 젠킨스, 도커 설정 파일 문제였으나 ,, CDN에 대해 공부하는 시간을 갖을 수 있었다.
[1] 브라우저(사용자)
│ ① HTTPS 요청
▼
[2] CloudFront Edge 서버 ← 전 세계 600 + 개 “지사” 같은 거점
│ ② 캐시 HIT? ─ 캐시에 있으면 곧바로 200 OK
│ ─ 없으면 ↓ Origin 으로 패스
▼
[3] Origin 서버(백엔드·S3·EC2·ALB)
│ ③ 실제 데이터·API 처리
└───────────────▶ 결과 돌려줌
캐시에 있는지 확인함
🔍 여기서 문제가 됐던 “/_next/image
400 오류”는 ②→③ 사이에서 url
· w
· q
쿼리스트링이 Edge에서 Origin으로 넘어가지 않아 Optimizer가 거절한 케이스였습니다.
로컬 환경에서는 Edge를 거치지 않고 바로 PC에서 돌고 있는 Next.js 서버로 요청을 보냄
넥스트 서버가 왜 Origin인가 ?
브라우저(사용자)
└─▶ ① CloudFront Edge ← 지구 곳곳 600+ PoP
├─ 캐시 HIT → 200 OK ――――――――――――――――――――┐
└─ 캐시 MISS → ② Origin(Next.js 서버) │
└─ ③ 원본 이미지(CDN) 가져와 리사이즈 │
▲ │
└────────────── 캐싱 후 브라우저 복귀 ┘
Next.js 에서 이미지 옵티마이저가 최적화를 진행해줌
우선 브라우저 -> 엣지에서는 사용자에서 가장 가까운 엣지로 연결돼 지연이 감소됨 캐시를 판단함, 요청 URL + 헤더 쿼리로 캐시키 생성, HIT면 즉시 응답 Edge-> Origin 쿼리, 헤더, 쿠키를 전달해줌 오리진에서 이미지를 다운로드 후 리사이즈 WebP 변환해줌
우선 이미지 내부 동작
Image 컴포넌트를 쓰면 브라우저가 원본을 직접 받지 않고,
/_next/image?url=<원본 경로>&w=<가로 픽셀>&q=<품질>
형태로 Nextjs 서버에 요청을 보냄 Image Optimizer는 “프록시 겸 변환기”
- url 파라미터에 적힌 원본 이미지 (CDN, S3 등) 을 다운로드함
- w, q 값에 맞춰 리사이즈, WebP 변환
- 결과 파일을 응답하고 캐시에 저장
Leave a comment