დოკერის სურათი ერთგვერდიანი აპლიკაციის განაწილებისთვის

ერთგვერდიანი აპლიკაცია (SPA) არის სტატიკური JavaScript და HTML ფაილების ნაკრები, ასევე სურათები და სხვა რესურსები. იმის გამო, რომ ისინი დინამიურად არ იცვლება, მათი ონლაინ გამოქვეყნება ძალიან მარტივია. ამისათვის არსებობს უამრავი იაფი და თუნდაც უფასო სერვისი, დაწყებული მარტივი GitHub გვერდებით (და ზოგისთვის narod.ru-თაც კი) და დამთავრებული CDN-ით, როგორიცაა Amazon S3. თუმცა მე სხვა რაღაც მჭირდებოდა.

მე მჭირდებოდა Docker იმიჯი SPA-სთან ერთად, რათა მისი ადვილად გაშვება შესაძლებელი ყოფილიყო როგორც Kubernetes კლასტერის ნაწილის წარმოებაში, ასევე უკანა პლანზე დეველოპერის აპარატზე, რომელსაც წარმოდგენა არ აქვს რა არის SPA.

მე განვსაზღვრე შემდეგი სურათის მოთხოვნები ჩემთვის:

• გამოყენების სიმარტივე (მაგრამ არა შეკრება);
• მინიმალური ზომა როგორც დისკის, ასევე ოპერატიული მეხსიერების თვალსაზრისით;
• კონფიგურაცია გარემოს ცვლადების მეშვეობით, რათა გამოსახულება გამოიყენებოდეს სხვადასხვა გარემოში;
• ფაილების ყველაზე ეფექტური განაწილება.

დღეს მე გეტყვით როგორ:

• ნაწლავის ნგინქსი;
• ბროტლის აშენება წყაროებიდან;
• ასწავლოს სტატიკური ფაილები გარემოს ცვლადების გასაგებად;
• და რა თქმა უნდა, როგორ ავაწყოთ Docker გამოსახულება ამ ყველაფრისგან.

ამ სტატიის მიზანია ჩემი გამოცდილების გაზიარება და საზოგადოების გამოცდილი წევრების კონსტრუქციული კრიტიკის პროვოცირება.

შეკრების გამოსახულების აგება

იმისათვის, რომ საბოლოო Docker გამოსახულება მცირე ზომის იყოს, თქვენ უნდა დაიცვან ორი წესი: მინიმუმ ფენები და მინიმალისტური ბაზის სურათი. ერთ-ერთი ყველაზე პატარა საბაზისო სურათი არის Alpine Linux-ის სურათი, ასე რომ, მე ამას ავირჩევ. ზოგიერთი შეიძლება ამტკიცებდეს, რომ Alpine არ არის შესაფერისი წარმოებისთვის და ისინი შეიძლება მართლები იყვნენ. მაგრამ პირადად მე მასთან არასდროს მქონია პრობლემა და არანაირი არგუმენტი არ არსებობს მის წინააღმდეგ.

ნაკლები ფენა რომ მქონდეს, სურათს 2 ეტაპად ავაწყობ. პირველი არის მონახაზი; მასში დარჩება ყველა დამხმარე პროგრამა და დროებითი ფაილი. ფინალურ ეტაპზე კი მხოლოდ აპლიკაციის საბოლოო ვერსიას დავწერ.

დავიწყოთ დამხმარე სურათით.

SPA აპლიკაციის შედგენისთვის, ჩვეულებრივ, გჭირდებათ node.js. მე ავიღებ ოფიციალურ სურათს, რომელსაც ასევე მოყვება npm და ნართის პაკეტის მენეჯერები. ჩემი სახელით დავამატებ node-gyp-ს, რომელიც საჭიროა რამდენიმე npm პაკეტის ასაგებად და Brotli კომპრესორს Google-ისგან, რომელიც მოგვიანებით გამოგვადგება.

Dockerfile კომენტარებით.

# Базовый образ
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. თუმცა გირჩევთ არ დაეყრდნოთ სხვა ადამიანების სურათებს და შეაგროვოთ საკუთარი.

nginx

თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი ვებ სერვერი სტატიკური შინაარსის გასავრცელებლად. მე მიჩვეული ვარ nginx-თან მუშაობას და ახლა გამოვიყენებ.

Nginx-ს აქვს დოკერის ოფიციალური სურათი, მაგრამ მას აქვს ძალიან ბევრი მოდული მარტივი სტატიკური განაწილებისთვის. რომელი მათგანი შედის მიწოდებაში, შეგიძლიათ ნახოთ სპეციალური გუნდი ან ოფიციალური 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

მე გამოვიყენებ Dockerfile-ს საფუძვლად, მაგრამ მასში დავტოვებ მხოლოდ იმას, რაც საჭიროა სტატიკური შინაარსის გასავრცელებლად. ჩემი ვერსია ვერ იმუშავებს HTTPS-ზე, არ ექნება ავტორიზაციის მხარდაჭერა და მრავალი სხვა. მაგრამ ჩემი ვერსია შეძლებს ბროტლის ალგორითმით შეკუმშული ფაილების გავრცელებას, რაც ოდნავ უფრო ეფექტურია ვიდრე gzip. ჩვენ შევკუმშავთ ფაილებს ერთხელ, ამის გაკეთება საჭირო არ არის.

ეს არის Dockerfile, რომლითაც დავასრულე. კომენტარები რუსულად ჩემია, ინგლისურად - ორიგინალიდან.

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

სასწრაფოდ გავასწორებ nginx.conf, რომ gzip და brotli ჩართული იყოს ნაგულისხმევად. მე ასევე ჩავრთავ ქეშირების სათაურებს, რადგან ჩვენ არასდროს გვექნება ცვალებადი სტატიკური. და საბოლოო შეხება იქნება ყველა 404 მოთხოვნის გადამისამართება index.html-ზე, ეს აუცილებელია 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";
            }
        }
    }
}

დასრულებული სურათი შეგიძლიათ ჩამოტვირთოთ აქ: https://hub.docker.com/r/alexxxnf/nginx-spa. იკავებს 10,5 მბ. თავდაპირველმა nginx-მა დაიკავა 19,7 მბ. ჩემი სპორტული ინტერესი დაკმაყოფილებულია.

სტატიკის სწავლება გარემოს ცვლადების გასაგებად

რატომ შეიძლება იყოს საჭირო პარამეტრები SPA-ში? მაგალითად, იმისათვის, რომ მიუთითოთ რომელი RESTful API გამოიყენოს. როგორც წესი, სასურველი გარემოს პარამეტრები გადაეცემა SPA-ს მშენებლობის ეტაპზე. თუ რაიმეს შეცვლა გჭირდებათ, მოგიწევთ აპლიკაციის აღდგენა. Არ მინდა. მე მინდა, რომ აპლიკაცია აშენდეს ერთხელ CI ეტაპზე და კონფიგურირებული იყოს იმდენად, რამდენადაც საჭიროა CD ეტაპზე, გარემოს ცვლადების გამოყენებით.

რა თქმა უნდა, თავად სტატიკური ფაილები არ ესმით გარემოს ცვლადებს. ამიტომ, თქვენ მოგიწევთ ხრიკის გამოყენება. საბოლოო სურათში მე არ გავაშვებ nginx-ს, არამედ სპეციალურ shell სკრიპტს, რომელიც წაიკითხავს გარემოს ცვლადებს, ჩაწერს მათ სტატიკურ ფაილებში, შეკუმშავს მათ და მხოლოდ ამის შემდეგ გადასცემს კონტროლს nginx-ზე.

ამ მიზნით, Dockerfile უზრუნველყოფს ENTRYPOINT პარამეტრს. მოდით მივცეთ მას შემდეგი სკრიპტი (მაგალითად Angular-ის გამოყენებით):

docker-entrypoint.შ

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

იმისათვის, რომ სკრიპტმა შეასრულოს თავისი სამუშაო, პარამეტრები უნდა ჩაიწეროს js ფაილებში ამ ფორმით: ${API_URL}.
აღსანიშნავია, რომ თანამედროვე SPA-ების უმეტესობა აშენებისას ამატებს ჰეშებს მათ ფაილებს. ეს აუცილებელია იმისათვის, რომ ბრაუზერმა შეძლოს ფაილის უსაფრთხოდ ქეშირება დიდი ხნის განმავლობაში. თუ ფაილი შეიცვლება, მაშინ მისი ჰეში შეიცვლება, რაც თავის მხრივ აიძულებს ბრაუზერს ფაილის ხელახლა ჩამოტვირთვა.
სამწუხაროდ, ჩემი მეთოდით, კონფიგურაციის შეცვლა გარემოს ცვლადების საშუალებით არ იწვევს ფაილის ჰეშის ცვლილებას, რაც ნიშნავს, რომ ბრაუზერის ქეში უნდა იყოს გაუქმებული სხვა გზით. მე არ მაქვს ეს პრობლემა, რადგან სხვადასხვა კონფიგურაცია განლაგებულია სხვადასხვა გარემოში.
საბოლოო სურათის შეკრება
ბოლოს და ბოლოს.
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;"]
ახლა მიღებული სურათის აწყობა და გამოყენება შესაძლებელია სადმე.
წყარო: www.habr.com