How to Shrink Docker Images from 1.16 GB to 22 MB with Multi‑Stage Builds

Docker is a platform that lets developers and system administrators build, run, and share applications in containers. Containers run as isolated processes with their own filesystem built from Docker images defined by Dockerfiles.

The terms “dockerization” or “containerization” refer to the process of creating Docker containers. Containers are popular because they offer flexibility, lightweight nature, portability, loose coupling, and security.

This article focuses on optimizing Docker images to make them lightweight.

Example: Containerizing a React application

After creating a React app with TypeScript using npx create-react-app app --template typescript, the initial Dockerfile 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

The resulting image size is shown in the following figure:

Step 1: Use a lightweight base image

Switching to an Alpine‑based image reduces the size to about 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

This optimization brings the image size down to 330 MB, as illustrated above.

Step 2: Multi‑stage build

By separating the build and runtime stages, the image size drops to 91.5 MB:

FROM node:10-alpine AS build
WORKDIR /app
COPY app /app
RUN npm install && npm run build

FROM node:10-alpine
WORKDIR /app
COPY --from=build /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build

Step 3: Use Nginx for serving static files

Replacing the Node runtime with Nginx further reduces the final image to 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;"]

The resulting container runs the React application successfully, as shown in the final figure: