1. Before Starting: What Are We Actually Building?

Let’s keep it simple:

👉 We will build a fully working NGINX webserver inside a Docker container. 👉 It will serve a static webpage (index.html). 👉 You can access it on your browser at:

http://localhost:8080

This project teaches:

• What a Dockerfile does
• How NGINX works inside a container
• How to copy files into a container
• How to expose ports
• How to run a clean production-grade webserver

Even a beginner can follow everything.

2. Visual Understanding: How NGINX Works in Docker

Here is the simple idea:

Your HTML File  
        ↓  
Dockerfile  
        ↓ docker build
NGINX Image + Your Files  
        ↓ docker run
Running Webserver on localhost:8080

Think of Docker as a box that contains:

• NGINX engine
• Your website files
• Instructions on how to run NGINX

Visual Diagram:

┌──────────────────────────────┐
│  NGINX Container             │
│   ├── /usr/share/nginx/html │ ← your website
│   └── NGINX webserver       │
└───────────┬──────────────────┘
            │ Port mapping
┌───────────┴──────────────────┐
│   Your Browser (localhost)   │
└──────────────────────────────┘

3. Step 1— Create Project Structure

nginx-docker-project/
│
├── index.html
└── Dockerfile

index.html

Create a very simple page:

<h1>Hello from NGINX running inside Docker 🚀</h1>

4. Step 2- Create the Dockerfile

(Everything explained before using)

Here is your Dockerfile:

# 1. Start with official NGINX image
FROM nginx:alpine

# 2. Copy your website files into NGINX default folder
COPY index.html /usr/share/nginx/html/index.html

# 3. Expose port 80 (NGINX default)
EXPOSE 80

Visual Breakdown:

FROM nginx:alpine
↓
Borrow a ready-to-use lightweight NGINX webserver

COPY index.html ...
↓
Replace default homepage with your file

EXPOSE 80
↓
Tell Docker this server listens on port 80

That’s your entire recipe.

5. Step 3 — Build the Image

Run:

docker build -t nginx-example .

Visual:

Dockerfile → nginx-example:latest (your image)

🚀 6. Step 4 — Run Your NGINX Webserver

Run:

docker run -p 8080:80 nginx-example

Visual Explanation:

8080 (your laptop)
→
80 (inside container)

Open browser:

http://localhost:8080

You will see:

Hello from NGINX running inside Docker 🚀

Your first webserver is live!

7. Step 5 — Make It Even Better (Optional HTML Folder Support)

If you have a folder:

/site
   ├── index.html
   ├── about.html
   ├── styles.css

Use:

FROM nginx:alpine
COPY site/ /usr/share/nginx/html/
EXPOSE 80

This copies all your website files inside NGINX.

8. Why NGINX + Docker Is So Powerful

✔ You get a production-ready webserver ✔ No need to install NGINX manually ✔ Your site becomes portable ✔ Deployment becomes one command ✔ Works on any machine

This is why companies use Docker everywhere.

9. Visual Summary (5 Seconds)

Dockerfile = instructions  
Build = create image  
Run = start webserver  
NGINX serves your static files  
Port mapping connects container → browser  

Done.

**10. FAQs **

Q1. Why use NGINX in Docker instead of installing locally?

Because Docker gives you an isolated, clean environment and is easier for deployment.

Q2. Do I need to write a long Dockerfile for NGINX?

No. NGINX official image is already optimized. You hardly need 3–4 lines.

Q3. Can I serve CSS, JS, and images with this setup?

Yes. Just copy entire folder into /usr/share/nginx/html/.

Q4. Why map port 8080 instead of 80?

Port 80 may require admin rights. 8080 is safer for local development.

Q5. Can this be deployed to cloud servers?

Absolutely — the same Docker image will work on any cloud provider.

Final Words

Building an NGINX webserver with Docker is one of the cleanest ways to learn how Docker actually works. You write a tiny Dockerfile → Docker builds the image → the image becomes a real running webserver → and your browser loads the page instantly.

Once you understand this flow, Docker stops feeling complicated. It becomes a simple tool:

“Take my code → follow my instructions → run my app anywhere.”

Exactly what Docker was made for.