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

Апликација на једној страници (СПА) је скуп статичких ЈаваСцрипт и ХТМЛ датотека, као и слика и других ресурса. Пошто се не мењају динамички, њихово објављивање на мрежи је веома лако. Постоји велики број јефтиних, па чак и бесплатних сервиса за ово, почевши од једноставних ГитХуб страница (а за неке чак и са народ.ру) и завршавајући са ЦДН-ом као што је Амазон С3. Међутим, требало ми је нешто друго.

Требао ми је Доцкер имиџ са СПА-ом да би се лако могао покренути иу производњи као део Кубернетес кластера и на машини бацк-енд програмера који нема појма шта је СПА.

За себе сам одредио следеће захтеве за слику:

• једноставност употребе (али не монтаже);
• минимална величина и у погледу диска и РАМ-а;
• конфигурисање кроз променљиве окружења тако да се слика може користити у различитим окружењима;
• најефикаснија дистрибуција датотека.

Данас ћу вам рећи како:

• гут нгинк;
• изгради бротли из извора;
• научити статичке датотеке да разумеју променљиве окружења;
• и наравно како саставити Доцкер слику од свега овога.

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

Изградња слике за склапање

Да би коначна Доцкер слика била мала, потребно је да се придржавате два правила: минимум слојева и минималистичку основну слику. Једна од најмањих основних слика је слика Алпине Линук-а, тако да ћу то изабрати. Неки би могли тврдити да Алпине није погодан за производњу, и можда су у праву. Али лично, никада нисам имао проблема са њим и нема никаквих аргумената против њега.

Да имам мање слојева, саставићу слику у 2 фазе. Први је нацрт, у њему ће остати сви помоћни програми и привремени фајлови. И у завршној фази ћу само написати коначну верзију апликације.

Почнимо са помоћном сликом.

Да бисте саставили СПА апликацију, обично вам је потребан ноде.јс. Узећу званичну слику, која такође долази са нпм и иарн пакет менаџерима. У своје лично име додаћу ноде-гип, који је потребан за прављење неких нпм пакета, и Бротли компресор из Гугла, који ће нам касније бити од користи.

Доцкерфиле са коментарима.

# Базовый образ
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. Иако препоручујем да се не ослањате на туђе слике и да сакупљате своје.

Апацхе

Можете користити било који веб сервер за дистрибуцију статичког садржаја. Навикао сам да радим са нгинк-ом, па ћу га сада користити.

Нгинк има званичну Доцкер слику, али има превише модула за једноставну статичку дистрибуцију. Који су укључени у испоруку може се видети у специјалном тиму или у званичном Доцкерфиле-у.

$ доцкер рун --рм нгинк:1-алпине нгинк -В

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

Користићу Доцкерфиле као основу, али ћу у њему оставити само оно што је потребно за дистрибуцију статичког садржаја. Моја верзија неће моћи да ради преко ХТТПС-а, неће подржавати ауторизацију и још много тога. Али моја верзија ће моћи да дистрибуира датотеке компримоване помоћу Бротли алгоритма, који је мало ефикаснији од гзип-а. Компримоваћемо датотеке једном; нема потребе да то радимо у ходу.

Ово је Доцкерфиле са којим сам завршио. Коментари на руском су моји, на енглеском - из оригинала.

Доцкерфиле

# Базовый образ снова 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;"]

Одмах ћу поправити нгинк.цонф тако да су гзип и бротли подразумевано омогућени. Укључићу и заглавља за кеширање, јер никада нећемо мењати статичке. И последњи додир ће бити преусмеравање свих 404 захтева на индек.хтмл, ово је неопходно за навигацију у СПА.

нгинк.цонф

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 МБ. Оригинални нгинк је заузимао 19,7 МБ. Мој спортски интерес је задовољан.

Подучавање статике за разумевање променљивих окружења

Зашто могу бити потребна подешавања у СПА? На пример, да бисте одредили који РЕСТфул АПИ да користите. Обично се подешавања за жељено окружење преносе у СПА у фази изградње. Ако треба нешто да промените, мораћете поново да направите апликацију. Не желим. Желим да се апликација једном направи у ЦИ фази и да се конфигурише онолико колико је потребно у ЦД фази користећи променљиве окружења.

Наравно, саме статичке датотеке не разумеју ниједну променљиву окружења. Због тога ћете морати да користите трик. У коначној слици, нећу покренути нгинк, већ специјалну схелл скрипту која ће читати променљиве окружења, уписивати их у статичке датотеке, компресовати их и тек онда пренети контролу на нгинк.

У ту сврху, Доцкерфиле обезбеђује параметар ЕНТРИПОИНТ. Хајде да му дамо следећу скрипту (користећи Ангулар као пример):

доцкер-ентрипоинт.сх

#!/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 "$@"

Да би скрипта радила свој посао, подешавања морају бити записана у јс фајловима у овом облику: ${API_URL}.
Вреди напоменути да већина модерних СПА додаје хешове у своје датотеке приликом изградње. Ово је неопходно како би претраживач могао безбедно да кешира датотеку дуго времена. Ако се датотека промени, њен хеш ће се променити, што ће заузврат приморати прегледач да поново преузме датотеку.
Нажалост, у мом методу, промена конфигурације преко променљивих окружења не доводи до промене хеша датотеке, што значи да кеш претраживача мора бити поништен на неки други начин. Немам овај проблем јер су различите конфигурације распоређене у различитим окружењима.
Састављање коначне слике
Коначно.
Доцкерфиле
# Первый базовый образ для сборки
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;"]
Сада се добијена слика може саставити и користити било где.
Извор: ввв.хабр.цом