🥇Docker-beeld vir enkelbladsy-toepassingsverspreiding

Enkelbladsy-toepassing (SPA) is 'n stel statiese JavaScript- en HTML-lêers, sowel as beelde en ander hulpbronne. Omdat hulle nie dinamies verander nie, is dit baie maklik om dit aanlyn te publiseer. Daar is 'n groot aantal goedkoop en selfs gratis dienste hiervoor, wat begin met 'n eenvoudige GitHub-bladsye (en vir sommige selfs met narod.ru) en eindig met 'n CDN soos Amazon S3. Ek het egter iets anders nodig gehad.

Ek het 'n Docker-beeld met SPA nodig gehad sodat dit maklik in produksie as deel van 'n Kubernetes-groepering bekendgestel kon word, en op die masjien van 'n back-end-ontwikkelaar wat geen idee het wat SPA is nie.

Ek het die volgende beeldvereistes vir myself bepaal:

gemak van gebruik (maar nie montering nie);
minimum grootte beide in terme van skyf en RAM;
konfigurasie deur omgewingsveranderlikes sodat die beeld in verskillende omgewings gebruik kan word;
die mees doeltreffende verspreiding van lêers.

Vandag sal ek jou vertel hoe:

derm nginx;
bou brotli uit bronne;
leer statiese lêers om omgewingsveranderlikes te verstaan;
en natuurlik hoe om 'n Docker-beeld uit dit alles saam te stel.

Die doel van hierdie artikel is om my ervaring te deel en ervare gemeenskapslede tot konstruktiewe kritiek uit te lok.

Bou 'n beeld vir samestelling

Om die finale Docker-prent klein in grootte te maak, moet u aan twee reëls voldoen: 'n minimum van lae en 'n minimalistiese basisbeeld. Een van die kleinste basisbeelde is die Alpine Linux-beeld, so dit is wat ek sal kies. Sommige sal dalk redeneer dat die Alpine nie geskik is vir produksie nie, en hulle kan reg wees. Maar persoonlik het ek nog nooit enige probleme met hom gehad nie en daar is geen argumente teen hom nie.

Om minder lae te hê, sal ek die prent in 2 fases saamstel. Die eerste is 'n konsep; alle hulpprogramme en tydelike lêers sal daarin bly. En in die finale stadium sal ek net die finale weergawe van die toepassing neerskryf.

Kom ons begin met die hulpbeeld.

Om 'n SPA-toepassing saam te stel, benodig jy gewoonlik node.js. Ek sal die amptelike prent neem, wat ook saam met die npm- en garepakketbestuurders kom. Ek sal namens my node-gyp byvoeg, wat nodig is om 'n paar npm-pakkette te bou, en die Brotli-kompressor van Google, wat later vir ons nuttig sal wees.

Dockerfile met opmerkings.

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

Reeds hier veg ek vir minimalisme, so die beeld word saamgestel deur een groot span.

Die voltooide prent kan hier gevind word: https://hub.docker.com/r/alexxxnf/spa-builder. Alhoewel ek aanbeveel om nie op ander mense se beelde staat te maak nie en om jou eie te versamel.

nginx

Jy kan enige webbediener gebruik om statiese inhoud te versprei. Ek is gewoond daaraan om met nginx te werk, so ek sal dit nou gebruik.

Nginx het 'n amptelike Docker-beeld, maar dit het te veel modules vir eenvoudige statiese verspreiding. Watter een by die aflewering ingesluit is, kan deur 'n spesiale span of in die amptelike Dockerfile gesien word.

$ 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

Ek sal die Dockerfile as basis gebruik, maar ek sal slegs daarin laat wat nodig is om statiese inhoud te versprei. My weergawe sal nie oor HTTPS kan werk nie, sal nie magtiging ondersteun nie, en nog baie meer. Maar my weergawe sal lêers kan versprei wat saamgepers is met die Brotli-algoritme, wat effens meer doeltreffend is as gzip. Ons sal lêers een keer saampers; dit is nie nodig om dit dadelik te doen nie.

Dit is die Dockerfile waarmee ek geëindig het. Kommentaar in Russies is myne, in Engels - vanaf die oorspronklike.

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

Ek sal nginx.conf dadelik regmaak sodat gzip en brotli by verstek geaktiveer is. Ek sal ook caching headers insluit, want ons sal nooit staties verander nie. En die finale aanraking sal wees om al 404 versoeke te herlei na index.html, dit is nodig vir navigasie in die 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";
            }
        }
    }
}

Jy kan die voltooide prent hier aflaai: https://hub.docker.com/r/alexxxnf/nginx-spa. Dit neem 10,5 MB in beslag. Die oorspronklike nginx het 19,7 MB in beslag geneem. My sportbelangstelling is bevredig.

Onderrig van statika om omgewingsveranderlikes te verstaan

Waarom kan instellings in SPA nodig wees? Byvoorbeeld, om te spesifiseer watter RESTful API om te gebruik. Tipies word instellings vir die verlangde omgewing in die boustadium na SPA oorgedra. As jy iets moet verander, sal jy die toepassing moet herbou. Ek wil dit nie hê nie. Ek wil hê die toepassing moet een keer op die CI-stadium gebou word, en soveel as wat nodig is op die CD-stadium gekonfigureer word deur omgewingsveranderlikes te gebruik.

Natuurlik verstaan statiese lêers self geen omgewingsveranderlikes nie. Daarom sal jy 'n truuk moet gebruik. In die finale prent sal ek nie nginx begin nie, maar 'n spesiale dopskrif wat omgewingsveranderlikes sal lees, dit na statiese lêers sal skryf, dit saamdruk, en dan eers beheer na nginx sal oordra.

Vir hierdie doel verskaf die Dockerfile die ENTRYPOINT parameter. Kom ons gee vir hom die volgende skrif (met Angular as voorbeeld):

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 "$@"
Om die skrif sy werk te doen, moet die instellings in die js-lêers in hierdie vorm geskryf word: ${API_URL}.

Dit is opmerklik dat die meeste moderne SPA's hashes by hul lêers voeg wanneer hulle bou. Dit is nodig sodat die blaaier die lêer vir 'n lang tyd veilig kan kas. As die lêer wel verander, sal die hash daarvan verander, wat op sy beurt die blaaier sal dwing om die lêer weer af te laai.

Ongelukkig, in my metode, lei die verandering van die konfigurasie deur omgewingsveranderlikes nie tot 'n verandering in die lêerhash nie, wat beteken dat die blaaierkas op 'n ander manier ongeldig gemaak moet word. Ek het nie hierdie probleem nie, want verskillende konfigurasies word in verskillende omgewings ontplooi.

Om die finale beeld saam te stel

Uiteindelik.

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

Nou kan die gevolglike beeld saamgestel en oral gebruik word.

Bron: will.com

Docker-beeld vir verspreiding van enkelbladsy-toepassing

Bou 'n beeld vir samestelling

nginx

Onderrig van statika om omgewingsveranderlikes te verstaan

Om die finale beeld saam te stel