Docker Compose with Nginx - Mini Project: Build & Apply

Docker Compose with Nginx

📖 Scenario: You want to run a simple web server using Nginx inside a Docker container. To make it easy to start and stop, you will use Docker Compose to manage the container.This project will guide you to create a Docker Compose file that runs Nginx and serves a basic web page.

🎯 Goal: Build a Docker Compose setup that runs an Nginx container serving a simple HTML page on your local machine.

📋 What You'll Learn

Create a Docker Compose YAML file named docker-compose.yml

Define a service named web that uses the official nginx:latest image

Map port 8080 on your machine to port 80 in the container

Mount a local directory ./html to /usr/share/nginx/html inside the container

Create an index.html file inside ./html with the text Hello from Nginx!

💡 Why This Matters

🌍 Real World

Docker Compose is widely used to run multiple containers easily. Nginx is a popular web server to serve websites or act as a reverse proxy.

💼 Career

Understanding Docker Compose and Nginx is essential for DevOps roles to deploy and manage web applications efficiently.

1

Create the HTML file

Create a directory called html in your project folder. Inside html, create a file named index.html with the exact content: Hello from Nginx!

Nginx

# Create the directory 'html' and inside it create 'index.html' with the text 'Hello from Nginx!'
# Your code here

Hint

Use mkdir -p html to create the folder and echo 'Hello from Nginx!' > html/index.html to create the file with content.

2

Create the Docker Compose file

Create a file named docker-compose.yml in your project folder. Define a service called web that uses the image nginx:latest.

Nginx

mkdir -p html

echo 'Hello from Nginx!' > html/index.html

# Create docker-compose.yml with service 'web' using image 'nginx:latest'
# Your code here

Hint

Start your docker-compose.yml with version: '3' and define the web service with image: nginx:latest.

3

Add port mapping and volume mount

In docker-compose.yml, under the web service, add port mapping to map port 8080 on your machine to port 80 in the container. Also, mount the local ./html directory to /usr/share/nginx/html inside the container.

Nginx

version: '3'
services:
  web:
    image: nginx:latest
    # Add ports and volumes below
    # Your code here

Hint

Use ports: with - "8080:80" and volumes: with - ./html:/usr/share/nginx/html.

4

Run Docker Compose and check output

Run docker-compose up -d to start the Nginx container. Then run curl http://localhost:8080 to get the web page content. Print the output of the curl command.

Nginx

version: '3'
services:
  web:
    image: nginx:latest
    ports:
      - "8080:80"
    volumes:
      - ./html:/usr/share/nginx/html

# Run docker-compose up -d and then curl localhost:8080
# Print the curl output
# Your code here

Hint

Use docker-compose up -d to start the container and curl http://localhost:8080 to fetch the page. Print the result.

Practice

1. What is the main purpose of using Docker Compose with Nginx?

easy

A. To replace Nginx with a different web server

B. To run Nginx and other services together easily using a YAML file

C. To write Nginx configuration files in JSON format

D. To compile Nginx from source code automatically

Solution

1. Step 1: Understand Docker Compose role

   Docker Compose helps run multiple services together using a simple YAML file.

2. Step 2: Connect with Nginx usage

   Using Docker Compose with Nginx lets you start Nginx and other needed services easily.

3. Final Answer:

   To run Nginx and other services together easily using a YAML file -> Option B

4. Quick Check:

   Docker Compose + Nginx = easy multi-service setup [OK]

Hint: Docker Compose uses YAML to run multiple services together [OK]

Common Mistakes:

• Thinking Docker Compose changes Nginx config format
• Confusing Docker Compose with Nginx replacement
• Assuming Docker Compose compiles software

2. Which of the following is the correct way to expose port 80 of an Nginx container in a Docker Compose file?

easy

A. publish: 80

B. expose: 80:80

C. ports: - "80:80"

D. port: 80

Solution

1. Step 1: Recall Docker Compose port syntax

   To expose ports, use the 'ports' key with format "hostPort:containerPort" as a list item.

2. Step 2: Match correct syntax

   Only 'ports: - "80:80"' correctly exposes container port 80 to host port 80.

3. Final Answer:

   ports: - "80:80" -> Option C

4. Quick Check:

   Expose ports with 'ports: - "host:container"' [OK]

Hint: Use 'ports: - "hostPort:containerPort"' to expose ports [OK]

Common Mistakes:

• Using 'expose' with port mapping syntax
• Writing 'port' instead of 'ports'
• Using 'publish' which is invalid in Compose

3. Given this Docker Compose snippet, what will happen when you run docker-compose up?

services:
  web:
    image: nginx:latest
    ports:
      - "8080:80"
    volumes:
      - ./site-content:/usr/share/nginx/html:ro

medium

A. Nginx will serve files from /usr/share/nginx/html on port 80 only

B. Nginx will serve default content on port 80

C. Nginx will fail to start due to volume error

D. Nginx will serve files from ./site-content on port 8080

Solution

1. Step 1: Analyze port mapping

   Port 8080 on host maps to port 80 in container, so access via localhost:8080.

2. Step 2: Analyze volume mapping

   Local folder './site-content' is mounted read-only to Nginx's html folder, so custom files are served.

3. Final Answer:

   Nginx will serve files from ./site-content on port 8080 -> Option D

4. Quick Check:

   Port 8080 mapped and volume mounted = custom site served [OK]

Hint: Check ports and volumes to predict container behavior [OK]

Common Mistakes:

• Ignoring port mapping and assuming port 80
• Assuming volume mount fails without error
• Confusing container and host ports

4. You wrote this Docker Compose service for Nginx but after running docker-compose up the container starts but you cannot access Nginx on port 80:

services:
  nginx:
    image: nginx
    ports:
      - "80"
    volumes:
      - ./html:/usr/share/nginx/html

What is the likely cause?

medium

A. Port mapping "80" maps a random host port to container 80; should be "80:80"

B. Volume path './html' does not exist

C. Image name 'nginx' is invalid

D. Missing environment variables for Nginx

Solution

1. Step 1: Check port mapping syntax

   "80" is valid short syntax mapping random host port to container port 80; to bind host port 80 use "80:80".

2. Step 2: Confirm other parts

   Volume path and image name are valid; environment variables are optional for basic Nginx.

3. Final Answer:

   Port mapping "80" maps a random host port to container 80; should be "80:80" -> Option A

4. Quick Check:

   Port mapping must be "hostPort:containerPort" [OK]

Hint: Port mapping needs both host and container ports separated by colon [OK]

Common Mistakes:

• Using single port number without colon
• Assuming volume path error without checking
• Thinking image name 'nginx' is wrong

5. You want to run Nginx with Docker Compose and add a custom configuration file nginx.conf located in your project folder. Which Docker Compose volume setting correctly mounts this file to override the default Nginx config at /etc/nginx/nginx.conf?

hard

A. - ./nginx.conf:/etc/nginx/nginx.conf:ro

B. - ./nginx.conf:/usr/share/nginx/html/nginx.conf

C. - /etc/nginx/nginx.conf:./nginx.conf

D. - ./nginx.conf:/etc/nginx/conf.d/nginx.conf

Solution

1. Step 1: Identify correct Nginx config path

   The main Nginx config file is at /etc/nginx/nginx.conf inside the container.

2. Step 2: Match volume mount syntax

   Mount local nginx.conf to container path with read-only flag ':ro' to override default config safely.

3. Final Answer:

   - ./nginx.conf:/etc/nginx/nginx.conf:ro -> Option A

4. Quick Check:

   Mount local config to /etc/nginx/nginx.conf with ':ro' [OK]

Hint: Mount config file to /etc/nginx/nginx.conf with ':ro' for safety [OK]

Common Mistakes:

• Mounting to wrong container path
• Reversing source and target paths
• Omitting ':ro' for config files