Dockerizing a React/Next.js App
Write a multi-stage Dockerfile for a Next.js app and run it locally with Docker Compose.
Why Docker?
Docker containers package your app and its dependencies together, ensuring consistent behavior across dev, staging, and production. The same image runs everywhere.
Dockerfile for a Plain React SPA
A two-stage build: Node.js to build, Nginx to serve the static output.
# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]All lessons in this course
- Deploying to Vercel: Zero-Config & Preview URLs
- Hosting a React SPA on AWS S3 & CloudFront
- Dockerizing a React/Next.js App
- GitHub Actions CI/CD for React