Building and Exporting a Docker Image to Deploy a Static Website with Apache Web Server

4 min readMay 27, 2021

During this demonstration, a static Apache web-page will be created within a Docker container. A docker image will be built, and pushed to a GitHub repository.

The host O/S will be Fedora 34.

The following tasks will be completed:

Download and install docker
Download Apache 2.4.48 docker image
Run a detached container
Start interactive terminal to access container file-system
create index.HTML file on /usr/local/apache2/htdocs/index.html inside the container
test web-page
compose docker image

Download and install Docker

First, the set up the Docker repository to download the Docker application on the host machine:

$ sudo dnf -y install dnf-plugins-core
$ sudo dnf config-manager \
    --add-repo \
    https://download.docker.com/linux/fedora/docker-ce.repo

Now that the repository is set up, the Docker Engine and it’s dependencies can be installed:

$  sudo dnf -y install docker-ce docker-ce-cli containerd.io

Once Docker is installed, the daemon service must be started:

$ sudo systemctl start docker

Now that Docker is running, Docker images for Apache can now be downloaded.

Set Up the Base Apache Docker Image

First, a working Apache container must be created from a base Apache image. This container is based on Alpine Linux.

The image should first be fetched. This is done with the image pull argument; the image name for Apache is httpd and the version downloaded is the latest one avaialble:

$ sudo docker image pull httpd:latest
latest: Pulling from library/httpd
69692152171a: Pull complete 
7284b4e0cc7b: Pull complete 
3678b2d55ccd: Pull complete 
aeb67982a725: Pull complete 
06954f8169fd: Pull complete 
Digest: sha256:48bae0ac5d0d75168f1c1282c0eb21b43302cb1b5c5dc9fa3b4a758ccfb36fe9
Status: Downloaded newer image for httpd:latest
docker.io/library/httpd:latest

Run the Container in Detached Mode

Once the Apache image is pulled, it can then be started. The port for the running container will be mapped to port 80 for HTTP traffic requests on the host machine; it will be listening on port 80 within the container environment. The container will be ran in ‘detached mode’ so it can then be configured to display a created web page. The given name for the container in this demo will be “web-mania”.

$  sudo docker run -d --name web-mania -p 8080:80 httpd
54f085a273fbb470597775835f5a7772930ea6e234f6df968f611d852cbf3a23

It can be verified that the Docker container is running with its given name and port mapping using the docker ps command:

$ sudo docker ps
CONTAINER ID   IMAGE     COMMAND              CREATED         STATUS         PORTS                                   NAMES
54f085a273fb   httpd     "httpd-foreground"   9 minutes ago   Up 9 minutes   0.0.0.0:8080->80/tcp, :::8080->80/tcp   web-mania

Start an Interactive Terminal to Access the Created Container

Now that the created container is now running, an interactive terminal can be launched with the docker container exec -it command. The bash shell needs to be declared for the command to work:

$ sudo docker container exec -it web-mania /bin/bash
root@54f085a273fb:/usr/local/apache2#

Now that access is granted to the running container, a default index.html page must be created; first, the container OS should be updated, and a text editor installed:

root@54f085a273fb:/usr/local/apache2#  apt-get update;apt-get install nano

Create the index.html File

Once the text editor is installed, an index.html page can be created in the proper directory to display the web-page:

root@54f085a273fb:/usr/local/apache2# nano /usr/local/apache2/htdocs/index.html

This opens the text editor that will create the home page:

GNU nano 3.2                 /usr/local/apache2/htdocs/index.html                            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web-Mania!!!</title>
</head>
<body>
    <h1>This is a test landing page for the created docker image</h1>
</body>
</html>
^G Get Help   ^O Write Out  ^W Where Is   ^K Cut Text   ^J Justify    ^C Cur Pos
^X Exit       ^R Read File  ^\ Replace    ^U Uncut Text ^T To Spell   ^_ Go To Line

Test the Created Apache Static Website

Once this is done, navigate to http://127.0.0.1:8080/index.html, and the test landing page should show up:

the created index.html page should display

Create a Custom Docker Image from the Created Container

Now a custom image can be created from our running container using the docker commit command:

$ sudo docker commit web-mania
sha256:c9917b2064a66830a1292686fb384f8090a8b13dc0a0509c553eac7d42ca3206

A new image was just created; this can be verified by running the docker images command to list all images on the host machine:

$ sudo docker images
REPOSITORY    TAG       IMAGE ID       CREATED         SIZE
<none>        <none>    c9917b2064a6   2 minutes ago   157MB
httpd         latest    39c2d1c93266   45 hours ago    138MB
hello-world   latest    d1165f221234   2 months ago    13.3kB

An image was created, and now a tag can be associated with the new image using the docker image tag command:

$ sudo docker image tag c9917b2064a6 docker-mania-apache:1.0

Now the created image has an alias called “docker-mania-apache:1.0”, this is verified by running the docker images command again:

$ sudo docker images
REPOSITORY            TAG       IMAGE ID       CREATED          SIZE
docker-mania-apache   1.0       c9917b2064a6   10 minutes ago   157MB
httpd                 latest    39c2d1c93266   45 hours ago     138MB
hello-world           latest    d1165f221234   2 months ago     13.3kB

This created image can then be exported and distributed as needed by using the docker save command:

$ sudo docker save docker-mania-apache:1.0 | gzip > docker-mania-apache.tar.gz