Serve production frontend via Nginx static build

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-slim
+FROM node:22-slim AS base
 
 ARG NPM_REGISTRY=https://registry.npmjs.org/
 ARG NPM_FETCH_RETRIES=5
@@ -15,19 +15,35 @@ RUN npm config set registry "${NPM_REGISTRY}" \
     && npm config set fetch-retry-mintimeout "${NPM_FETCH_RETRY_MINTIMEOUT}" \
     && npm config set fetch-retry-maxtimeout "${NPM_FETCH_RETRY_MAXTIMEOUT}" \
     && npm config set fetch-timeout "${NPM_FETCH_TIMEOUT}" \
-    && NODE_OPTIONS=--dns-result-order=ipv4first npm ci --no-audit
-RUN chown -R node:node /app
+    && NODE_OPTIONS=--dns-result-order=ipv4first npm ci --no-audit \
+    && chown -R node:node /app
 
 COPY --chown=node:node tsconfig.json /app/tsconfig.json
 COPY --chown=node:node tsconfig.node.json /app/tsconfig.node.json
 COPY --chown=node:node vite.config.ts /app/vite.config.ts
 COPY --chown=node:node index.html /app/index.html
 COPY --chown=node:node src /app/src
-COPY --chown=node:node docker-entrypoint.sh /app/docker-entrypoint.sh
-RUN chmod +x /app/docker-entrypoint.sh
+
+FROM base AS development
 
 EXPOSE 5173
 
 USER node
 
-CMD ["/app/docker-entrypoint.sh"]
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173"]
+
+FROM base AS build
+
+ARG VITE_API_BASE=
+ENV VITE_API_BASE=${VITE_API_BASE}
+
+RUN npm run build
+
+FROM nginx:1.27-alpine AS production
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 5173
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/docker-entrypoint.sh

@@ -1,17 +0,0 @@
-#!/bin/sh
-
-# Frontend runtime entrypoint.
-# Uses APP_ENV to select development or production Vite startup mode.
-
-set -eu
-
-APP_ENV_VALUE="${APP_ENV:-development}"
-HOST_VALUE="${FRONTEND_HOST:-0.0.0.0}"
-PORT_VALUE="${FRONTEND_PORT:-5173}"
-
-if [ "$APP_ENV_VALUE" = "production" ]; then
-  npm run build
-  exec npm run preview -- --host "$HOST_VALUE" --port "$PORT_VALUE"
-fi
-
-exec npm run dev -- --host "$HOST_VALUE" --port "$PORT_VALUE"

frontend/nginx.conf

@@ -0,0 +1,12 @@
+server {
+    listen 5173;
+    listen [::]:5173;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/vite.config.ts

@@ -81,10 +81,5 @@ export default defineConfig(({ mode }) => {
       port: 5173,
       ...(allowedHosts ? { allowedHosts } : {}),
     },
-    preview: {
-      host: '0.0.0.0',
-      port: 5173,
-      ...(allowedHosts ? { allowedHosts } : {}),
-    },
   };
 });