[TIL] FE 인프라 가이드

# 1단계: 빌드 환경
FROM node:20-alpine AS builder
 
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build
 
# 2단계: 실행 환경
FROM node:20-alpine AS runner
 
WORKDIR /app
ENV NODE_ENV=production
 
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
 
EXPOSE 3000
CMD ["node", "server.js"]

# (GOOD!) dependencies가 캐시됨
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
 
# (BAD!) 소스 바뀔 때마다 npm ci 다시 실행
COPY . .
RUN npm ci

services:
  frontend:
    build: .                        # 현재 디렉토리의 Dockerfile로 이미지 빌드
    ports:
      - "3000:3000"
    environment:
      - API_URL=http://api:4000     # 같은 Compose 네트워크 안에서 서비스 이름으로 접근
    depends_on:
      - api                         # api 서비스가 먼저 시작된 후 실행
 
  api:
    image: my-org/api:latest
    ports:
      - "4000:4000"
    environment:
      - DATABASE_URL=postgres://db:5432/mydb
    depends_on:
      - db
 
  db:
    image: postgres:16-alpine
    environment:
      - POSTGRES_DB=mydb
      - POSTGRES_PASSWORD=localdev
    volumes:
      - db-data:/var/lib/postgresql/data   # 컨테이너가 삭제되어도 DB 데이터 유지
 
volumes:
  db-data:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  namespace: my-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: ghcr.io/my-org/my-app:v1.2.0
          ports:
            - containerPort: 3000
          resources:
            requests:
              cpu: 100m
              memory: 128Mi
            limits:
              cpu: 500m
              memory: 512Mi
          readinessProbe:
            httpGet:
              path: /api/health
              port: 3000
            initialDelaySeconds: 5
            periodSeconds: 10
---
apiVersion: v1
kind: Service
metadata:
  name: frontend-svc
  namespace: my-app
spec:
  type: ClusterIP
  selector:
    app: frontend
  ports:
    - port: 80
      targetPort: 3000

apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: frontend-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: frontend
  minReplicas: 2
  maxReplicas: 10
  metrics:
    - type: Resource
      resource:
        name: cpu
        target:
          type: Utilization
          averageUtilization: 70

apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: frontend
  namespace: argocd
spec:
  project: default
  source:
    repoURL: https://github.com/my-org/k8s-manifests
    targetRevision: main
    path: apps/frontend
  destination:
    server: https://kubernetes.default.svc
    namespace: my-app
  syncPolicy:
    automated:
      prune: true       # Git에서 삭제한 리소스는 클러스터에서도 삭제
      selfHeal: true     # 수동 변경을 Git 상태로 되돌림
    syncOptions:
      - CreateNamespace=true

root-app (Application)
├── frontend (Application)
├── api (Application)
├── monitoring (Application)
└── infra (Application)
    ├── envoy-gateway
    ├── cert-manager
    └── argocd

name: CI/CD
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
 
      - run: npm ci
      - run: npm run lint
      - run: npm run test
 
  build-and-push:
    needs: lint-and-test    # lint-and-test가 성공해야 실행
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
 
      - uses: docker/build-push-action@v5
        with:
          push: true
          tags: ghcr.io/${{ github.repository }}:${{ github.sha }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

apiVersion: actions.github.com/v1alpha1
kind: AutoscalingRunnerSet
metadata:
  name: frontend-runners
spec:
  githubConfigUrl: "https://github.com/my-org/my-app"
  minRunners: 1
  maxRunners: 5
  template:
    spec:
      containers:
        - name: runner
          image: ghcr.io/actions/actions-runner:latest
          resources:
            requests:
              cpu: 500m
              memory: 1Gi

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: npm          # package-lock.json 기반 자동 캐시

- uses: docker/build-push-action@v5
  with:
    cache-from: type=gha       # GitHub Actions 캐시에서 레이어 로드
    cache-to: type=gha,mode=max  # 모든 레이어를 캐시에 저장

- uses: actions/cache@v4
  with:
    path: .next/cache
    key: nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
    restore-keys: |
      nextjs-${{ hashFiles('**/package-lock.json') }}-

[App /metrics] ←── scrape ──── [Prometheus Server]
[Node Exporter] ←── scrape ──┘        │
[kube-state-metrics] ←── scrape ──┘   │
                                       ├── PromQL 쿼리
                                       ├── AlertManager → Slack/PagerDuty
                                       └── Grafana 대시보드

histogram_quantile(0.95,
  rate(http_request_duration_seconds_bucket{service="frontend"}[5m])
)

sum(rate(http_requests_total{service="frontend", status=~"5.."}[5m]))
/
sum(rate(http_requests_total{service="frontend"}[5m]))
* 100

container_memory_working_set_bytes{namespace="my-app", container="frontend"}
/
container_spec_memory_limit_bytes{namespace="my-app", container="frontend"}
* 100

kubectl logs frontend-7d9f8b6c5-abc12

DEBUG  → 개발 시 상세 정보 (API 요청/응답 body 등)
INFO   → 정상 동작 기록 (서버 시작, 요청 처리 완료)
WARN   → 잠재적 문제 (deprecated API 사용, 재시도 발생)
ERROR  → 실제 오류 (DB 연결 실패, 외부 API 타임아웃)

// 파싱하기 어려움
console.log("User 123 failed to login - invalid password");
 
// 검색·필터링 가능
logger.warn({
  event: "login_failed",
  userId: 123,
  reason: "invalid_password",
  ip: "192.168.1.1",
  timestamp: "2026-03-05T10:23:45Z",
});

[Pod stdout/stderr]
    → [Fluent Bit (DaemonSet)]
    → [Loki or Elasticsearch]
    → [Grafana or Kibana]

groups:
  - name: log-alerts
    rules:
      - alert: HighErrorLogRate
        expr: |
          sum(rate({namespace="my-app"} |= "ERROR" [5m])) > 10
        for: 2m
        labels:
          severity: critical
        annotations:
          summary: "my-app에서 5분간 ERROR 로그가 분당 10건 이상"

코드 작성
  → git push
  → GitHub Actions (lint, test, build)
  → Docker 이미지 빌드 → Registry Push
  → ArgoCD가 Git 변경 감지
  → Kubernetes에 롤링 업데이트
  → Prometheus가 메트릭 수집
  → Grafana 대시보드에서 모니터링
  → 이상 감지 시 Slack 등 온콜 알림
  → 로그에서 원인 분석