Ruan Bekker's Blog

From a Curious mind to Posts on Github

Create a Lightweight Webserver (Service) With Lighttpd on Alpine Running on Docker Swarm

In this post we will create a docker service that will host a static html website. We are using the alpine:edge image and using the lighttpd package as our webserver application.

The Directory Structure:

Our working directory consists of:

Directory Tree
1
2
3
4
5
6
7

$ tree
.
|-- Dockerfile
`-- htdocs
    `-- index.html

1 directory, 2 files

First, our Dockerfile:

Dockerfile
1
2
3
4
5
6
7
8
9

FROM alpine:edge

RUN apk update \
    && apk add lighttpd \
    && rm -rf /var/cache/apk/*

ADD htdocs /var/www/localhost/htdocs

CMD ["lighttpd", "-D", "-f", "/etc/lighttpd/lighttpd.conf"]

Then our htdocs/index.html which is based off bootstrap:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bare - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="https://objects.ruanbekker.com/assets/css/bootstrap/start-bootstrap-template/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
      body {
        padding-top: 54px;
      }
      @media (min-width: 992px) {
        body {
          padding-top: 56px;
        }
      }

    </style>

  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://startbootstrap.com/template-overviews/bare/">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <div class="row">
        <div class="col-lg-12 text-center">
          <h1 class="mt-5">A Bootstrap 4 Starter Template</h1>
          <p class="lead">Complete with pre-defined file paths and responsive navigation!</p>
          <ul class="list-unstyled">
            <li>Bootstrap 4.0.0-beta</li>
            <li>jQuery 3.2.1</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="https://objects.ruanbekker.com/assets/js/bootstrap/start-bootstrap-template/jquery.min.js"></script>
    <script src="https://objects.ruanbekker.com/assets/js/bootstrap/start-bootstrap-template/popper.min.js"></script>
    <script src="https://objects.ruanbekker.com/assets/js/bootstrap/start-bootstrap-template/bootstrap.min.js"></script>

  </body>

</html>

Creating the Service:

First we will need to build the image, for my personal projects, I like to use gitlab’s private registry, but there are many to choose from:

Build the Image
1
2
3

$ docker login registry.gitlab.com
$ docker build -t registry.gitlab.com/<user>/<repo>/lighttpd:bootstrap .
$ docker push registry.gitlab.com/<user>/<repo>/lighttpd:bootstrap

There’s many ways we can create the service, like using this service as a backend application, where nginx or traefik can proxy the requests through, but in this case we have nothing listening on port 80, so we will create the service and publish port 80 to the service, from the host:

Create the Service
1
2
3
4
5

$ docker service create \
--name web-bootstrap \
--replicas 1 \
--network appnet \
--with-registry-auth registry.gitlab.com/<user>/<repo>/lighttpd:bootstrap

Accessing your Website:

As this service will serve as our website, it should look more or less like the following: