Docker изображение за разпространение на едностранично приложение

Едностранично приложение (SPA) е набор от статични JavaScript и HTML файлове, както и изображения и други ресурси. Тъй като те не се променят динамично, публикуването им онлайн е много лесно. Има голям брой евтини и дори безплатни услуги за това, като се започне с прости страници на GitHub (а за някои дори с 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, който ще ни бъде полезен по-късно.

Docker файл с коментари.

# Базовый образ
FROM node:12-alpine
LABEL maintainer="Aleksey Maydokin <[email protected]>"
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

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

Докер файл

# Базовый образ снова Alpine
FROM alpine:3.9
LABEL maintainer="Aleksey Maydokin <[email protected]>"
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-файлах

for f in "$TARGET_DIR"/main*.js; do

# envsubst заменяет в файлах плейсхолдеры на значения из переменных окружения

echo "$(envsubst "$ENV_VARS" < "$f")" > "$f"

done

}

compress () {

for i in $(find "$TARGET_DIR" | grep -E ".css$|.html$|.js$|.svg$|.txt$|.ttf

quot;); 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 "$@"

За да може скриптът да си свърши работата, настройките трябва да бъдат записани в js файловете в следната форма: ${API_URL}.
Струва си да се отбележи, че повечето съвременни SPA добавят хешове към своите файлове при изграждане. Това е необходимо, за да може браузърът безопасно да кешира файла за дълго време. Ако файлът се промени, неговият хеш ще се промени, което от своя страна ще принуди браузъра да изтегли файла отново.
За съжаление, в моя метод, промяната на конфигурацията чрез променливи на средата не води до промяна в хеша на файла, което означава, че кешът на браузъра трябва да бъде обезсилен по някакъв друг начин. Нямам този проблем, защото в различни среди се разполагат различни конфигурации.
Сглобяване на окончателното изображение
Накрая.
Докер файл
# Первый базовый образ для сборки
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;"]
Сега полученото изображение може да бъде сглобено и използвано навсякъде.
Източник: www.habr.com