Reduce docker image size with multi-stage build and dependency pruning (#1581)

## Description: This PR focuses on trimming down docker image size while keeping runtime behaviour intact. This partially addresses #1242 by slimming the production Docker image by ~33%. ``` $ docker image ls | grep openfront openfrontio latest 992fb420f131 1 minute ago 1.05GB # new evanpelle/openfront-prod <none> 216c629def78 6 hours ago 1.58GB # current prod ``` The savings come from three areas: - Refactor `Dockerfile` into a three‑stage build (dependencies / build / runtime). - Installs dev‑only node packages in a throw‑away layer and copies only production modules to the final image. - Updated `webpack.config.js` to skip copying `resources/maps/**/*` which never referenced by the client. Because the current codebase does not cleanly separate dev/prod requirements, extensive regression testing is necessary; some latent prod usage of dev‑only modules might surface. ## Please complete the following: - [X] I have added screenshots for all UI updates - [X] I process any text displayed to the user through translateText() and I've added it to the en.json file - [X] I have added relevant tests to the test directory - [X] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [X] I have read and accepted the CLA agreement (only required once). ## Please put your Discord username so you can be contacted if a bug or regression is found: aaa4xu --------- Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>
2026-06-22 11:18:11 +00:00 · 2025-07-26 13:36:13 +07:00
parent 48632cc0e0
commit 97eb48a650
4 changed files with 388 additions and 123 deletions
@@ -1,11 +1,12 @@
 # Use an official Node runtime as the base image
 FROM node:24-slim AS base
+# Set the working directory in the container
+WORKDIR /usr/src/app

 # Create dependency layer
 FROM base AS dependencies
 RUN apt-get update && apt-get install -y \
    nginx \
-    supervisor \
    git \
    curl \
    jq \
@@ -13,46 +14,63 @@ RUN apt-get update && apt-get install -y \
    apache2-utils \
    && rm -rf /var/lib/apt/lists/*

-RUN curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb > cloudflared.deb \
-    && dpkg -i cloudflared.deb \
-    && rm cloudflared.deb
-
-# Final image
-FROM base
-
-# Copy installed packages from dependencies stage
-COPY --from=dependencies / /
+# Update worker_connections in the existing nginx.conf
+RUN sed -i 's/worker_connections [0-9]*/worker_connections 8192/' /etc/nginx/nginx.conf

+FROM dependencies AS build
 ARG GIT_COMMIT=unknown
 ENV GIT_COMMIT="$GIT_COMMIT"
-
-# Set the working directory in the container
-WORKDIR /usr/src/app
-
+# Disable Husky hooks
+ENV HUSKY=0
 # Copy package.json and package-lock.json
 COPY package*.json ./
-
-# Install dependencies while bypassing Husky hooks
-ENV HUSKY=0
-ENV NPM_CONFIG_IGNORE_SCRIPTS=1
-RUN mkdir -p .git && npm ci
-
+# Install dependencies
+RUN npm ci
 # Copy the rest of the application code
 COPY . .
-
 # Build the client-side application
 RUN npm run build-prod
-
 # So we can see which commit was used to build the container
 # https://openfront.io/commit.txt
 RUN echo "$GIT_COMMIT" > static/commit.txt

-# Update worker_connections in the existing nginx.conf
-RUN sed -i 's/worker_connections [0-9]*/worker_connections 8192/' /etc/nginx/nginx.conf
+FROM dependencies AS npm-dependencies
+# Disable Husky hooks
+ENV HUSKY=0
+ENV NPM_CONFIG_IGNORE_SCRIPTS=1
+# Copy package.json and package-lock.json
+COPY package*.json ./
+# Install dependencies
+RUN npm ci --omit=dev
+
+# Final image
+FROM base
+
+RUN apt-get update && apt-get install -y \
+    nginx \
+    supervisor \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy installed packages from dependencies stage
+RUN curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb > cloudflared.deb \
+    && dpkg -i cloudflared.deb \
+    && rm cloudflared.deb

 # Copy Nginx configuration and ensure it's used instead of the default
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 RUN rm -f /etc/nginx/sites-enabled/default
+COPY --from=dependencies /etc/nginx/nginx.conf /etc/nginx/nginx.conf
+
+# Copy npm dependencies
+COPY --from=npm-dependencies /usr/src/app/node_modules node_modules
+COPY package.json .
+
+# Copy the rest of the application code
+COPY . .
+
+# Copy frontend
+COPY --from=build /usr/src/app/static static

 # Setup supervisor configuration
 RUN mkdir -p /var/log/supervisor
@@ -31,9 +31,13 @@
    "@types/benchmark": "^2.1.5",
    "@types/chai": "^4.3.17",
    "@types/d3": "^7.4.3",
+    "@types/express": "^4.17.23",
+    "@types/google-protobuf": "^3.15.12",
+    "@types/hammerjs": "^2.0.46",
    "@types/jest": "^30.0.0",
    "@types/jquery": "^3.5.31",
    "@types/js-yaml": "^4.0.9",
+    "@types/msgpack5": "^3.4.6",
    "@types/node": "^22.10.2",
    "@types/pg": "^8.11.11",
    "@types/sinon": "^17.0.3",
@@ -45,6 +49,7 @@
    "canvas": "^3.1.0",
    "chai": "^5.1.1",
    "concurrently": "^8.2.2",
+    "copy-webpack-plugin": "^13.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "eslint": "^9.21.0",
@@ -55,6 +60,7 @@
    "globals": "^16.0.0",
    "html-inline-script-webpack-plugin": "^3.2.1",
    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3",
    "husky": "^9.1.7",
    "jest": "^30.0.0",
    "jest-environment-jsdom": "^30.0.0",
@@ -72,11 +78,13 @@
    "tailwindcss": "^3.4.17",
    "ts-jest": "^29.2.4",
    "ts-loader": "^9.5.2",
-    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
    "tsx": "^4.17.0",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.26.0",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
    "worker-loader": "^3.0.8"
  },
  "dependencies": {
@@ -97,14 +105,9 @@
    "@opentelemetry/semantic-conventions": "^1.32.0",
    "@opentelemetry/winston-transport": "^0.11.0",
    "@stripe/stripe-js": "^7.4.0",
-    "@types/express": "^4.17.21",
-    "@types/google-protobuf": "^3.15.12",
-    "@types/hammerjs": "^2.0.45",
-    "@types/msgpack5": "^3.4.6",
    "binary-loader": "^0.0.1",
    "colord": "^2.9.3",
    "colorjs.io": "^0.5.2",
-    "copy-webpack-plugin": "^13.0.0",
    "d3": "^7.9.0",
    "dompurify": "^3.1.7",
    "dotenv": "^16.5.0",
@@ -114,10 +117,10 @@
    "google-auth-library": "^9.14.0",
    "googleapis": "^143.0.0",
    "hammerjs": "^2.0.8",
-    "html-webpack-plugin": "^5.6.3",
    "ip-anonymize": "^0.1.0",
    "jimp": "^0.22.12",
    "jose": "^6.0.10",
+    "js-yaml": "^4.1.0",
    "lit": "^3.2.1",
    "lit-markdown": "^1.3.2",
    "msgpack5": "^6.0.2",
@@ -131,11 +134,9 @@
    "pureimage": "^0.4.13",
    "sharp": "^0.34.2",
    "systeminformation": "^5.25.11",
+    "ts-node": "^10.9.2",
    "twemoji": "^14.0.2",
    "uuid": "^11.1.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
    "winston": "^3.17.0",
    "winston-transport": "^4.9.0",
    "ws": "^8.18.0",
@@ -136,6 +136,9 @@ export default async (env, argv) => {
            from: path.resolve(__dirname, "resources"),
            to: path.resolve(__dirname, "static"),
            noErrorOnMissing: true,
+            globOptions: {
+              ignore: ["resources/maps/**/*"],
+            },
          },
        ],
        options: { concurrency: 100 },