Update Dockerfile to support Vite

Building the files in a node container but deploying using nginx, removing the need for npm server package and reducing the container size

Author: RafaelCenzano

Dockerfile

@@ -1,38 +1,37 @@
-FROM node:23-alpine3.21 AS base
-
-# Install dependencies
-FROM base AS deps
+# Build stage
+FROM node:22-alpine3.21 AS builder
 
 WORKDIR /app
 
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+# Install libc6-compat if needed
 RUN apk add --no-cache libc6-compat
 
+# Install dependencies
 COPY package.json package-lock.json ./
-
 RUN npm ci
 
-# Build the app with the node modules installed
-FROM base AS builder
-
-WORKDIR /app
-
-COPY --from=deps /app/node_modules ./node_modules
+# Build the Vite app
 COPY . .
-
 RUN npm run build
 
-# Create a new image with the build files
-FROM base AS runner
+# Final stage: nginx serving dist/
+FROM nginx:stable-alpine as runner
 
-WORKDIR /app
+# Remove default nginx website
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/nginx.conf
 
-COPY --from=builder /app/build ./build
-RUN npm install -g serve
+# Copy built Vite files
+COPY --from=builder /app/dist /usr/share/nginx/html
 
+# Healthcheck for nginx
 HEALTHCHECK --interval=10s --timeout=5s --start-period=5s --retries=3 \
-    CMD wget --no-verbose --tries=1 --spider http://0.0.0.0:3000/health || exit 1
+  CMD wget --no-verbose --tries=1 --spider http://0.0.0.0/ || exit 1
 
-EXPOSE 3000
+# Expose port 80 (standard HTTP)
+EXPOSE 80
 
-CMD ["serve", "-s", "build"]
+# Start nginx automatically
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,27 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+  sendfile        on;
+  keepalive_timeout  65;
+
+  server {
+    listen 80;
+
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+
+    # Enable gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+  }
+}