Докер слика за дистрибуција на апликација за една страница

Апликација со една страница (SPA) е збир на статични JavaScript и HTML датотеки, како и слики и други ресурси. Бидејќи тие не се менуваат динамично, нивното објавување на интернет е многу лесно. Има голем број на евтини, па дури и бесплатни услуги за ова, почнувајќи од едноставни GitHub Pages (а за некои дури и со narod.ru) и завршувајќи со CDN како Amazon S3. Сепак, ми требаше нешто друго.

Ми требаше Docker слика со SPA за да може лесно да се лансира и во производство како дел од кластерот Kubernetes и на машината на back-end програмер кој нема поим што е SPA.

Ги одредив следните барања за слика за себе:

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

Денес ќе ви кажам како:

• цревна нгинкс;
• изгради бротли од извори;
• учат статички датотеки да ги разберат променливите на околината;
• и секако како да се состави Docker слика од сето ова.

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

Изградба на слика за склопување

За да ја направите конечната слика на Docker мала по големина, треба да се придржувате до две правила: минимум слоеви и минималистичка основна слика. Една од најмалите основни слики е сликата на Alpine Linux, па тоа е она што ќе го изберам. Некои би можеле да тврдат дека Alpine не е погоден за производство, и можеби се во право. Но, јас лично никогаш не сум имал проблеми со него и нема никакви аргументи против него.

За да имам помалку слоеви, сликата ќе ја составам во 2 фази. Првиот е нацрт; сите помошни комунални услуги и привремени датотеки ќе останат во него. И во последната фаза ќе ја запишам само конечната верзија на апликацијата.

Да почнеме со помошната слика.

За да составите SPA апликација, обично ви треба node.js. Ќе ја земам официјалната слика, која доаѓа и со менаџерите на пакети npm и предиво. Во мое име ќе додадам node-gyp, кој е потребен за изградба на некои npm пакети и компресорот Brotli од Google, кој ќе ни биде корисен подоцна.

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

# Базовый образ
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-алпски 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 <[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 и да се конфигурира колку што е потребно во фазата на ЦД користејќи променливи на околината.

Се разбира, самите статични датотеки не разбираат никакви променливи на околината. Затоа, ќе мора да употребите трик. На последната слика, нема да стартувам nginx, туку специјална скрипта за школка која ќе чита променливи на околината, ќе ги запишува во статични датотеки, ќе ги компресира и дури потоа ќе ја префрли контролата на nginx.

За таа цел, Dockerfile го обезбедува параметарот ENTRYPOINT. Ајде да му ја дадеме следната скрипта (користејќи го Angular како пример):

докер-влезна точка.ш

#!/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}.
Вреди да се напомене дека повеќето модерни СПА додаваат хеш во нивните датотеки при градење. Ова е неопходно за да може прелистувачот безбедно да ја кешира датотеката долго време. Ако датотеката навистина се промени, тогаш нејзиниот хаш ќе се промени, што пак ќе го принуди прелистувачот повторно да ја преземе датотеката.
За жал, во мојот метод, менувањето на конфигурацијата преку променливите на околината не доведува до промена во хашот на датотеката, што значи дека кешот на прелистувачот мора да биде поништен на некој друг начин. Го немам овој проблем бидејќи различни конфигурации се распоредени во различни средини.
Составување на конечната слика
Конечно.
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;"]
Сега добиената слика може да се состави и да се користи насекаде.
Извор: www.habr.com