# 프론트엔드 도커 이미지 (멀티스테이지 빌드)
# 학습 포인트: React 앱은 빌드하면 결국 정적 파일(html/js/css)이 돼요.
# 1단계에서 Node로 빌드하고, 2단계에선 가벼운 웹서버(여기선 Caddy가 대신 서빙하므로
# 파일만 담는 컨테이너)로 결과물을 전달합니다.

FROM node:22-alpine AS build
WORKDIR /build
COPY package.json package-lock.json* ./
RUN npm install --no-audit --no-fund
COPY . .
RUN npm run build
# public/docs 의 학습 문서 17개도 dist/docs 로 함께 복사됩니다 (Vite가 public/을 그대로 포함)

# 결과물만 담는 단계 — deploy/docker-compose.prod.yml 이 이 컨테이너에서 dist를 꺼내 씁니다
FROM alpine:3.21
COPY --from=build /build/dist /dist
CMD ["sh", "-c", "cp -r /dist/* /out/ && echo 'frontend dist copied' && sleep 1"]