Click here to Skip to main content
13,663,132 members
Click here to Skip to main content
Add your own
alternative version

Stats

2.9K views
5 bookmarked
Posted 10 Aug 2018
Licenced CPOL

Static Website Using Docker

, 10 Aug 2018
Rate this:
Please Sign up or sign in to vote.
Create a Docker Container to serve static web content that can be viewed from a browser

The goal for this article is 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:

HelloWorld_Loading

Here is the HTML:

< html>
  < head>
    < title>Sample Website
    < script src="app.js">
    < 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 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:

HelloWorld_Loading

There is now a working container that serves the web page!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Caleb McElrath
Software Developer
United States United States
Caleb is a software development consultant specialized in creating web solutions for critical business problems. He has a passion for front-end development and helping other developers find their role. He enjoys making development easier to do, easier to learn and easier to improve upon. His days are pleasantly filled with TypeScript, HTML5 and C#.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180810.1 | Last Updated 10 Aug 2018
Article Copyright 2018 by Caleb McElrath
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid