Skip to main content
Docker Basics Tutorial
CHAPTER 09 Beginner

Running Web Servers with Docker

Updated: May 15, 2026
20 min read

# CHAPTER 9

Running Web Servers with Docker

1. Introduction

The most common use case for Docker is serving web applications. Historically, configuring a web server like Apache or Nginx directly on a Linux machine involved editing complex configuration files hidden deep in /etc/nginx/, battling file permission errors, and restarting the system daemon endlessly. Docker abstracts this pain away entirely. In this chapter, we will master deploying blazing-fast web servers using official Docker images, hosting static websites, and understanding the basics of a Reverse Proxy.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the difference between Apache and Nginx images.
  • Host a static HTML/CSS/JS website using Docker and Bind Mounts.
  • Override default Nginx configuration files within a container.
  • Define the architectural concept of a Reverse Proxy.
  • Deploy a multi-container web architecture using Nginx.

3. Beginner-Friendly Explanation

Imagine running an art gallery (Your Web Server).
  • The Traditional Way: You build the gallery building from scratch, hire the security guards, install the lighting, and finally hang your paintings. It takes months.
  • The Docker Way: You rent a pre-built, fully staffed, state-of-the-art gallery building that materializes in 3 seconds (The Nginx Docker Container). All you have to do is slide your paintings (Your HTML files) into the designated display room via a Bind Mount. The gallery opens immediately to the public.

4. Nginx vs. Apache

Docker Hub provides official images for both major web servers:
  • Apache (httpd): The older, traditional workhorse of the internet. Highly customizable using .htaccess files. Great for legacy PHP applications.
  • Nginx (nginx): The modern, high-performance champion. It consumes vastly less RAM under heavy load and is specifically designed to handle tens of thousands of simultaneous connections. It is the industry standard for modern web architecture. *(We will focus on Nginx).*

5. Serving a Static Website

To serve a static website (HTML/CSS), you do not need to build a custom Docker image. You simply use the official Nginx image and use a Bind Mount to map your local website folder directly to Nginx's default public HTML directory: /usr/share/nginx/html.

6. The Reverse Proxy Concept

In modern architectures, you rarely expose your backend API (like a Node.js server running on port 3000) directly to the public internet. It is a security risk. Instead, you place an Nginx container at the front door (Port 80/443). When a user visits myapp.com, they hit Nginx. Nginx acts as a Reverse Proxy (a traffic cop). It looks at the request:
  • If the user asks for /images/logo.png, Nginx serves the file directly.
  • If the user asks for /api/users, Nginx secretly forwards the request to the hidden Node.js container, gets the JSON data, and passes it back to the user. The user never knows the Node.js container exists!

7. Mini Project: Host a Portfolio Website

Let's host a custom website using a single Docker Compose file.

Step-by-Step Tutorial:

  1. 1. Create a folder named my-portfolio. Open your terminal and cd into it.
  1. 2. Inside, create a folder named website.
  1. 3. Inside the website folder, create an index.html file:

html
1234567 
<!DOCTYPE html>
<html>
<body style="background-color: #282c34; color: white; font-family: sans-serif; text-align: center; padding-top: 50px;">
    <h1>Welcome to My Dockerized Portfolio!</h1>
    <p>Serving blazing fast static content via Nginx.</p>
</body>
</html>
  1. 4. Back in the root my-portfolio folder, create docker-compose.yml:
yaml
12345678 
version: &#039;3.8'
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./website:/usr/share/nginx/html:ro

*(Notice the :ro at the end of the volume mapping? It stands for "Read-Only". This is a massive security boost! It tells Docker that even if a hacker compromises Nginx, they physically cannot overwrite or deface your HTML files).*

  1. 5. Run the server:

bash
1 
docker-compose up -d
  1. 6. Open your browser to http://localhost. You will see your beautiful portfolio site! Because of the Bind Mount, if you edit index.html on your laptop and hit refresh, the changes appear instantly.

8. Real-World Scenarios

A marketing team needs to launch a temporary promotional website for a massive weekend ad campaign. The DevOps team does not provision a new physical server. They simply take the static HTML files, write a 10-line Dockerfile inheriting from nginx:alpine, build the image, and push it to AWS ECS Fargate. The website effortlessly handles 100,000 hits over the weekend, and is gracefully deleted on Monday morning.

9. Best Practices

  • Custom Configuration Files: To change Nginx's behavior (e.g., to configure a Reverse Proxy), you must overwrite its default configuration file. You achieve this by creating a custom nginx.conf file on your laptop and using a volume mount to inject it over the container's default config:
- ./my-custom-nginx.conf:/etc/nginx/nginx.conf:ro.

10. Common Mistakes

  • Port 80 Conflicts: If you try to run your Nginx container with -p 80:80, and Docker throws an error saying "bind: address already in use," it means another program on your laptop (like Skype, or a local installation of Apache/XAMPP) is already hogging Port 80. You must turn off the offending software, or change Docker's host port to -p 8080:80.

11. Exercises

  1. 1. What is the default internal path where the official Nginx Docker image expects to find your index.html file?
  1. 2. Explain the security benefit of appending :ro to a volume mount instruction.

12. FAQs

Q: Can I run PHP code in the standard Nginx image? A: No! Nginx is purely a web server; it does not contain the PHP interpreter. If you mount an index.php file into the standard Nginx container, the browser will simply download the raw text file instead of executing it. (We will solve this in the next chapter!).

13. Interview Questions

  • Q: Describe the architectural pattern of utilizing Nginx as a Reverse Proxy in a Dockerized environment. What security and performance benefits does this provide over exposing application containers directly to the host network?
  • Q: A junior developer is struggling to update their website's configuration. They are using docker exec to log into an Nginx container, using vi to edit the nginx.conf file, and restarting the container. Explain why this violates containerization principles and provide the correct methodology.

14. Summary

In Chapter 9, we transformed our local machines into high-performance web hosts. We evaluated Nginx as the modern standard for web serving and demonstrated how to utilize the official Docker image to serve static content instantly without complex OS-level configurations. We emphasized security by implementing read-only Bind Mounts, and we laid the architectural groundwork for Reverse Proxies, establishing how traffic cops route public requests to hidden backend services.

15. Next Chapter Recommendation

Serving static HTML is easy. But how do we execute dynamic, server-side code like PHP? Proceed to Chapter 10: Docker for PHP Development.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Docker Compose Fundamentals
Next Chapter Docker for PHP Development

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5

❓ Related Quizzes 6

🎥 Related Videos 1