How to Deploy Static HTML Site Using Docker and Ngnix

Amar Gurung February 16th, 2022

This blog walks you through the list of Linux commands to install Docker and deploy an HTML site using Docker and Nginx.

Contents

Install Docker in Linux VM.
Create a simple “Hello World HTML” page.
Steps to deploy HTML page using Docker and Nginx.
Summary

Docker installation commands

$ sudo yum install -y yum-utils
$ sudo yum-config-manager \
— add-repo \
https://download.docker.com/linux/centos/docker-ce.repo
$ sudo yum install docker-ce docker-ce-cli containerd.io
$ sudo systemctl start docker
$ sudo docker run hello-world

Create HTML page

[centos@ip-10-203-4-144 ~]$ vi hello.html
[centos@ip-10-203-4-144 ~]$ cat hello.html
<P> HELLO WORLD </P>

Steps to deploy HTML site:

Dockerfile contains code to represent the image we’re going to use along with copying the contents of the current directory into the container.
Add the current user to the docker group and change the primary group.
Build docker image.
Confirm whether the image is created.
Run docker container.
Test whether the HTML site is reachable or not using curl command or browser.

[centos@ip-10-203-4-144 ~]$ vi Dockerfile
[centos@ip-10-203-4-144 ~]$ cat Dockerfile
FROM nginx:alpine
COPY . /usr/share/nginx/html[centos@ip-10-203-4-144 html]$ sudo usermod -aG docker $USER && newgrp docker[centos@ip-10-203-4-144 html]$ docker build -t html-server-image:hello_v1 .
Sending build context to Docker daemon  3.072kB
Step 1/2 : FROM nginx:alpine
alpine: Pulling from library/nginx
540db60ca938: Pull complete
197dc8475a23: Pull complete
39ea657007e5: Pull complete
37afbf7d4c3d: Pull complete
0c01f42c3df7: Pull complete
d590d87c9181: Pull complete
Digest: sha256:07ab71a2c8e4ecb19a5a5abcfb3a4f175946c001c8af288b1aa766d67b0d05d2
Status: Downloaded newer image for nginx:alpine
---> a64a6e03b055
Step 2/2 : COPY . /usr/share/nginx/html
---> 131fd26c067f
Successfully built 131fd26c067f
Successfully tagged html-server-image:hello_v1[centos@ip-10-203-4-144 html]$ docker images
REPOSITORY          TAG        IMAGE ID       CREATED              SIZE
html-server-image   hello_v1   131fd26c067f   About a minute ago   22.6MB[centos@ip-10-203-4-144 html]$ docker run -d -p 80:80 html-server-image:hello_v1
dd87e0ff6b5c7f36c788a3113aeeaecf8958d066ec7b357491cafbf09284499f[centos@ip-10-203-4-144 html]$ curl localhost:80/hello.html
<P> HELLO WORLD </P>