프론트엔드와 THE TWELVE-FACTOR APP

구조와 흐름

• FE 운영 관점에서 12Factor 원칙을 코드베이스·종속성·설정·백엔드 서비스·빌드/릴리즈/실행으로 해석
• Next.js 서버 운영과 SSR 확대로 FE 개발자에게도 애플리케이션 독립성 원칙의 중요성 강조

선택 이유

• 서비스·팀 간 의존성 축소와 독립적 커뮤니케이션 구조를 위한 코드베이스 분리
• 환경별 재빌드 없이 동일 산출물을 실행하기 위한 런타임 설정 주입
• 개발·인프라·운영 간 결합도 완화와 Cloud Native 환경 이식성 확보

성능/운영 포인트

• Node.js 버전, 정확한 패키지 버전, lock 파일, 컨테이너화로 암묵적 종속성 최소화
• Docker Artifact 기반 빌드·릴리즈·실행 분리로 버전 기반 QA와 환경 간 동일 산출물 검증
• 배포 시간 약 15분에서 약 1분으로 단축, Kubernetes 기반 프리뷰 서버 활용

주의할 점

• Next.js의 NEXT_PUBLIC 환경변수는 빌드 시 치환되어 런타임 환경 변경 불가
• runtimeConfig는 Automatic Static Optimization 적용 페이지에서 undefined 가능성
• Static HTML 사용 여부와 중앙 설정·KMS 연동 요구에 따른 설정 주입 방식 선택 필요