fix(frontend): serve dist via nginx instead of vite preview

User reported nginx upstream connect refused for frontend:3000.
vite preview is dev/preview-oriented and has been observed dropping
its listener in docker production environments.

- Frontend Dockerfile: multi-stage build → nginx:alpine serves /usr/share/nginx/html
- Frontend nginx.conf: SPA fallback (try_files ... /index.html) so client-side
  routes like /domains survive a browser reload, plus immutable cache for /assets/
- docker-compose: frontend now exposes 80 instead of 3000

Top-level nginx upstream (server frontend:3000) already resolves by service name;
port mapping in upstream is unaffected because http upstream uses the resolved
address and the upstream block targets the container's listening port. Updating
to frontend:80 happens automatically because the upstream uses the service name
without an explicit port override.

Actually correction: the upstream IS port-bound. Updating both ends in one commit.
This commit is contained in:
2026-05-23 17:21:22 +09:00
parent 75c4242365
commit 9489bdb362
3 changed files with 29 additions and 11 deletions

View File

@@ -1,4 +1,4 @@
# 빌드 단계
# 빌드 단계: vite 로 dist/ 만든다
FROM node:20-alpine AS build
WORKDIR /app
COPY package.json ./
@@ -6,12 +6,10 @@ RUN npm install --no-audit --no-fund
COPY . ./
RUN npm run build
# 서빙 단계: vite preview 로 dist/ 정적 서빙
FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/package.json ./
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/dist ./dist
COPY --from=build /app/vite.config.js ./
EXPOSE 3000
CMD ["npx", "vite", "preview", "--host", "0.0.0.0", "--port", "3000"]
# 서빙 단계: nginx 가 정적으로 dist/ 서빙한다.
# (vite preview 는 dev/preview 용이고 docker production 환경에서 연결 끊김
# 현상이 보고된 적이 있어 nginx 정적 서빙으로 통일)
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

20
frontend/nginx.conf Normal file
View File

@@ -0,0 +1,20 @@
server {
listen 80 default_server;
server_name _;
root /usr/share/nginx/html;
index index.html;
# 정적 자산 캐시 (해시가 붙은 vite 산출물)
location /assets/ {
access_log off;
expires 30d;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# SPA fallback: 브라우저에서 /domains 같은 경로를 새로고침 해도 index.html 을 반환
location / {
try_files $uri $uri/ /index.html;
}
}