React + Nginx Dockerized Lab

This project is a technical demonstration of a modern web application deployment workflow. It features a React frontend served by a high-performance Nginx server, fully containerized using Docker.

🐳 Key Features

• Multi-stage Build: Optimized Docker image size by separating the build environment (Node.js) from the production environment (Nginx).
• High Performance & Security:
  • Uses Nginx to serve static assets, ensuring low latency and high scalability.
  • Acts as a Reverse Proxy, providing a robust security layer that hides backend infrastructure details and helps to mitigate DDoS attacks.
• Infrastructure as Code: All environment configurations are version-controlled via Dockerfile and nginx.conf.
• Portability: Guaranteed to run on any machine with Docker installed, eliminating "it works on my machine" issues.

🛠️ Prerequisites

• Docker
• Node.js & NPM (Optional, for local development)

Getting Started

1. Clone the repository

git clone https://github.com/your-username/react-nginx-docker.git
cd react-nginx-docker

2. Build the Docker Image

The build command uses the Dockerfile to compile the React app and configure the Nginx server:

docker build -t react-web-app .

3. Run the Container

Map port 8080 on your host machine to port 80 inside the container:

docker run -d -p 8080:80 --name my-running-app react-web-app

Build Success! Open your browser and visit: http://localhost:8080

📂 Project Structure

• Dockerfile: Contains the multi-stage build instructions.
• nginx.conf: Custom Nginx configuration to handle React Router (SPA) routing.
• src/: React source code.
• public/: Static assets.