Docker image for serving a Single Page Application

A Single Page Application (SPA) is a collection of static JavaScript and HTML files, as well as images and other resources. Since they do not change dynamically, publishing them on the internet is very straightforward. There are many cheap and even free services available for this, starting with simple GitHub Pages (and even narod.ru for some) and ending with CDNs like Amazon S3. However, I needed something different.

I needed a Docker image with an SPA that could be easily run both in production as part of a Kubernetes cluster and on the machine of a back-end developer who has no idea what an SPA is.

I defined the following requirements for the image:

• ease of use (but not in assembly);
• minimal size in terms of both disk space and RAM;
• configuration via environment variables, so the image can be used in different environments;
• maximally efficient file serving.

Today I will explain how to:

• strip down nginx;
• build Brotli from source;
• teach static files to understand environment variables;
• and of course, how to assemble all of this into a Docker image.

The purpose of this article is to share my experience and provoke constructive criticism from experienced community members.

Building the image for assembly

To ensure that the final Docker image is small, two rules must be followed: minimum layers and a minimalist base image. One of the smallest base images is Alpine Linux, so that’s what I will choose. Some may argue that Alpine is not suitable for production and may be right. However, I personally have never had issues with it, and I have no arguments against it.

To reduce the number of layers, I will build the image in 2 stages. The first stage will be a rough draft, containing all the auxiliary utilities and temporary files. The second stage will only include the final version of the application.

Let’s start with the auxiliary image.

To compile an SPA application, node.js is usually required. I will take the official image that also includes the package managers npm and yarn. Additionally, I will add node-gyp, which is needed for building some npm packages, and the Brotli compressor from Google, which will be useful later.

Dockerfile with comments.

# Базовый образ
FROM node:12-alpine
LABEL maintainer="Aleksey Maydokin <amaydokin@gmail.com>"
ENV BROTLI_VERSION 1.0.7
# Пакеты, которые нужны, чтобы собрать из исходников Brotli
RUN apk add --no-cache --virtual .build-deps 
        bash 
        gcc 
        libc-dev 
        make 
        linux-headers 
        cmake 
        curl 
    && mkdir -p /usr/src 
    # Исходники Brotli скачиваем из официального репозитория
    && curl -LSs https://github.com/google/brotli/archive/v$BROTLI_VERSION.tar.gz | tar xzf - -C /usr/src 
    && cd /usr/src/brotli-$BROTLI_VERSION 
    # Компилируем Brotli
    && ./configure-cmake --disable-debug && make -j$(getconf _NPROCESSORS_ONLN) && make install 
    # Добавляем node-gyp
    && yarn global add node-gyp 
    # Убираем за собой мусор
    && apk del .build-deps && yarn cache clean && rm -rf /usr/src

Here, I advocate for minimalism, so the image is composed of one large team.

You can find the ready image here: https://hub.docker.com/r/alexxxnf/spa-builder. However, I recommend not to rely on others' images and to create your own.

nginx

Any web server can be used to serve static files. I'm used to working with nginx, so I will use it now.

nginx has an official Docker image, but it has too many modules for simple static file serving. You can check which ones are included in the distribution with a special command or in the official Dockerfile.

$ docker run --rm nginx:1-alpine nginx -V

nginx version: nginx/1.17.9
built by gcc 8.3.0 (Alpine 8.3.0) 
built with OpenSSL 1.1.1d  10 Sep 2019
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --with-perl_modules_path=/usr/lib/perl5/vendor_perl --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-Os -fomit-frame-pointer' --with-ld-opt=-Wl,--as-needed

I will take the Dockerfile as a basis, but I will leave only what is needed for serving static files. My version will not be able to work over HTTPS, will not support authorization, and much more. However, my version will be able to serve files compressed with Brotli, which is slightly more efficient than gzip. We will compress files once; doing it on the fly is unnecessary.

Here's the Dockerfile I ended up with. Comments in Russian are mine; those in English are from the original.

Dockerfile

# Базовый образ снова Alpine
FROM alpine:3.9
LABEL maintainer="Aleksey Maydokin <amaydokin@gmail.com>"
ENV NGINX_VERSION 1.16.0
ENV NGX_BROTLI_VERSION 0.1.2
ENV BROTLI_VERSION 1.0.7
RUN set -x 
    && addgroup -S nginx 
    && adduser -D -S -h /var/cache/nginx -s /sbin/nologin -G nginx nginx 
# Устанавливаем пакеты, которые нужны чтобы собрать nginx и модуль ngx_brotli к нему
    && apk add --no-cache --virtual .build-deps 
            gcc 
            libc-dev 
            make 
            linux-headers 
            curl 
    && mkdir -p /usr/src 
# Скачиваем исходники
    && curl -LSs https://nginx.org/download/nginx-$NGINX_VERSION.tar.gz | tar xzf - -C /usr/src 
    && curl -LSs https://github.com/eustas/ngx_brotli/archive/v$NGX_BROTLI_VERSION.tar.gz | tar xzf - -C /usr/src 
    && curl -LSs https://github.com/google/brotli/archive/v$BROTLI_VERSION.tar.gz | tar xzf - -C /usr/src 
    && rm -rf /usr/src/ngx_brotli-$NGX_BROTLI_VERSION/deps/brotli/ 
    && ln -s /usr/src/brotli-$BROTLI_VERSION /usr/src/ngx_brotli-$NGX_BROTLI_VERSION/deps/brotli 
    && cd /usr/src/nginx-$NGINX_VERSION 
    && CNF="
            --prefix=/etc/nginx 
            --sbin-path=/usr/sbin/nginx 
            --modules-path=/usr/lib/nginx/modules 
            --conf-path=/etc/nginx/nginx.conf 
            --error-log-path=/var/log/nginx/error.log 
            --http-log-path=/var/log/nginx/access.log 
            --pid-path=/var/run/nginx.pid 
            --lock-path=/var/run/nginx.lock 
            --http-client-body-temp-path=/var/cache/nginx/client_temp 
            --http-proxy-temp-path=/var/cache/nginx/proxy_temp 
            --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp 
            --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp 
            --http-scgi-temp-path=/var/cache/nginx/scgi_temp 
            --user=nginx 
            --group=nginx 
            --without-http_ssi_module 
            --without-http_userid_module 
            --without-http_access_module 
            --without-http_auth_basic_module 
            --without-http_mirror_module 
            --without-http_autoindex_module 
            --without-http_geo_module 
            --without-http_split_clients_module 
            --without-http_referer_module 
            --without-http_rewrite_module 
            --without-http_proxy_module 
            --without-http_fastcgi_module 
            --without-http_uwsgi_module 
            --without-http_scgi_module 
            --without-http_grpc_module 
            --without-http_memcached_module 
            --without-http_limit_conn_module 
            --without-http_limit_req_module 
            --without-http_empty_gif_module 
            --without-http_browser_module 
            --without-http_upstream_hash_module 
            --without-http_upstream_ip_hash_module 
            --without-http_upstream_least_conn_module 
            --without-http_upstream_keepalive_module 
            --without-http_upstream_zone_module 
            --without-http_gzip_module 
            --with-http_gzip_static_module 
            --with-threads 
            --with-compat 
            --with-file-aio 
            --add-dynamic-module=/usr/src/ngx_brotli-$NGX_BROTLI_VERSION 
    " 
# Собираем
    && ./configure $CNF 
    && make -j$(getconf _NPROCESSORS_ONLN) 
    && make install 
    && rm -rf /usr/src/ 
# Удаляем динамический brotli модуль, оставляя только статический
    && rm /usr/lib/nginx/modules/ngx_http_brotli_filter_module.so 
    && sed -i '$ d' /etc/apk/repositories 
# Bring in gettext so we can get `envsubst`, then throw
# the rest away. To do this, we need to install `gettext`
# then move `envsubst` out of the way so `gettext` can
# be deleted completely, then move `envsubst` back.
    && apk add --no-cache --virtual .gettext gettext 
    && mv /usr/bin/envsubst /tmp/ 
    && runDeps="$( 
        scanelf --needed --nobanner /usr/sbin/nginx /usr/lib/nginx/modules/*.so /tmp/envsubst 
            | awk '{ gsub(/,/, "nso:", $2); print "so:" $2 }' 
            | sort -u 
            | xargs -r apk info --installed 
            | sort -u 
    )" 
    && apk add --no-cache $runDeps 
    && apk del .build-deps 
    && apk del .gettext 
    && mv /tmp/envsubst /usr/local/bin/ 
# Bring in tzdata so users could set the timezones through the environment
# variables
    && apk add --no-cache tzdata 
# forward request and error logs to docker log collector
    && ln -sf /dev/stdout /var/log/nginx/access.log 
    && ln -sf /dev/stderr /var/log/nginx/error.log
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
STOPSIGNAL SIGTERM
CMD ["nginx", "-g", "daemon off;"]

I will immediately adjust nginx.conf to ensure that gzip and Brotli are enabled by default. I will also enable caching headers, as we will be serving static files that never change. Finally, I will redirect all 404 requests to index.html, which is necessary for navigation in a SPA.

nginx.conf

user nginx;
worker_processes  1;
error_log /var/log/nginx/error.log warn;
pid       /var/run/nginx.pid;
load_module /usr/lib/nginx/modules/ngx_http_brotli_static_module.so;
events {
    worker_connections 1024;
}
http {
    include      mime.types;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;
    gzip_static   on;
    brotli_static on;
    server {
        listen      80;
        server_name localhost;
        charset utf-8;
        location / {
            root html;
            try_files $uri /index.html;
            etag on;
            expires max;
            add_header Cache-Control public;
            location = /index.html {
                expires 0;
                add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
            }
        }
    }
}

You can download the prepared image here: https://hub.docker.com/r/alexxxnf/nginx-spa. It takes up 10.5 MB. The original nginx took 19.7 MB. My competitive curiosity is satisfied.

We teach static files to understand environment variables

Why might settings be needed in a SPA? For instance, to specify which RESTful API to use. Typically, the settings required for the necessary environment are passed to the SPA during the build stage. If something needs to change, the application has to be rebuilt. I don't want that. I want the application to be built once at the CI stage and configured as needed during the CD stage using environment variables.

Of course, static files by themselves do not understand any environment variables. Therefore, a trick must be employed. In the final image, I will run not nginx but a special shell script that will read the environment variables, write them into static files, compress them, and only then hand control to nginx.

For this, the ENTRYPOINT parameter is provided in the Dockerfile. We will pass it a script like this (using Angular as an example):

docker-entrypoint.sh

#!/bin/sh
set -e
FLAG_FILE="/configured"
TARGET_DIR="/etc/nginx/html"
replace_vars () {
  ENV_VARS='$(awk 'BEGIN{for(v in ENVIRON) print "
"v}')'
 # В Angular ищем плейсхолдеры в main-файлах
 for f in "$TARGET_DIR"/main*.js; do
 # envsubst заменяет в файлах плейсхолдеры на значения из переменных окружения
 echo "$(envsubst "$ENV_VARS"  "$f"
 done
 }
 compress () {
 for i in $(find "$TARGET_DIR" | grep -E ".css$|.html$|.js$|.svg$|.txt$|.ttf
"; do
 # Используем максимальную степень сжатия
 gzip -9kf "$i" && brotli -fZ "$i"
 done
 }
 if [ "$1" = 'nginx' ]; then
 # Флаг нужен, чтобы выполнить скрипт только при самом первом запуске
 if [ ! -e "$FLAG_FILE" ]; then
 echo "Running init script"
 echo "Replacing env vars"
 replace_vars
 echo "Compressing files"
 compress
 touch $FLAG_FILE
 echo "Done"
 fi
 fi
 exec "$@"
 For the script to do its job, the settings in the js files need to be written in this format: ${API_URL}.
It's worth noting that most modern SPAs add hashes to their files during the build process. This is necessary so the browser can cache the file for a long time. If the file changes, its hash will change as well, causing the browser to download the file again.
Unfortunately, in my method, changing the configuration via environment variables does not alter the file hash, meaning the browser cache must be invalidated in some other way. I don’t have this problem since different configurations are deployed in different environments.
Building the final image
Finally.
Dockerfile
# Первый базовый образ для сборки
FROM alexxxnf/spa-builder as builder
# Чтобы эффктивнее использовать кэш Docker-а, сначала устанавливаем только зависимости
COPY ./package.json ./package-lock.json /app/
RUN cd /app && npm ci --no-audit
# Потом собираем само приложение
COPY . /app
RUN cd /app && npm run build -- --prod --configuration=docker

# Второй базовый образ для раздачи
FROM alexxxnf/nginx-spa
# Забираем из первого образа сначала компрессор
COPY --from=builder /usr/local/bin/brotli /usr/local/bin
# Потом добавляем чудо-скрипт
COPY ./docker/docker-entrypoint.sh /docker-entrypoint.sh
# И в конце забираем само приложение
COPY --from=builder /app/dist/app /etc/nginx/html/
ENTRYPOINT ["/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]
Now the resulting image can be built and used anywhere.
Source: habr.com