[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는 “프록시 겸 변환기”

  1. url 파라미터에 적힌 원본 이미지 (CDN, S3 등) 을 다운로드함
  2. w, q 값에 맞춰 리사이즈, WebP 변환
  3. 결과 파일을 응답하고 캐시에 저장

Categories:

Updated:

Leave a comment