우리 팀엔 자바스크립트 상차만 하는 프런트엔드가 있었다

문제 상황

• 프런트엔드 리포지터리에 index.html이 없어 백엔드 리포지터리에서 정적 리소스와 HTML 템플릿을 함께 관리하던 구조
• 프런트엔드의 수정 권한 부족, 역할 경계 혼란, 캐시 전략 적용 불가로 인한 비효율과 운영 부담
• 백엔드에는 인증·인가 로직과 정적 리소스 관리가 섞여 있어 구조 파악과 유지보수가 어려운 상태

구조와 흐름

• 초기에는 S3 + 백엔드 템플릿 조합으로 자바스크립트 파일 경로를 하드코딩해 서빙하는 방식
• 검토한 대안으로 CloudFront 경유 경로 기반 분기 구조를 고려했으나 보안·비용·로그 분리 측면에서 한계 발견
• 최종적으로 프런트엔드와 백엔드 도메인을 분리하고, S3·CloudFront·Lambda@Edge로 프런트엔드 정적 배포와 MPA 라우팅을 구성

해결 방법

• 팀 내 공감대 형성 후 작업을 세부 태스크로 분해해 단계적으로 진행
• 쿠키, WAF, 보안 그룹, 캐시 정책 등 배포 과정의 문제를 하나씩 조정하며 분리 배포로 안전하게 전환
• 프런트엔드 독립 배포와 함께 백엔드의 불필요한 인증/인가 로직과 정적 리소스 코드를 정리