클라우드 S3, CloudFront 이미지 및 배포 전략 - 100-hours-a-week/16-Hot6-wiki GitHub Wiki

S3 + CloudFront 기반 이미지 및 프론트엔드 배포 전략

개요

사용자 이미지, 프론트엔드 빌드 파일, CD 전략이 모두 S3와 CloudFront 구조에 녹아 있어 문서화가 필요했습니다.
S3 및 CloudFront가 필요한 이유, 사용 방식, 기본 노드 구조에 대한 설명을 포함합니다.

S3 배포의 기본 구조

onthetop/                  # onthetop 배포
├── frontend/              # FE 정적 파일 저장 경로
│   ├── prod/             # 운영 환경
│   │   ├── blue/         # "Blue" 버전 FE 파일
│   │   └── green/        # "Green" 버전 FE 파일
│   └── dev/              # 개발 환경 FE 파일
│
├── assets/               # 사진 관리 경로
│   ├── images/           # 서비스 관리 이미지
│   └── temp/             # 임시 사진 (CNN 모델 인증 전 / 사용자 업로드 결정 전)

사진 업로드 프로세스

이상적인 프로세스

Presigned URL 기능을 추가하면 다음과 같은 프로세스로 진행 가능합니다.

  1. BE에서 UUID 생성 및 presigned URL 발행
  2. FE에서 /onthetop/assets/temp 경로로 사진 보내기
  3. 이미지 생성이라면 CNN(책상 사진이 맞는지 확인) 통과 후 /onthetop/assets/images 로 이동
  4. 게시글 등록이라면 게시글 생성 버튼 처리 시 /onthetop/assets/images 로 이동

MVP 기간 1: BE에서 업로드 관리

  1. 이미지 생성 요청 시 UUID 생성 및 /onthetop/assets/images로 저장 (DB 관리 주의!)
  2. FastAPI 쪽으로 https://cdn.onthe-top.com/assets/images/uuiduuid-uuiduuid 와 같은 값을 API로 전달.
  3. 책상 이미지가 아닐 경우 이미지 삭제
    (게시글 이미지인 경우 바로 images로 업로드)

MVP 기간 2: /assets/temp 경로로 업로드 관리

  1. 이미지 생성 요청 시 일단 UUID 생성 및 /onthetop/assets/temp로 저장
  2. FastAPI 쪽으로 https://cdn.onthe-top.com/assets/temp/uuiduuid-uuiduuid 와 같은 값을 API로 전달.
  3. 책상 이미지일 경우 /onthetop/assets/images로 해당 이미지 이동 (굳이 삭제하지 않아도 N시간 뒤 삭제) (게시글 이미지인 경우 바로 images로 업로드)용

CloudFront + S3 역할

저장 경로 vs 조회 URL

S3 저장 경로:
onthetop/assets/images/uuiduuid-uuiduuid

CloudFront 조회 경로:
https://cdn.onthe-top.com/assets/images/uuiduuid-uuiduuid

하나의 UUID를 DB에 저장하면, 바로 CloudFront에서 검색/보기 가능

/assets/temp의 기본 기능

  • 임시적으로 사진이 저장되는 경로
  • CNN을 통해 책상 여부 판단 이전 or 사용자가 게시글 업로드 버튼 누르기 이전
  • 지정된 시간이 지나면 자동 삭제 (예: 24시간)

백엔드 측에서 조회 시 사진이 없을 수 있음을 대비해야 합니다 (ex. 사용자가 이미지 업로드하고 10일 뒤에 업로드 버튼 클릭)

FE CD 전략 (운영)

배포 환경 분리

  • https://onthe-top.com  → prod
  • https://dev.onthe-top.com  → dev

Blue/Green 배포

  • 운영(prod) FE 파일은 frontend/prod/blue/ 또는 frontend/prod/green/에 업로드됩니다.
  • 매 배포가 진행될 때 마다 blue와 green이 번갈아가면서 최신 파일로 업데이트 됩니다. 이전 버전은 롤백을 위해 당분간 유지됩니다.
    • 즉, 현재 blue에 최신 파일이 있고 새 배포가 진행된다면, 새 버전은 green에 업로드된 뒤 green 경로로 새로 라우팅되는 원리입니다.
  • 개발(dev)용 FE 파일은 frontend/dev/에 업로드됩니다. (blue-green 배포 아님)