Imej Docker untuk pengedaran Aplikasi Halaman Tunggal

Aplikasi satu halaman (SPA) ialah satu set fail JavaScript dan HTML statik, serta imej dan sumber lain. Kerana mereka tidak berubah secara dinamik, menerbitkannya dalam talian adalah sangat mudah. Terdapat sebilangan besar perkhidmatan murah dan juga percuma untuk ini, bermula dengan Halaman GitHub yang mudah (dan untuk sesetengah orang walaupun dengan narod.ru) dan berakhir dengan CDN seperti Amazon S3. Walau bagaimanapun, saya memerlukan sesuatu yang lain.

Saya memerlukan imej Docker dengan SPA supaya ia boleh dilancarkan dengan mudah dalam pengeluaran sebagai sebahagian daripada kluster Kubernetes dan pada mesin pembangun bahagian belakang yang tidak tahu apa itu SPA.

Saya telah menentukan keperluan imej berikut untuk diri saya sendiri:

• kemudahan penggunaan (tetapi bukan pemasangan);
• saiz minimum dari segi cakera dan RAM;
• konfigurasi melalui pembolehubah persekitaran supaya imej boleh digunakan dalam persekitaran yang berbeza;
• pengedaran fail yang paling cekap.

Hari ini saya akan memberitahu anda bagaimana:

• nginx usus;
• bina brotli daripada sumber;
• ajar fail statik untuk memahami pembolehubah persekitaran;
• dan sudah tentu bagaimana untuk memasang imej Docker dari semua ini.

Tujuan artikel ini adalah untuk berkongsi pengalaman saya dan memprovokasi ahli komuniti yang berpengalaman kepada kritikan yang membina.

Membina imej untuk pemasangan

Untuk menjadikan imej Docker terakhir bersaiz kecil, anda perlu mematuhi dua peraturan: lapisan minimum dan imej asas minimalis. Salah satu imej asas terkecil ialah imej Alpine Linux, jadi itulah yang akan saya pilih. Sesetengah orang mungkin berpendapat bahawa Alpine tidak sesuai untuk pengeluaran, dan ia mungkin betul. Tetapi secara peribadi, saya tidak pernah mempunyai sebarang masalah dengannya dan tiada hujah terhadapnya.

Untuk mempunyai lebih sedikit lapisan, saya akan memasang imej dalam 2 peringkat. Yang pertama ialah draf; semua utiliti tambahan dan fail sementara akan kekal di dalamnya. Dan pada peringkat akhir saya hanya akan menulis versi akhir permohonan itu.

Mari kita mulakan dengan imej tambahan.

Untuk menyusun aplikasi SPA, anda biasanya memerlukan node.js. Saya akan mengambil imej rasmi, yang juga disertakan dengan pengurus pakej npm dan benang. Bagi pihak saya sendiri, saya akan menambah nod-gyp, yang diperlukan untuk membina beberapa pakej npm, dan pemampat Brotli daripada Google, yang akan berguna kepada kita nanti.

Dockerfile dengan ulasan.

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

Sudah di sini saya berjuang untuk minimalism, jadi imej itu disusun oleh satu pasukan besar.

Imej siap boleh didapati di sini: https://hub.docker.com/r/alexxxnf/spa-builder. Walaupun saya mengesyorkan agar tidak bergantung pada imej orang lain dan mengumpul imej anda sendiri.

nginx

Anda boleh menggunakan mana-mana pelayan web untuk mengedarkan kandungan statik. Saya sudah biasa bekerja dengan nginx, jadi saya akan menggunakannya sekarang.

Nginx mempunyai imej Docker rasmi, tetapi ia mempunyai terlalu banyak modul untuk pengedaran statik yang mudah. Mana yang termasuk dalam penghantaran boleh dilihat oleh pasukan khas atau dalam Dockerfile rasmi.

$ 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

Saya akan menggunakan Dockerfile sebagai asas, tetapi saya akan meninggalkan di dalamnya hanya apa yang diperlukan untuk mengedarkan kandungan statik. Versi saya tidak akan dapat berfungsi melalui HTTPS, tidak akan menyokong kebenaran dan banyak lagi. Tetapi versi saya akan dapat mengedarkan fail yang dimampatkan dengan algoritma Brotli, yang lebih cekap sedikit daripada gzip. Kami akan memampatkan fail sekali; tidak perlu melakukan ini dengan cepat.

Ini adalah Dockerfile yang saya miliki. Komen dalam bahasa Rusia adalah milik saya, dalam bahasa Inggeris - daripada yang asal.

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

Saya akan segera membetulkan nginx.conf supaya gzip dan brotli didayakan secara lalai. Saya juga akan memasukkan pengepala caching, kerana kami tidak akan pernah menukar statik. Dan sentuhan terakhir adalah untuk mengubah hala semua 404 permintaan ke index.html, ini perlu untuk navigasi dalam 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";
            }
        }
    }
}

Anda boleh memuat turun imej yang telah siap di sini: https://hub.docker.com/r/alexxxnf/nginx-spa. Ia mengambil masa 10,5 MB. Nginx asal mengambil 19,7 MB. Minat sukan saya berpuas hati.

Mengajar statik untuk memahami pembolehubah persekitaran

Mengapakah tetapan mungkin diperlukan dalam SPA? Contohnya, untuk menentukan API RESTful yang hendak digunakan. Biasanya, tetapan untuk persekitaran yang diingini dipindahkan ke SPA pada peringkat binaan. Jika anda perlu menukar sesuatu, anda perlu membina semula aplikasi itu. Saya tidak mahukannya. Saya mahu aplikasi itu dibina sekali pada peringkat CI, dan dikonfigurasikan seberapa banyak yang diperlukan pada peringkat CD menggunakan pembolehubah persekitaran.

Sudah tentu, fail statik sendiri tidak memahami sebarang pembolehubah persekitaran. Oleh itu, anda perlu menggunakan helah. Dalam imej akhir, saya tidak akan melancarkan nginx, tetapi skrip shell khas yang akan membaca pembolehubah persekitaran, menulisnya ke fail statik, memampatkannya, dan hanya kemudian memindahkan kawalan ke nginx.

Untuk tujuan ini, Dockerfile menyediakan parameter ENTRYPOINT. Mari beri dia skrip berikut (menggunakan Angular sebagai contoh):

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 "$@"

Untuk skrip melakukan tugasnya, tetapan mesti ditulis dalam fail js dalam borang ini: ${API_URL}.
Perlu diingat bahawa kebanyakan SPA moden menambah cincang pada fail mereka semasa membina. Ini adalah perlu supaya penyemak imbas boleh menyimpan fail dengan selamat untuk masa yang lama. Jika fail itu berubah, maka cincangnya akan berubah, yang seterusnya akan memaksa penyemak imbas untuk memuat turun fail itu semula.
Malangnya, dalam kaedah saya, mengubah konfigurasi melalui pembolehubah persekitaran tidak membawa kepada perubahan dalam cincang fail, yang bermaksud bahawa cache penyemak imbas mesti tidak sah dalam beberapa cara lain. Saya tidak menghadapi masalah ini kerana konfigurasi yang berbeza digunakan dalam persekitaran yang berbeza.
Menyatukan imej akhir
Akhirnya.
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;"]
Kini imej yang terhasil boleh dipasang dan digunakan di mana-mana sahaja.
Sumber: www.habr.com