Shrink Docker Images: From 1.2 GB to 22 MB with Alpine and Multi‑Stage Builds

Docker is a platform that lets developers and sysadmins build, run, and share applications in containers, which are isolated processes with their own filesystem defined by Docker images and Dockerfiles.

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

Containers are popular because they offer flexibility, lightweight operation, portability, loose coupling, and security.

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

Example: a React application is containerized. Using a basic Dockerfile results in a 1.16 GB image.

npx create-react-app app --template typescript

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 such as Alpine, reducing the image 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

Step 2 – Apply multi‑stage builds to copy only the compiled output, shrinking the image to roughly 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
RUN npm install -g webserver.local
COPY --from=build /app/build ./build
EXPOSE 3000
CMD webserver.local -d ./build

Step 3 – Replace the Node runtime with Nginx for serving static files, achieving a final image size of about 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;"]

Images illustrate the file structure and size reductions at each step.