Docker образ за разпространение на Single Page Application

Едностраничното приложение (SPA) е набор от статични JavaScript и HTML файлове, както и изображения и други ресурси. Тъй като те не се променят динамично, публикуването им в интернет е много просто. За целта съществува голямо количество евтини и дори безплатни услуги, започвайки от простия GitHub Pages (а за някои дори от narod.ru) и стигайки до CDN като Amazon S3. Но аз се нуждаех от нещо различно.

Трябваше ми Docker образ с SPA, за да може лесно да бъде стартиран както в продукция в състава на Kubernetes клъстера, така и на машината на back-end разработчика, който няма представа какво е SPA.

Определих следните изисквания за образа:

• лесен за употреба (но не по време на изграждане);
• минимален размер както по отношение на диска, така и по отношение на RAM;
• конфигурация чрез променливи на средата, така че образът да може да се използва в различни среди;
• максимално ефективно разпространение на файлове.

Днес ще ви разкажа как:

• да извлека nginx;
• да събера brotli от изходния код;
• да науча статичните файлове да разбират променливи на средата;
• и, разбира се, как да съставя от всичко това Docker образ.

Целта на тази статия е да сподели моят опит и да предизвика опитни участници в общността на конструктивна критика.

Сглобяване на образ за изграждане

За да бъде финалният Docker образ малък по размер, трябва да се спазват две правила: минимум слоеве и минималистичен базов образ. Един от най-малките базови образи е образът Alpine Linux, затова именно него ще избера. Някой може да възрази, че Alpine не е подходящ за продукция и вероятно ще бъде прав. Но лично аз никога не съм имал проблеми с него и нямам аргументи срещу него.

За да има по-малко слоеве, ще изграждам образа на 2 етапа. Първият – чернови, в него ще останат всички помощни утилити и временни файлове. А в чистовия ще запиша само финалната версия на приложението.

Нека започнем с помощния образ.

За да компилираме SPA приложението, обикновено е необходим node.js. Ще взема официалния образ, в комплект с който има и пакетни мениджъри npm и yarn. От себе си ще добавя node-gyp, който е нужен за изграждане на някои npm пакети, и компресор Brotli от Google, който ще ни е полезен по-късно.

Dockerfile с коментари.

# Базовый образ
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

Вече тук се боря за минимализъм, затова образът се изгражда с една голяма команда.

Готовият образ може да се намери тук: https://hub.docker.com/r/alexxxnf/spa-builder. Въпреки това, препоръчвам да не разчитате на готови образи и да съберете свой собствен.

nginx

За разпространение на статични файлове можете да използвате всеки web-сервер. Аз имам навика да работя с nginx, затова и сега ще го използвам.

nginx има официален Docker образ, но за простото разпространение на статични файлове той има твърде много модули. Какви точно са включени в доставката може да се види със специална команда или в официалния 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

Аз ще взема за основа Dockerfile, но ще оставя в него само това, което е необходимо за разпространение на статични файлове. Моята версия няма да може да работи по HTTPS, няма да поддържа авторизация и много други. Затова моята версия ще може да разпространява файлове, компресирани с алгоритъма Brotli, който е малко по-ефективен от gzip. Ще компресираме файловете само веднъж, не е нужно да го правим на летеж.

Ето какъв Dockerfile получих. Коментарите на руски – мои, на английски – от оригинала.

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;"]

Ще коригирам nginx.conf, за да бъдат gzip и brotli включени по подразбиране. Също така ще включа заглавия за кеширане, тъй като ние ще разпространяваме статични файлове, които никога не се променят. И последният щрих ще бъде пренасочването на всички 404 заявки към index.html, което е необходимо за навигацията в 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";
            }
        }
    }
}

Можете да изтеглите готовия образ тук: https://hub.docker.com/r/alexxxnf/nginx-spa. Заето е 10,5 MB. Оригиналният nginx заема 19,7 MB. Удовлетворих спортния си интерес.

Учим статичното да разбира променливи на средата

За какво са нужни настройките в SPA? Например, за да укажем кой RESTful API да използваме. Обикновено настройките за нужната среда се предават на SPA по време на сглобяването. Ако трябва нещо да променим, ще трябва да прегрупираме приложението. Не искам това. Искам приложението да се сглобява веднъж на етап CI, а да се конфигурира толкова, колкото е необходимо, на етап CD с помощта на променливи на средата.

Разбира се, статичните файлове сами по себе си не разбират никакви променливи на средата. Затова ще трябва да прибегнем до хитрост. В крайния образ ще стартирам не nginx, а специален shell скрипт, който ще прочете променливите на средата, ще ги запише в статичните файлове, ще ги компресира и едва след това ще предаде управлението на nginx.

За това в Dockerfile е предвиден параметър ENTRYPOINT. Ще му предадем такъв скрипт (на примера на Angular):

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 "
quot;v}')'
 # В Angular ищем плейсхолдеры в main-файлах
 за f в "$TARGET_DIR"/main*.js; направи
 # envsubst заменяет в файлах плейсхолдеры на значения из переменных окружения
 echo "$(envsubst "$ENV_VARS"  "$f"
 готово
 }
 компрес () {
 for i in $(find "$TARGET_DIR" | grep -E ".css$|.html$|.js$|.svg$|.txt$|.ttf
quot;); направи
 # Используем максимальную степень сжатия
 gzip -9kf "$i" && brotli -fZ "$i"
 готово
 }
 ако [ "$1" = 'nginx' ]; тогава
 # Флаг нужен, чтобы выполнить скрипт только при самом первом запуске
 ако [ ! -e "$FLAG_FILE" ]; тогава
 echo "Стартиране на инициализационния скрипт"
 echo "Замяна на променливи на средата"
 replace_vars
 echo "Компресиране на файлове"
 компрес
 touch $FLAG_FILE
 echo "Готово"
 фи
 фи
 exec "$@"
 За да може скриптът да свърши работата си, в js файловете настройките трябва да бъдат записани по следния начин: ${API_URL}.
Струва си да се отбележи, че повечето съвременни SPA при сглобяване добавят хешове към файловете си. Това е необходимо, за да може браузърът спокойно да кешира файла за дълъг период. Ако файлът все пак се промени, хешът му също ще се промени, което от своя страна ще накара браузъра да изтегли файла отново.
За съжаление, в моя метод, промяната на конфигурацията чрез променливи на средата не води до промяна на хеш стойността на файла, което означава, че кеша на браузъра трябва да бъде инвалидиран по друг начин. Аз нямам този проблем, защото различни конфигурации се развъртат в различни среди.
Събираме финалния образ
Най-сетне.
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;"]
Сега полученият образ може да бъде събран и използван навсякъде.
Източник: habr.com