Building a Docker Image with NGINX and Two Volumes to Create a Container for Web Hosting

Hello Everyone, thank you for visiting my Blog today, today we will be building a docker image with NGINX as the base image, with 2 volumes mounted to create a container for our web hosting.

If you're new to Docker and web hosting, this project will help you get started. We’ll be building a Docker image that uses NGINX — a simple and fast web server. To make things more interesting, we’ll also add two volumes: one to hold our website files and another for configuration settings. Once we’ve built the image, we’ll run it as a container that can easily serve our website. By the end of this project, you'll have a basic understanding of Docker, NGINX, and how to set up a simple web server in a container.

Lets Get Started.

Step 1.

Login as a Root user to our Linux Environment, Command to login is "sudo su -" Enter your password to login to root, then Run the command "apt update" to update all packages on your Linux Environment. once done we move to the next step.

Step 2.

Then We create a directory that will house our Dockerfile, Command to create a directory is "mkdir directoryname" so in essence we run the command as "mkdir newproject" where "newproject" is our directory name. to verify if our directory called "newproject" has been created we will use this command to view it "ls" after viewing it and seeing that our directory or folder has been created with the name "newproject" we cd into the directory with this command "cd newproject" cd means to change directory meaning , we want to move from the root into the directory we created named "newproject"

Step 3.

After we have cd into our directory then we vim into our dockerfile with the command "vim Dockerfile" , after we vim into our Dockerfile , we edit our Dockerfile and add the following NGINX configuration as the base for our custom Docker image.

FROM nginx

VOLUME /usr/share/nginx/html

VOLUME /var/log/nginx

WORKDIR /usr/share/nginx/html

Then We save the Dockerfile and Exit with :wq

Step 4.

After We exit our Dockerfile back into our directory that housed our Dockerfile, we run this command to Build the image "docker build -t la/nextgen:latest -f Dockerfile . " then we will get a prompt that our image was built successfully.

Step 5.

After we have successfully built our image , then we will Create a Volume for the HTML Files, please note earlier, i made this know that we will be creating 2 volumes for this project, so our first volume we will create we will name it "nginx-code" command to create volume is “docker volume create nginx-code”, after creating this first volume we can check if we created it successful with the command "docker volume ls" Then we will create the second volume for Nginx Logs and name it nginx-logs we run the command again "docker volume create nginx-logs, then we check with the command "docker volume ls" again to check if it was created successfully, Now that we have created our 2 volumes successfully, we will now create a container.

Step 5.

We will now create a container and name it "nextgen-dev" We use this command " docker run -d --name=nextgen-dev -p 80:80 --mount source=nginx-code,target=/usr/share/nginx/html --mount source=nginx-logs,target=/var/log/nginx la/nextgen:latest " once we have created our container , we can use the command "docker ps -a" to view the list of containers we have on our environment, once we can verify that our container was created successfully. we move to the next step.

Step 6.

Then our next step is to check out the volumes we created with this command "cd /var/lib/docker/volumes/ " then we run command "ls" to check if our volumes are intact, once we see them intact we Proceed to the next step , that is to change directory we will use the command to change to nginx-code " cd nginx-code/_data/ " then we run command "ls" again to verify if our index.html file is intact inside the directory called " nginx-code", Next step is to modify the HTML file, we Vim into the index.html file with command "vim index.html" then we edit our code. by Adding what so ever text we want to add , for this project i will be adding “Hello There” and “Welcome to nginx for Techman”

Step 7.

Finally after editing the code, we will save it and exit the file, then open a web browser tab , paste the public IP of our local host, this should return the Welcome to Nginx" web Page.

In Conclusion, Working on this project gave me a solid introduction to Docker and how it's used in real-world web hosting setups. By building a Docker image with NGINX and configuring two volumes—one for static content and another for configuration—I got to see firsthand how powerful and flexible containers can be.

Also going through this process helped me better understand how containerization can simplify deployments and keep environments consistent. There’s still so much more to learn, but this felt like a great starting point.

If you are new to Docker or DevOps, I hope this guide gave you a clear path to start experimenting on your own. And if you’re more experienced, feel free to share any tips or best practices—I’m definitely open to learning more!

Thanks for following along, See you on the Next one.

Tech Bro.