Cloud Native 6 min read

Optimizing Docker Images for Lightweight Deployment Using Alpine, Multi‑Stage Builds, and Nginx

This article explains how to reduce Docker image size by switching to Alpine base images, applying multi‑stage builds, and finally serving the built React application with Nginx, shrinking an initial 1.16 GB image down to just 22.4 MB.

Top Architect
Top Architect
Top Architect
Optimizing Docker Images for Lightweight Deployment Using Alpine, Multi‑Stage Builds, and Nginx

Docker is a platform that lets developers and system administrators build, run, and share applications in containers, which are isolated processes using a filesystem defined by a Docker image built from a Dockerfile; the terms dockerization or containerization refer to this process.

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

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

As an example, a React application is created with the command:

npx create-react-app app --template typescript

A basic Dockerfile for this app 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 replaces the heavy base image with Alpine, which reduces 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 introduces a multi‑stage build, compiling the app in one stage and copying only the built assets to a second stage, shrinking the image further 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 switches the runtime container to Nginx, which is better suited for serving static files, resulting in a final image 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;"]

The final container runs the React application correctly, demonstrating how careful base‑image selection, multi‑stage builds, and appropriate runtime choices can dramatically reduce Docker image size.

Dockerimage optimizationContainerizationnginxAlpineMulti‑Stage Build
Top Architect
Written by

Top Architect

Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.