Docker-imáz na distribúciu Single Page Application

Jednostránková aplikácia (SPA) je súbor statických súborov JavaScript a HTML, ako aj obrázky a iné zdroje. Keďže sa dynamicky nemenia, je ich veľmi jednoduché publikovať na internete. Existuje množstvo lacných a dokonca aj bezplatných služieb, od jednoduchého GitHub Pages (a pre niekoho dokonca aj z narod.ru) po CDN ako Amazon S3. Ale ja som potreboval niečo iné.

Potreboval som Docker obraz so SPA, aby bol ľahko spustiteľný ako v produkcii v rámci Kubernetes klastru, tak aj na stroji back-end vývojára, ktorý nemá žiadnu predstavu o tom, čo je SPA.

Vydefinoval som si nasledujúce požiadavky na obraz:

• jednoduché použitie (ale nie jednoduché zostavenie);
• minimálna veľkosť z hľadiska disku aj RAM;
• nastavenie cez environmentálne premenné, aby sa obraz dal používať v rôznych prostrediach;
• maximálna efektívnosť distribúcie súborov.

Dnes vám poviem ako:

• vyčistiť nginx;
• zbierať brotli z pôvodných zdrojov;
• naučiť statické súbory chápať environmentálne premenné;
• a samozrejme, ako zo všetkého toho zostaviť Docker obraz.

Cieľom tohto článku je podeliť sa o svoje skúsenosti a vyprovokovať skúsených členov komunity na konštruktívnu kritiku.

Zostavenie obrazu pre zostavenie

Aby bol finálny Docker obraz malý, treba dodržiavať dve pravidlá: minimum vrstiev a minimalistický základný obraz. Jedným z najmenších základných obrazov je obraz Alpine Linux, preto si ho vyberiem. Niekto môže oponovať, že Alpine nie je vhodný pre produkciu a možno má pravdu. Ale osobne som nemal s ním nikdy problémy a nemám proti nemu žiadne argumenty.

Aby bolo menej vrstiev, budem obraz zostavovať v dvoch krokoch. Prvý – pracovný, v ktorom zostanú všetky pomocné utilitky a dočasné súbory. A v čistom zapíšem iba finálnu verziu aplikácie.

Začneme pomocným obrazom.

Na skompilovanie SPA aplikácie zvyčajne potrebujete node.js. Zoberiem oficiálny obraz, ku ktorému sú tiež paketové manažéry npm a yarn. Od seba pridám node-gyp, ktorý je potrebný na zostavenie niektorých npm balíčkov, a kompresor Brotli od Googlu, ktorý nám neskôr poslúži.

Dockerfile s komentármi.

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

Už tu bojujem za minimalizmus, preto sa obraz zostavuje jednou veľkou príkazom.

Hotový obraz nájdete tu: https://hub.docker.com/r/alexxxnf/spa-builder. Hoci odporúčam nespoliehať sa na cudzie obrazy a zostaviť si vlastný.

nginx

Na distribúciu statiky možno použiť akýkoľvek webový server. Ja som zvyknutý pracovať s nginx, preto ho budem používať aj teraz.

nginx má oficiálny Docker obraz, avšak na jednoduchú distribúciu statiky obsahuje príliš veľa modulov. Aké konkrétne sú zahrnuté v dodávke, môžete zistiť špeciálnym príkazom alebo oficiálnym Dockerfile.

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

nginx verzia: nginx/1.17.9
skompilovaný pomocou gcc 8.3.0 (Alpine 8.3.0) 
zhotovilo sa s OpenSSL 1.1.1d  10. sep 2019
Povolená podpora TLS SNI
argumenty konfigurácie: --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

Základom vezmem Dockerfile, ale ponechám v ňom len to, čo je potrebné na distribúciu statiky. Moja verzia nebude fungovať cez HTTPS, nebude podporovať autorizáciu a mnoho ďalšieho. Naopak, moja verzia bude schopná distribuovať súbory komprimované algoritmom Brotli, ktorý je o niečo účinnejší ako gzip. Súbory budeme komprimovať raz, nie je potrebné to robiť za chodu.

Tu je môj Dockerfile. Komentáre v ruštine sú moje, v angličtine sú z originálu.

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

Hneď opravím nginx.conf, aby gzip a brotli boli povolené ako predvolené. Taktiež pridám caching hlavičky, pretože budeme distribuovať nikdy sa nemeniacu statiku. A posledným dotykom bude presmerovanie všetkých 404 požiadaviek na index.html, to je potrebné pre navigáciu v 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";
            }
        }
    }
}

Stiahnuť hotový obraz môžete tu: https://hub.docker.com/r/alexxxnf/nginx-spa. Zaberá to 10,5 MB. Pôvodný nginx zaberalo 19,7 MB. Môj športový záujem je uspokojený.

Učíme statiku rozumieť premenným prostredia

Na čo môžu byť v SPA potrebné nastavenia? Napríklad na to, aby sme určili, ktorý RESTful API použiť. Zvyčajne sa nastavenia pre požadované prostredie odovzdávajú v SPA počas fázy stavby. Ak je potrebné niečo zmeniť, je potrebné prekompilovať aplikáciu. To ja nechcem. Chcem, aby sa aplikácia stavala raz v štádiu CI a konfigurovala, koľko je potrebné, v štádiu CD pomocou premenných prostredia.

Samozrejme, statické súbory samy osebe nerozumejú žiadnym premenným prostredia. Preto sa musíme uchýliť k triku. V konečnom obraze spustím nie nginx, ale špeciálny shell skript, ktorý prečíta premenné prostredia, zapíše ich do statických súborov, skompresuje ich a až potom odovzdá riadenie nginx.

Na tento účel je v Dockerfile predpokladaný parameter ENTRYPOINT. Odovzdáme mu takýto skript (na príklade 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"
 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"
 komprimovať
 touch $FLAG_FILE
 echo "Done"
 fi
 fi
 exec "$@"
 Aby skript vykonal svoju prácu, v js súboroch je potrebné písať nastavenia takýmto spôsobom: ${API_URL}.
Je potrebné poznamenať, že väčšina moderných SPA počas stavby pridáva k svojim súborom hashe. To je potrebné, aby prehliadač mohol bez obáv vyrovnať súbor v cache na dlhú dobu. Ak sa súbor predsa len zmení, zmení sa aj jeho hash, čo spôsobí, že prehliadač znova stiahne súbor.
Bohužiaľ, v mojej metóde zmena konfigurácie cez premenné prostredia nevedie k zmene hashu súboru, a teda je potrebné invalidovať cache prehliadača iným spôsobom. Ja tento problém nemám, pretože rôzne konfigurácie sú nasadzované v rôznych prostrediach.
Vytvárame finálny obraz
Konečne.
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;"]
Teraz je možné vytvorený obraz zostaviť a používať kdekoľvek.
Zdroj: habr.com