Vue.js 시니어 배포·운영 기술면접

Docker 멀티 스테이지 빌드에서 첫 번째 스테이지는 package.json과 lock 파일만 복사하여 의존성을 설치하고, 두 번째 스테이지에서 소스 코드를 복사하여 빌드합니다. 이렇게 하면 의존성이 변경되지 않은 경우 Docker 레이어 캐싱으로 npm install을 건너뛸 수 있습니다. CI 환경에서는 node_modules를 캐시 볼륨으로 마운트하거나 BuildKit의 cache mount를 활용하여 빌드 속도를 개선합니다. 빌드 아티팩트는 Git 커밋 SHA와 빌드 번호를 조합한 태그를 사용하여 버저닝하며, latest 태그와 함께 semantic version 태그도 부여합니다. 모노레포에서는 Nx나 Turborepo의 affected 명령을 사용하거나, Git diff로 변경된 패키지를 감지하여 선택적 빌드를 수행합니다. 최종 프로덕션 이미지는 nginx alpine 기반으로 빌드 결과물만 복사하여 이미지 크기를 최소화합니다.

무중단 배포를 위해 정적 리소스는 CDN이나 S3 같은 오브젝트 스토리지에 버전별 경로로 업로드합니다. Vite나 Webpack의 빌드 설정에서 output.publicPath를 버전 정보를 포함한 경로로 설정하여 각 배포마다 고유한 리소스 경로를 생성합니다. Kubernetes에서는 readinessProbe를 설정하여 새 파드가 완전히 준비된 후에만 트래픽을 받도록 하고, preStop 훅으로 기존 파드가 종료되기 전 일정 시간 대기하여 진행 중인 요청을 완료합니다. Rolling Update의 maxSurge와 maxUnavailable을 조정하여 배포 속도와 안정성을 균형있게 설정합니다. HTML 파일은 캐시하지 않도록 Cache-Control을 no-cache로 설정하고, JS/CSS 청크는 contenthash를 포함한 파일명으로 장기 캐싱합니다. Blue-Green 배포를 사용하는 경우 Ingress의 weight 기반 트래픽 분할로 카나리 배포를 먼저 수행하여 리스크를 최소화할 수 있습니다.

Sentry에서 release 기능을 활용하여 배포 버전을 추적하고, 각 배포마다 고유한 release 태그를 부여합니다. Vue 앱 초기화 시 Sentry.init에서 release와 environment를 설정하고, beforeSend 훅으로 사용자 컨텍스트와 커스텀 태그를 추가합니다. Performance API를 활용하여 LCP, FID, CLS 같은 Core Web Vitals를 측정하고, 이를 Datadog RUM이나 커스텀 메트릭으로 전송합니다. Prometheus Pushgateway를 통해 프론트엔드 메트릭을 수집하고, Grafana 대시보드에서 배포 시점을 annotation으로 표시하여 배포 전후 비교를 시각화합니다. 알림은 단순 임계치가 아닌 이동 평균 대비 표준편차를 기준으로 설정하여 정상적인 트래픽 변동과 실제 이상을 구분합니다. PagerDuty나 Slack과 통합하여 심각도에 따라 알림 채널을 분리하고, 동일 이슈의 반복 알림은 그룹핑하여 알림 피로도를 줄입니다. 배포 직후 5분간은 warming up 기간으로 설정하여 일시적 메트릭 변동으로 인한 오탐을 방지합니다.