ProHoster > blog > administratie > Docker-image voor distributie van Single Page Application

Docker-image voor distributie van Single Page Application

Single-page Application (SPA) is een reeks statische JavaScript- en HTML-bestanden, evenals afbeeldingen en andere bronnen. Omdat ze niet dynamisch veranderen, is het heel eenvoudig om ze online te publiceren. Daar zijn een groot aantal goedkope en zelfs gratis diensten voor, beginnend met een simpele GitHub Pages (en voor sommigen zelfs met narod.ru) en eindigend met een CDN zoals Amazon S3. Ik had echter iets anders nodig.

Ik had een Docker-image met SPA nodig, zodat deze gemakkelijk kon worden gelanceerd, zowel in productie als onderdeel van een Kubernetes-cluster, als op de machine van een back-end-ontwikkelaar die geen idee heeft wat SPA is.

Ik heb voor mezelf de volgende beeldeisen bepaald:

  • gebruiksgemak (maar geen montage);
  • minimale grootte zowel qua schijf als RAM;
  • configuratie via omgevingsvariabelen zodat de afbeelding in verschillende omgevingen kan worden gebruikt;
  • de meest efficiΓ«nte distributie van bestanden.

Vandaag vertel ik je hoe:

  • darm-nginx;
  • bouw brotli uit bronnen;
  • leer statische bestanden om omgevingsvariabelen te begrijpen;
  • en natuurlijk hoe je hieruit een Docker-image kunt samenstellen.

Het doel van dit artikel is om mijn ervaringen te delen en ervaren leden van de gemeenschap uit te lokken tot opbouwende kritiek.

Een afbeelding maken voor montage

Om de uiteindelijke Docker-afbeelding klein te maken, moet u zich aan twee regels houden: een minimum aan lagen en een minimalistische basisafbeelding. Een van de kleinste basisimages is de Alpine Linux-image, dus die zal ik kiezen. Sommigen beweren misschien dat de Alpine niet geschikt is voor productie, en misschien hebben ze gelijk. Maar persoonlijk heb ik nooit problemen met hem gehad en er zijn geen argumenten tegen hem.

Om minder lagen te hebben, zal ik de afbeelding in 2 fasen samenstellen. De eerste is een concept; alle hulpprogramma's en tijdelijke bestanden blijven erin staan. En in de laatste fase schrijf ik alleen de definitieve versie van de applicatie op.

Laten we beginnen met het hulpbeeld.

Om een ​​SPA-applicatie te compileren, heb je meestal node.js nodig. Ik neem de officiΓ«le afbeelding, die ook bij de npm- en garenpakketbeheerders wordt geleverd. Uit eigen naam zal ik node-gyp toevoegen, wat nodig is om enkele npm-pakketten te bouwen, en de Brotli-compressor van Google, die later nuttig voor ons zal zijn.

Dockerbestand met opmerkingen.

# Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π·
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

Hier vecht ik al voor het minimalisme, dus het beeld wordt samengesteld door één groot team.

De voltooide afbeelding vindt u hier: https://hub.docker.com/r/alexxxnf/spa-builder. Hoewel ik aanbeveel om niet te vertrouwen op de afbeeldingen van anderen en uw eigen afbeeldingen te verzamelen.

nginx

U kunt elke webserver gebruiken om statische inhoud te distribueren. Ik ben gewend om met nginx te werken, dus ik ga het nu gebruiken.

Nginx heeft een officiΓ«le Docker-image, maar het heeft te veel modules voor eenvoudige statische distributie. Welke bij de levering zijn inbegrepen, kunt u zien door een speciaal team of in het officiΓ«le 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

Ik zal de Dockerfile als basis gebruiken, maar ik laat er alleen in staan ​​wat nodig is om statische inhoud te verspreiden. Mijn versie kan niet via HTTPS werken, ondersteunt geen autorisatie en nog veel meer. Maar mijn versie kan bestanden distribueren die zijn gecomprimeerd met het Brotli-algoritme, wat iets efficiΓ«nter is dan gzip. We zullen bestanden één keer comprimeren; u hoeft dit niet meteen te doen.

Dit is het Dockerbestand waarmee ik eindigde. Opmerkingen in het Russisch zijn van mij, in het Engels - van het origineel.

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

Ik zal nginx.conf onmiddellijk repareren, zodat gzip en brotli standaard zijn ingeschakeld. Ik zal ook caching-headers toevoegen, omdat we de statische gegevens nooit zullen veranderen. En de laatste hand zal zijn om alle 404-verzoeken om te leiden naar index.html, dit is nodig voor navigatie in de 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";
            }
        }
    }
}

U kunt de voltooide afbeelding hier downloaden: https://hub.docker.com/r/alexxxnf/nginx-spa. Het neemt 10,5 MB in beslag. De originele nginx nam 19,7 MB in beslag. Mijn sportieve interesse is bevredigd.

Statica onderwijzen om omgevingsvariabelen te begrijpen

Waarom zijn er mogelijk instellingen nodig in SPA? Bijvoorbeeld om aan te geven welke RESTful API gebruikt moet worden. Normaal gesproken worden de instellingen voor de gewenste omgeving tijdens de bouwfase naar SPA overgebracht. Als u iets moet wijzigen, moet u de applicatie opnieuw opbouwen. Ik wil het niet. Ik wil dat de applicatie eenmalig wordt gebouwd in de CI-fase en zoveel als nodig wordt geconfigureerd in de CD-fase met behulp van omgevingsvariabelen.

Uiteraard begrijpen statische bestanden zelf geen enkele omgevingsvariabele. Daarom zul je een truc moeten gebruiken. In de uiteindelijke afbeelding start ik niet nginx, maar een speciaal shell-script dat omgevingsvariabelen leest, naar statische bestanden schrijft, comprimeert en pas daarna de controle overdraagt ​​aan nginx.

Voor dit doel biedt het Dockerfile de parameter ENTRYPOINT. Laten we hem het volgende script geven (met Angular als 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 het script zijn werk te laten doen, moeten de instellingen in de volgende vorm in de js-bestanden worden geschreven: ${API_URL}.


Het is vermeldenswaard dat de meeste moderne SPA's tijdens het bouwen hashes aan hun bestanden toevoegen. Dit is nodig zodat de browser het bestand lange tijd veilig in de cache kan opslaan. Als het bestand verandert, verandert de hash, waardoor de browser het bestand opnieuw moet downloaden.


Helaas leidt het wijzigen van de configuratie via omgevingsvariabelen in mijn methode niet tot een verandering in de bestandshash, wat betekent dat de browsercache op een andere manier ongeldig moet worden gemaakt. Ik heb dit probleem niet omdat er in verschillende omgevingen verschillende configuraties worden ingezet.


Samenstellen van het uiteindelijke beeld


Eindelijk.


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


Nu kan de resulterende afbeelding overal worden samengesteld en gebruikt.


Bron: www.habr.com