프런트엔드 독립 배포로 성능 UP!
by DD
8개월 전
조회수 14
프런트엔드 개발자가 index.html을 직접 관리하지 못하는 레거시 구조에서 시작됨
S3, CloudFront, Lambda@Edge를 활용하여 프런트엔드 독립 배포 환경 구축
로딩 시간 77% 감소, Lighthouse 점수 29점 향상 등 성능 개선 달성
프런트엔드 독립 배포 아키텍처
기존 모놀리식 구조에서 프런트엔드 독립 배포를 위해 S3, CloudFront, Lambda@Edge를 활용했다. 구체적으로 CloudFront를 통해 정적 리소스를 캐싱하고, Lambda@Edge로 라우팅을 처리했다. 따라서 배포 자동화 및 성능 향상을 동시에 달성했다.
쿠키와 WAF 설정의 함정
도메인 분리 과정에서 쿠키 설정과 WAF 규칙 변경이 필요했다. SameSite 설정 변경 시 CSRF 공격 위험이 있었고, 루트 도메인 쿠키 설정은 헤더 크기 초과 문제를 야기했다. 결과적으로 쿠키 제거 및 비대칭 키 암호화 방식으로 전환했다.
분리 배포 전략과 성과
내부 사용자에게 먼저 배포하여 안정성을 확보한 후, 외부 사용자에게 점진적으로 배포했다. 로딩 시간 77% 감소, Lighthouse 점수 29점 향상 등 정량적 성과를 달성했다. 따라서 프런트엔드 개발 생산성과 사용자 경험을 모두 개선했다.
