Deploying a React App with Docker using Nginx

Containerizing a React application with Docker simplifies deployment and ensures consistency across environments. This guide demonstrates how to create a lightweight Docker image for a React app using a multi-stage build process with Node.js and Nginx. Dockerfile Breakdown # Build stage FROM node:alpine AS builder WORKDIR /app COPY package.json package-lock.json ./ RUN npm install --frozen-lockfile COPY . . RUN npm run build # Run stage FROM nginx:alpine COPY --from=builder /app/build /usr/share/nginx/html RUN echo 'server { listen 80; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } }' > /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] Stage 1: Building the React App Base Image: Uses node:alpine for a minimal Node.js environment. Working Directory: Sets /app as the working directory. Dependency Installation: Copies package.json and package-lock.json, then installs dependencies using npm install. Copy Source Code: Copies the entire React project. Build Application: Runs npm run build to generate production-ready files in the build/ directory. Stage 2: Running with Nginx Base Image: Uses nginx:alpine for a lightweight production server. Copy Build Artifacts: Moves the build/ directory to Nginx’s web root. Custom Nginx Configuration: Sets up a default configuration to serve the React app and handle routing. Expose Port: Opens port 80, which is the default for Nginx. Start Server: Runs Nginx in the foreground. Why Use Nginx? Nginx is optimized for serving static files and acts as a reverse proxy, improving performance and security. It efficiently handles requests, caches content, and ensures smooth routing for React applications deployed in production environments. Building and Running the Docker Container Step 1: Build the Docker Image Run the following command to build the Docker image: docker build -t react-app . Step 2: Run the Container Start the container and expose it on port 80: docker run -p 80:80 react-app Conclusion This approach provides an efficient way to package and serve a React app using Docker and Nginx. By leveraging multi-stage builds, we keep the final image small and optimized for production environments.

Mar 9, 2025 - 10:02

Deploying a React App with Docker using Nginx

Containerizing a React application with Docker simplifies deployment and ensures consistency across environments. This guide demonstrates how to create a lightweight Docker image for a React app using a multi-stage build process with Node.js and Nginx.

Dockerfile Breakdown

# Build stage
FROM node:alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile
COPY . .
RUN npm run build

# Run stage
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html

RUN echo 'server { listen 80; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } }' > /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Stage 1: Building the React App

Base Image: Uses node:alpine for a minimal Node.js environment.
Working Directory: Sets /app as the working directory.
Dependency Installation: Copies package.json and package-lock.json, then installs dependencies using npm install.
Copy Source Code: Copies the entire React project.
Build Application: Runs npm run build to generate production-ready files in the build/ directory.

Stage 2: Running with Nginx

Base Image: Uses nginx:alpine for a lightweight production server.
Copy Build Artifacts: Moves the build/ directory to Nginx’s web root.
Custom Nginx Configuration: Sets up a default configuration to serve the React app and handle routing.
Expose Port: Opens port 80, which is the default for Nginx.
Start Server: Runs Nginx in the foreground.

Why Use Nginx?

Nginx is optimized for serving static files and acts as a reverse proxy, improving performance and security. It efficiently handles requests, caches content, and ensures smooth routing for React applications deployed in production environments.

Building and Running the Docker Container

Step 1: Build the Docker Image

Run the following command to build the Docker image:

docker build -t react-app .

Step 2: Run the Container

Start the container and expose it on port 80:

docker run -p 80:80 react-app

Conclusion

This approach provides an efficient way to package and serve a React app using Docker and Nginx. By leveraging multi-stage builds, we keep the final image small and optimized for production environments.