Module 14 Lesson 5: Project: Static Site with Nginx

Sometimes you don't need a backend. You just have a beautiful landing page or a React/Vue "Single Page App" (SPA). For these, Nginx is the gold standard for performance and simplicity.

1. The Simplest Dockerfile

FROM nginx:alpine

# 1. Copy our static files into Nginx's public folder
COPY ./public /usr/share/nginx/html

# 2. Expose the port
EXPOSE 80

---

2. Managing Custom Config (nginx.conf)

If your Single Page App has "Pretty URLs" (e.g., myapp.com/dashboard), Nginx needs to know how to handle them, or it will give a 404 error when you refresh the page.

# nginx.conf
server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        # This line is critical for React/Vue routers!
        try_files $uri /index.html;
    }
}

Add this to your Dockerfile: COPY nginx.conf /etc/nginx/conf.d/default.conf

---

3. Why use Nginx instead of python -m http.server?

1. Caching: Nginx can set "Cache-Control" headers so your users' browsers remember the images, making the site load instantly on the second visit.
2. Compression: Nginx can automatically "Gzip" your Javascript files, making them 70% smaller to download.
3. Security: Nginx is hardened against common web attacks and can handle thousands of simultaneous connections with almost zero RAM.

---

4. Multi-Stage Build (React/Vite Example)

(Review Module 6). This is how you build and serve a modern site in one file:

# Stage 1: The Build Machine
FROM node:18 AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build

# Stage 2: The Production Server
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html

---

Exercise: The Static Deploy

1. Create a folder with a simple index.html (add some CSS and an image!).
2. Write the simple Dockerfile from Section 1.
3. Build and run it. Visit localhost:8080.
4. Modify your index.html. Refresh the browser. Did it change? (Wait, what about caching? Check the Network tab in your DevTools!).
5. Why is an "Alpine" version of Nginx better for a public website than the standard version? (Hint: size and security).

---

Summary

You have completed the Hands-on Projects module. You now know how to containerize everything from a modern MERN stack to a legacy PHP site, from an AI research lab to a high-speed static landing page.

Next Module: The final exam: Module 15: Capstone Project: Enterprise-Grade Multi-Container System.