How to Slim Down Docker Images: From 1.2GB to 22MB with Multi‑Stage Builds

Docker Overview

Docker is a platform for developers and system administrators to build, run, and share applications using containers. A container runs a process in an isolated environment with its own filesystem built from a Docker image, which includes everything needed to run the application (compiled code, dependencies, libraries, etc.). Images are defined by a Dockerfile.

The terms dockerization or containerization refer to the process of creating Docker containers.

Containers are popular because they offer several advantages:

Flexibility: even the most complex applications can be containerized.

Lightweight: containers share the host kernel, making them far more efficient than virtual machines.

Portability: build locally and run anywhere.

Loose coupling: containers are self‑contained, so replacing or upgrading one does not disrupt others.

Security: containers enforce strict process isolation without additional configuration.

This article focuses on how to optimize Docker images to make them lightweight.

Optimization Process

We start with an example where a React application is containerized. After running the npx create-react-app app --template typescript command and creating a Dockerfile, the initial file structure looks like this:

A basic Dockerfile such as the one below produces a 1.16 GB image:

FROM node:10
WORKDIR /app
COPY app /app
RUN npm install -g webserver.local
RUN npm install && npm run build 
EXPOSE 3000
CMD webserver.local -d ./build

Step 1: Use a Lightweight Base Image

Docker Hub offers many base images. Alpine‑based images are much smaller than those based on other Linux distributions such as Ubuntu because they contain only the essential packages.

Replacing the base image with Alpine reduces the image size to 330 MB:

FROM node:10-alpine
WORKDIR /app
COPY app /app
RUN npm install -g webserver.local
RUN npm install && npm run build 
EXPOSE 3000
CMD webserver.local -d ./build

Step 2: Multi‑Stage Build

Multi‑stage builds allow using multiple base images in a Dockerfile, copying only the compiled artifacts from one stage to another and discarding unnecessary files.

In this example, only the compiled React code is needed for deployment; source files, node_modules, and package.json can be omitted.

Using a multi‑stage Dockerfile reduces the final image size to 91.5 MB. Note that the intermediate stage images remain in the Docker cache and must be removed manually if not needed.

FROM node:10-alpine AS build
WORKDIR /app
COPY app /app
RUN npm install && npm run build  
FROM node:10-alpine
WORKDIR /app
RUN npm install -g webserver.local
COPY --from=build /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build

Since a Node container is not ideal for serving static web assets, we replace the runtime with Nginx, achieving a final image size of 22.4 MB.

FROM node:10-alpine AS build
WORKDIR /app
COPY app /app
RUN npm install && npm run build  
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]