Hosting static HTML files locally with Docker

In my last post I outlined my plan for Haskell, Docker & AWS development workflow. Here's the first part of my plan:

Prepare a basic Docker image to host static HTML files locally.

I'm going to cover two methods here:

1. Use a vanilla HTML server image and map the resources to be hosted.
   This way you can make changes to the hosted HTML files and see them reflected in the browser without the need of restarting or creating a new container.
2. Use a vanilla HTML server image to build your own image on top of it.
   This way you can generate dockerfiles which, when built, will include the hosted resources in the docker images they produce.

Let's take a closer look at the two methods.

---

Prearation

If you're completely new to do Docker, I highly recommend watching this video. 40 minutes well spent and in that time you will have the contents of this post explained in detail. I will be using Docker version 17.06.1-ce and Windows.

When you're ready, there's some preparation to be done for both methods: we're going to need a web server able to host static HTML files. One of the most popular choices is nginx and at the time of writing this, the latest stable version is 1.12.1. In this post I'm going to use the 1.12.1-alpine simply because the image itself is small.

Let's pull that image:

docker pull nginx:1.12.1-alpine

Method 1

Command:

docker run --name tiny-nginx -d -v c:\temp\:/usr/share/nginx/html:ro -p 80:80 nginx:1.12.1-alpine

Explanation:

Run a docker container named (--name) "tiny-nginx" as a daemon (-d), bind mount a volume (-v) containing the resource you'd like to host in the following way: "container-host-HTML-folder-path:container-HTML-folder-path" (see how my windows container host path - "c:\temp"*, neatly mixes with the linux container path - "/usr/share/nginx/html"?**), in a read-only manner (:ro), exposing container's port 80 to my container host port 80 (so that I can actually access the HTML page from my local machine) using image "nginx" tagged as "1.12.1-alpine".

*It is important to note that we are mounting folders and not individual files. **This folder was given in the nginx image documentation.

Windows is going to ask for your permission to share the selected folder:

And now you're set. Your shared and mounted folder is now being hosted by the tiny-nginx container and every time you make changes to the HTML file locally, they should be reflected in the browser every time you refresh the hosted page. This method is pretty neat and allows for rapid write & verify iterations.

Method 2

In this method we're also going to create a docker container based on an image, but this time the image we're going to use is going to be built by ourselves on top of an existing one: nginx:1.12.1-alpine.

To do that, we first need a dockerfile. This is going to serve as a definition of our image.

Code (file: dockerfile):

FROM nginx:1.12.1-alpine
MAINTAINER piotr - dot - justyna - at - gmail.com
COPY html /usr/share/nginx/html

Explanation:

Based on image nginx, tagged 1.12.1-alpine (FROM), create a new image with a given maintainer and while creating the image, copy the contents of the container host's "html" folder* to container's "/usr/share/nginx/html"** folder (COPY).

*It is important to note that we are mounting folders and not individual files and that the folder referenced as in the example, must be available in the current, working directory.
**This folder was given in the nginx image documentation.

This basic dockerfile can now be converted (built) into an actual new image.

Command:

docker build -t static-content-nginx:1.12.1-alpine .

Explanation:

Build and optionally tag (-t) and image (name:tag -> static-content-nginx:1.12.1-alpine) using a dockerfile found in the current folder (.).

Now the image should get added to the list of docker's images. We can now run it as if it was any other image pulled from the Internet (see the Preparation section).

Command:

docker run --name tiny-nginx -d -p 80:80 static-content-nginx:1.12.1-alpine

Note the similarities between this command and the one I used in Method 1. The only difference is that we're not mounting a shared folder. Simply because it has already been added to the image itself during the build phase.

---

Both methods should result in the file being hosted in the locally running containers. For now, there should be only one container hosting the HTML file at any given time. Results:

That's it for now and you can find the dockerfile together with some sample HTML to be hosted here. In the next part I'm going to cover how to use the image we created in Method 2 in ECS (and not Method 1 as sharing and mounting local resources would be quite tricky!) and publish my sophisticated HTML code globally.

Stay tuned and keep hacking! Piotr