프론트엔드와 THE TWELVE-FACTOR APP

THE TWELVE-FACTOR APP 원칙은 원래 백엔드 애플리케이션을 위한 것이지만, Next.js를 직접 운영하는 프론트엔드 개발자도 알아야 하는 이유와 각 원칙의 FE 적용 방법을 정리한 글이다. 서버 영역이 확장되면서 프론트엔드도 배포·운영의 주체가 되고 있는 현실을 반영한다.

핵심 포인트 - 12-Factor는 독립적으로 확장 가능한 애플리케이션을 위한 12가지 방법론 (Heroku 창업자 제안) - Next.js App Router로 서버 컴포넌트·API Route 직접 운영하는 FE에게도 필수 지식 - 코드베이스 원칙: 1 앱 = 1 레포, 모노레포는 위반이 아님 (코드베이스≠레포, 배포 단위 기준) - 설정 원칙: 환경변수로 모든 환경별 값 분리, 코드에 하드코딩 금지 - 로그는 stdout으로만 출력, 파일 저장이나 로그 라우팅은 인프라 담당 - 빌드/릴리즈/실행 단계 엄격 분리: Next.js build → output → runtime이 이를 자연스럽게 강제

상세 정리 - Codebase: 1 코드베이스 → 다수 배포. 모놀리식(1 레포 1 앱) vs MSA(1 레포 1 서비스) - 모노레포는 코드베이스 위반이 아님: 레포는 업무 편의, 코드베이스는 배포 관련 - Dependencies: package.json에 명시적 의존성, 시스템 전역 패키지 의존 금지 - Config: 환경변수로 분리. Next.js의 NEXT_PUBLIC_* 규칙이 이를 강제 - Backing services: DB·캐시·큐는 URL로 연결, 교체 가능한 리소스로 취급 - Build/Release/Run: next build(빌드) → .next(릴리즈) → node server(실행) 엄격 분리 - Processes: 무상태 프로세스, 세션은 외부 스토어(Redis 등)에 저장 - Port binding: 포트를 통해 서비스 노출, Next.js는 기본 3000 - Concurrency: 프로세스 모델로 수평 확장, 서버리스/컨테이너와 자연스럽게 연결 - Disposability: 빠른 시작·정상 종료. Next.js standalone 출력이 이를 최적화 - Dev/Prod parity: 개발과 프로덕션 환경 차이 최소화 - Logs: console.log → stdout, 수집은 CloudWatch·Datadog 등 외부에서 - Admin processes: DB 마이그레이션 같은 일회성 작업도 동일 코드베이스에서 실행

왜 읽나: 서버 컴포넌트와 API Route로 백엔드 영역까지 담당하게 된 프론트엔드 개발자가 운영 관점의 사고를 갖추기 위해 읽어야 하는 글이다.