피드로 돌아가기
Dev.toInfrastructure
원문 읽기
월 €3.29로 구축한 초저비용 고성능 커머스 스택
Blazingly Fast Ecommerce Stack for Less Than a Coffee a Month — No Marketplace, No Platform Cut
AI 요약
Context
마켓플레이스의 높은 수수료와 알고리즘 의존성 및 이미지 로딩 지연 문제를 해결하기 위한 독자적 스택 구축 필요성 대두. 예산 제약과 LCP(Largest Contentful Paint) 최적화를 통한 예술 작품의 시각적 경험 보존이 핵심 요구사항으로 정의됨.
Technical Solution
- Astro 6 기반의 정적 HTML 우선 렌더링과 Svelte islands를 통한 부분적 인터랙티브 레이어 분리로 JS 오버헤드 최소화
- Cloudflare R2와 ffmpeg 사전 인코딩을 통한 이미지/비디오 서빙으로 Egress 비용 제거 및 CDN 워터마크 문제 해결
- Hetzner ARM64 VPS에 Medusa v2, PostgreSQL, Redis를 단일 인스턴스로 통합하여 운영 비용을 월 €3.29로 제한
- Cloudflare Workers의 HTMLRewriter를 활용하여 런타임에 CSP nonce를 주입함으로써 보안성과 동적 스크립트 호환성 동시 확보
- Edge-side의 cf.country 메타태그 분석을 통한 지역 기반 통화 자동 전환 및 로컬 스토리지 기반의 사용자 설정 유지
- Medusa API의 비동기 호출 및 DOM 패칭 방식을 통해 레이아웃 시프트(Layout Shift) 없는 실시간 재고 상태 반영
실천 포인트
1. LCP 최적화를 위해 프레임워크 의존도를 낮춘 Static-first 전략 검토
2. Cloudflare R2와 같은 Zero-egress 저장소 도입을 통한 트래픽 비용 절감
3. HTMLRewriter를 이용한 Edge-level 보안 헤더 및 동적 속성 주입 패턴 적용
4. 불필요한 Third-party 트래킹 제거를 통한 개인정보 보호 및 페이지 로딩 속도 개선