Dockerize React: Static Builds Served at Wire Speed

Serving a React build from a Node.js process wastes memory and adds an unnecessary runtime dependency. Most PaaS providers charge by the container — a 900 MB Node image costs more than a 40 MB Nginx image doing the same job.

Docker also solves the "it built on my machine" problem. Pinning the Node version in the build stage and the Nginx version in the serve stage means every build is reproducible, regardless of developer environment.

The Dockerfile has two stages:

• Build stage: FROM node:20-alpine AS build — installs deps with npm ci, copies source, runs npm run build. Build-time env vars (like REACT_APP_API_URL) are passed as ARG directives.
• Serve stage: FROM nginx:1.25-alpine — copies build/ output into /usr/share/nginx/html, adds a custom nginx.conf with gzip, cache-control headers for hashed assets, and a try_files $uri /index.html fallback for client-side routing.

The Compose file exposes port 80, sets a health check with curl -f http://localhost/, and applies a read_only filesystem with tmpfs mounts for Nginx PID and cache directories.

• Two-stage Dockerfile with final image under 50 MB
• Custom nginx.conf — gzip, Brotli (if module available), SPA routing, security headers
• docker-compose.yml with health check and resource constraints
• Runtime environment injection script for window.__ENV__ pattern (no rebuild needed per environment)
• CI pipeline step for build, tag, and push