How to Host a Webpage with Docker Compose

Hosting a webpage can be a daunting task, especially if you’re not familiar with the technical aspects of server management. Luckily, Docker Compose offers a simple and efficient way to host your webpage on a server with minimal effort. In this tutorial, we’ll guide you through the process of using Docker Compose to deploy your webpage, step by step. Whether you’re a developer looking to host your personal portfolio or a small business owner seeking a cost-effective hosting solution, this guide is for you. Let’s dive in!

Here are the commands to install Docker, and docker-compose here at the start of 2023

Update the apt package index

sudo apt-get update

Install Docker’s dependencies

sudo apt-get install -y apt-transport-https ca-certificates curl gnupg-agent software-properties-common

Add Docker’s official GPG key

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Add Docker’s stable repository to your system’s apt sources list

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Update the apt package index (again)

sudo apt-get update

Install Docker

sudo apt-get install -y docker-ce docker-ce-cli containerd.io

Download the latest version of Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Make the Docker Compose binary executable

sudo chmod +x /usr/local/bin/docker-compose

Verify that Docker is installed correctly

docker --version

Verify that Docker Compose is installed correctly

docker-compose --version

Now that we have Docker, and docker-compose installed on the server, VM, or LXC container. It is time to start making the files that docker-compose will need to setup the nginx container and host the webpage

I am going to make this file in my user folder

/home/[user name]

mkdir /home/[user name]/[site name]

Inside of this folder we need to make a yaml file called docker-compose.yaml

nano /home/[user name]/[site name]/docker-compose.yaml

now that you have your docker-compose.yaml file open it is time to start filling this file with info remeber this is a yaml file so spacing matters

The first line we will be adding is

version: '3'

This line specifies the version of the Docker Compose syntax that is used in this file. In this case, version 3 is used.

The Next line is

services:

This line indicates the start of the services section of the file. This section is used to define the containers that should be created by Docker Compose.

The next line will have two spaces at the start of it

[service name]:

This line defines a service. This service will create a container based on the nginx image with the name in this line.

This next line will now start with 3 spaces

image: nginx:latest

This line specifies the image that should be used for the service. In this case, the nginx image is used, with the latest tag. This means that the latest version of the nginx image will be downloaded from Docker Hub when the container is created.

This next lines will have 3 spaces

ports:
  - "80:80"

This line specifies that port 80 of the container should be mapped to port 80 of the host machine. This allows the web server running in the container to be accessible from the host machine.

This next lines will have 3 spaces

volumes:
  - ./[site name]/nginx.conf:/etc/nginx/conf.d/default.conf
  - ./[site name]/index.html:/usr/share/nginx/html/index.html

This line specifies that a volume should be created. This allows you to customize the NGINX configuration for the container.

The finished file should look something like

version: '3'
services:
  
  [service name]:
      image: nginx:latest
      ports:
        - "80:80"
      volumes:
        - ./[site name]/nginx.conf:/etc/nginx/conf.d/default.conf
        - ./[site name]/index.html:/usr/share/nginx/html/index.html

As you can see from the finished docker-compose.yaml we are going to need two more files for this web server one called nginx.conf to tell nginx how to host the index.html file that will hold the webpage.

I am going to just give you a boiler plate with a title for the index.html file you can place yours here but this one will work for testing.

nano /home/[user name]/[site name]/index.html

<!DOCTYPE html>
<html>
	<head>
		<title>My first HTML</title>
	</head>
	<body>

	</body>
</html>

Now it is time to work on the nginx.conf file.

/home/[user name]/[site name]/nginx.conf

This is probably the most basic file that one could create as a nginx.conf file but it will get the job done lets look at how it is made.

The first black is called the server block. In NGINX, a server block is used to define the configuration for a specific virtual server.

server {
}

Inside of the server block we need to tell nginx what port to listen on we do that with this line.

listen 80;

Now we need to make a new block inside of the server block called the location block, which is used to specify the configuration for a particular URL location. In this case, the / location is being configured, which is the default location for the server.

location / {
}

inside of the location block we need to tell nginx where to find the the root directory for the server. In this case, it is set to /usr/share/nginx/html, which is the default directory for static HTML files in NGINX.

root /usr/share/nginx/html;

last we need to tell nginx the default file that should be served when a client requests a directory. In this case, it is set to index.html, which means that if a client requests the root URL of the server, NGINX will look for an index.html file in the root directory and serve it if it exists.

here is what it all looks like when it is finished

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

Now the we have made all the need files it is time to start the docker container using the docker-compose.yaml file.

lets cd to the folder that all the files are in

cd /home/[user name]/[site name]

now run the command

sudo docker-compose up -d

load your we browser and go the the ip of your server and you should see your webpage.

good luck

some other commands that you might find helpful are

sudo docker-compose ps

to view if your container is running and

sudo docker-compose stop

to stop you container from running.

In conclusion, Docker Compose offers a simple and efficient way to host your webpage on a server with minimal effort. With just a few commands, you can have Docker and Docker Compose installed on your server, and easily set up a container running an NGINX web server with your webpage. By following the steps outlined in this tutorial, whether you are a developer looking to host your personal portfolio or a small business owner seeking a cost-effective hosting solution, you can get your webpage up and running in no time. The use of Docker Compose simplifies the process of web hosting and is a great option to consider for anyone who wants to host a webpage without the need for extensive server management knowledge.

Leave a Reply Cancel reply