The goal of this article is to describe a process for serving static web files from a Docker Container. It is surprisingly easy to create a static website with docker.
The website structure is very simple and consists of only 3 files:
./site/ style.css app.js index.html
At the project root there is a Dockerfile:
./ Dockerfile
The website displays “Loading” text. When the JavaScript file is loaded, Hello World is displayed in big red letters:
Here is the HTML:
<html>
<head>
<title>Sample Website</title>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>Loading</body>
</html>
Here is the Dockerfile:
FROM nanoserver/iis COPY ./site/ /inetpub/wwwroot/
The lines in the Dockerfile are key to getting the webserver image created. This file allows us to create a new docker image. The image is used to run a docker container.
The first line specifies the base image. In this case, it is an image with a configured Nano Server with IIS. There are smaller webserver images that are usually preferable.
The second line will copy the local project files from the ‘site’ folder to the wwwroot folder of the nanoserver image.
That is everything needed to get a web server started to serve the web page. To create the image, start with docker build:
> docker build -t webserver-image:v1 .
The docker build command is used to create an image. When it is executed from a command line within the directory of a Dockerfile, the file will be used to create the image. The -t option allows the ability to name and optionally tag the image. In this case, the name is “webserver-image” with the “v1” tag. Tags are generally used to version images. The last argument is the path used to build the image. In this case, it is . which is the current directory.
Running the command will build the image:
> docker build -t webserver-image:v1 . Sending build context to Docker daemon 26.11kB Step 1/2 : FROM nanoserver/iis ---> 7eac2eab1a5c Step 2/2 : COPY ./site/ /inetpub/wwwroot/ ---> fca4962e8674 Successfully built fca4962e8674 Successfully tagged webserver-image:v1
The build succeeded. This can be verified by running docker image ls:
> docker image ls REPOSITORY TAG IMAGE ID CREATED SIZE webserver-image v1 ffd9f77d44b7 3 seconds ago 1.29GB
If the build doesn’t succeed, there may be a few things to double-check. This includes making sure the Dockerfile is available, nanoserver images can be pulled, and paths are accurate.
Now that an image is created, it can be used to create a container. This can be done with the docker run command:
> docker run --name web-dev -d -it -p 80:80 webserver-image:v1
After running the command, the container id will be displayed:
> docker run --name web-dev -d -it -p 80:80 webserver-image:v1 fde46cdc36fabba3aef8cb3b91856dbd554ff22d63748d486b8eed68a9a3b370
A docker container was created successfully. This can be verified by executing docker container ls:
> docker container ls CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES fde46cdc36fa webserver-image:v1 "c:\\windows\\system32…" 31 seconds ago Up 25 seconds 0.0.0.0:80->80/tcp web-dev
The container id is displayed (a shorter version of what was shown when executing docker run). The image that was used for the container is also displayed along with when it was created, the status, port, and the container name.
The following docker inspect command will display the IP address:
> docker inspect -f "{{ .NetworkSettings.Networks.nat.IPAddress }}" web-dev
172.19.112.171
This IP address is what can be called in a browser to view the page:
There is now a working container that serves the web page!
I learn by doing and found that most of us in tech do. That is why I got Manning Publications’ Docker in Action to learn Docker using their step-by-step instructions and immediately actionable information to apply to enterprise-level projects.
Their “In Action” series takes the reader on an active journey by way of doing. After learning the details of using Docker to release enterprise-level software I wanted to be sure I understood the concepts and practices behind the delivery. Manning Publications has another book called Docker in Practice. Their “In Practice” series dives deep into the concepts presented by the technology. Together, Docker in Action and Docker in Practice create a well-rounded course in leveraging Docker effectively.
3 thoughts on “How to Easily Create a Static Website With Docker”