🥇Gambar Docker kanggo distribusi Aplikasi Halaman Tunggal

Aplikasi siji-halaman (SPA) yaiku sakumpulan file JavaScript lan HTML statis, uga gambar lan sumber daya liyane. Amarga ora owah kanthi dinamis, nerbitake kanthi online gampang banget. Ana akeh layanan sing murah lan gratis kanggo iki, diwiwiti kanthi GitHub Pages sing prasaja (lan kanggo sawetara malah karo narod.ru) lan diakhiri karo CDN kaya Amazon S3. Nanging, aku butuh liyane.

Aku needed gambar Docker karo SPA supaya bisa gampang dibukak loro ing produksi minangka bagéan saka cluster Kubernetes, lan ing mesin pangembang mburi-mburi sing ora ngerti apa SPA.

Aku wis nemtokake syarat gambar ing ngisor iki kanggo aku:

ease saka nggunakake (nanging ora perakitan);
ukuran minimal saka disk lan RAM;
konfigurasi liwat variabel lingkungan supaya gambar bisa digunakake ing lingkungan beda;
distribusi file sing paling efisien.

Dina iki aku bakal pitutur marang kowe carane:

usus nginx;
mbangun brotli saka sumber;
mulang file statis kanggo mangerteni variabel lingkungan;
lan mesthi carane ngumpul gambar Docker saka kabeh iki.

Tujuan artikel iki yaiku kanggo nuduhake pengalamanku lan nggawe anggota komunitas sing berpengalaman kanggo kritik sing mbangun.

Nggawe gambar kanggo perakitan

Kanggo nggawe gambar Docker pungkasan kanthi ukuran cilik, sampeyan kudu netepi rong aturan: lapisan minimal lan gambar dhasar minimalis. Salah sawijining gambar dhasar sing paling cilik yaiku gambar Alpine Linux, mula aku bakal milih. Sawetara bisa mbantah manawa Alpine ora cocog kanggo produksi, lan bisa uga bener. Nanging kanthi pribadi, aku ora nate duwe masalah karo dheweke lan ora ana bantahan marang dheweke.

Kanggo duwe lapisan sing luwih sithik, aku bakal ngumpulake gambar ing 2 tahap. Sing pertama yaiku konsep; kabeh utilitas tambahan lan file sauntara bakal tetep ana. Lan ing tahap pungkasan aku mung bakal nulis versi pungkasan aplikasi kasebut.

Ayo dadi miwiti karo gambar tambahan.

Kanggo ngumpulake aplikasi SPA, sampeyan biasane mbutuhake node.js. Aku bakal njupuk gambar resmi, sing uga dilengkapi manajer paket npm lan benang. Atas jenenge dhewe, aku bakal nambah node-gyp, sing dibutuhake kanggo mbangun sawetara paket npm, lan kompresor Brotli saka Google, sing bakal migunani kanggo kita mengko.

Dockerfile karo komentar.

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

Wis kene aku berjuang kanggo minimalism, supaya gambar digabungake dening siji tim gedhe.

Gambar rampung bisa ditemokake ing kene: https://hub.docker.com/r/alexxxnf/spa-builder. Sanajan aku nyaranake ora ngandelake gambar wong liya lan ngumpulake dhewe.

nginx

Sampeyan bisa nggunakake server web apa wae kanggo nyebarake konten statis. Aku wis biasa nggarap nginx, mula aku bakal nggunakake saiki.

Nginx duwe gambar Docker resmi, nanging akeh banget modul kanggo distribusi statis sing gampang. Sing kalebu ing pangiriman bisa dideleng dening tim khusus utawa ing Dockerfile resmi.

$ 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

Aku bakal nggunakake Dockerfile minangka basis, nanging aku bakal ninggalake mung apa sing perlu kanggo nyebarke isi statis. Versiku ora bakal bisa digunakake liwat HTTPS, ora ndhukung wewenang, lan liya-liyane. Nanging versiku bakal bisa nyebarake file sing dikompres nganggo algoritma Brotli, sing rada luwih efisien tinimbang gzip. Kita bakal ngompres file sapisan; ora perlu nindakake iki kanthi cepet.

Iki Dockerfile aku rampung karo. Komentar ing basa Rusia iku mine, ing basa Inggris - saka asline.

file docker

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

Aku bakal langsung ndandani nginx.conf supaya gzip lan brotli diaktifake minangka standar. Aku uga bakal kalebu header caching, amarga kita ora bakal ngganti statis. Lan tutul pungkasan bakal ngarahake kabeh 404 panjalukan menyang index.html, iki perlu kanggo navigasi ing 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";
            }
        }
    }
}

Sampeyan bisa ngundhuh gambar sing wis rampung ing kene: https://hub.docker.com/r/alexxxnf/nginx-spa. Butuh nganti 10,5 MB. Nginx asli njupuk 19,7 MB. Minat olah raga kula wareg.

Pengajaran statika kanggo mangerteni variabel lingkungan

Napa setelan perlu ing SPA? Contone, kanggo nemtokake API RESTful sing digunakake. Biasane, setelan kanggo lingkungan sing dikarepake ditransfer menyang SPA ing tahap mbangun. Yen sampeyan kudu ngganti soko, sampeyan kudu mbangun maneh aplikasi. Aku ora pengin. Aku pengin aplikasi dibangun sapisan ing tataran CI, lan diatur minangka akeh minangka perlu ing tataran CD nggunakake variabel lingkungan.

Mesthine, file statis dhewe ora ngerti variabel lingkungan. Mulane, sampeyan kudu nggunakake trick. Ing gambar pungkasan, aku ora bakal ngluncurake nginx, nanging skrip cangkang khusus sing bakal maca variabel lingkungan, nulis menyang file statis, kompres, banjur transfer kontrol menyang nginx.

Kanggo tujuan iki, Dockerfile nyedhiyakake parameter ENTRYPOINT. Ayo menehi skrip ing ngisor iki (nggunakake Angular minangka conto):

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 "$@"
Supaya skrip bisa nindakake tugase, setelan kasebut kudu ditulis ing file js ing wangun iki: ${API_URL}.

Wigati dicathet manawa umume SPA modern nambah hash menyang file nalika mbangun. Iki perlu supaya browser bisa nyimpen file kanthi aman kanggo wektu sing suwe. Yen file kasebut owah, banjur hash bakal diganti, sing bakal meksa browser ngundhuh file kasebut maneh.

Sayange, ing caraku, ngganti konfigurasi liwat variabel lingkungan ora nyebabake owah-owahan ing hash file, sing tegese cache browser kudu dibatalake kanthi cara liya. Aku ora duwe masalah iki amarga konfigurasi beda disebarake ing lingkungan beda.

Nggabungake gambar pungkasan

Akhire.

file docker

# Первый базовый образ для сборки
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;"]

Saiki gambar sing diasilake bisa dirakit lan digunakake ing ngendi wae.

Source: www.habr.com

Gambar Docker kanggo distribusi Aplikasi Single Page

Nggawe gambar kanggo perakitan

nginx

Pengajaran statika kanggo mangerteni variabel lingkungan

Nggabungake gambar pungkasan