A Beginner's Journey: Serving a Simple Static Web Page with Docker and Nginx

Introduction:

As a newcomer to the vast and dynamic world of containers and web servers, I recently found myself drawn to the simplicity and efficiency promised by Docker and Nginx. Eager to explore and learn, I embarked on a journey to set up a basic static web page using these technologies. This blog post outlines my experience, step-by-step, from installation to serving a static web page.

Getting Started:

Installing Docker and Docker Compose:

The first step in my adventure was to install Docker and Docker Compose. Docker simplifies the process of packaging and distributing applications in containers, while Docker Compose allows for easy management of multi-container applications. After a quick search and download, I had both tools up and running on my system.

Project Structure:

With Docker ready to go, I organized my project structure. The directory tree looked like this:

The app directory contained a static folder with my simple index.html file. The docker-compose.yml, Dockerfile, and nginx.conf files would play key roles in configuring and orchestrating my containers.

Configuring Nginx:

Writing the Dockerfile:

I created a Dockerfile to define the container's configuration.
This file included instructions for pulling the Nginx base
image, copying the necessary files, and setting up the working
directory.

nginx.conf Configuration:

The nginx.conf file allowed me to customize Nginx's
configuration. I specified the location of my static files and
configured the server to listen on the desired port.

Setting Up Docker Compose:

docker-compose.yml Configuration: Docker Compose simplified the process of managing multiple containers. In my docker-compose.yml file, I defined the services for Nginx, specifying the build context, ports, and volumes.