Static Website Using Docker
Create a Docker Container to serve static web content that can be viewed from browser
The goal for this article tis to describe a process for serving static web files from a Docker Container.
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:
Hello World
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Docker static site</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 web server 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 web server image 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 comman:
> docker run --name web-dev -d -it -p 80:80 webserver-image:v1
After running the command, the comtainer id will be displayed:
Hide Copy Code
> 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 shorted 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:
Hello world
There is now a working container that serves the web page!
