🥇Kiʻi Docker no ka hāʻawi ʻana i ka palapala noi ʻaoʻao hoʻokahi

ʻO ka palapala noi ʻaoʻao hoʻokahi (SPA) he pūʻulu o nā faila JavaScript a me HTML, a me nā kiʻi a me nā kumuwaiwai ʻē aʻe. No ka mea ʻaʻole lākou e loli ikaika, maʻalahi loa ka paʻi ʻana iā lākou ma ka pūnaewele. Nui ka nui o nā lawelawe maʻalahi a me ka manuahi no kēia, e hoʻomaka me kahi ʻaoʻao GitHub maʻalahi (a no kekahi me narod.ru) a hoʻopau me kahi CDN e like me Amazon S3. Akā naʻe, pono wau i kahi mea ʻē aʻe.

Makemake au i kahi kiʻi Docker me SPA i hiki ke maʻalahi i ka hoʻokuʻu ʻia ʻana ma ke ʻano he ʻāpana o kahi puʻupuʻu Kubernetes, a ma ka mīkini o kahi mea hoʻomohala hope i ʻike ʻole i ka SPA.

Ua hoʻoholo wau i kēia mau koi kiʻi noʻu iho:

maʻalahi o ka hoʻohana ʻana (akā ʻaʻole hui);
ka liʻiliʻi liʻiliʻi ma ke ʻano o ka disk a me ka RAM;
hoʻonohonoho ma o nā ʻano hoʻololi kaiapuni i hiki ke hoʻohana ʻia ke kiʻi ma nā ʻano like ʻole;
ka hāʻawi maikaʻi loa o nā faila.

I kēia lā e haʻi wau iā ʻoe pehea:

ʻōpū nginx;
kūkulu i ka brotli mai nā kumu;
aʻo i nā faila static e hoʻomaopopo i nā loli kaiapuni;
a pehea pehea e hōʻuluʻulu ai i kahi kiʻi Docker mai kēia mau mea āpau.

ʻO ke kumu o kēia ʻatikala e kaʻana like i koʻu ʻike a hoʻonāukiuki i nā lālā o ke kaiāulu ʻike i nā ʻōlelo hoʻohewa.

Ke kūkulu ʻana i kiʻi no ka hui ʻana

No ka liʻiliʻi ʻana i ke kiʻi Docker hope loa, pono ʻoe e mālama i nā lula ʻelua: ka liʻiliʻi o nā papa a me kahi kiʻi kumu minimalistic. ʻO kekahi o nā kiʻi kumu liʻiliʻi ʻo ke kiʻi Alpine Linux, no laila ʻo ia kaʻu e koho ai. Hiki i kekahi ke hoʻopaʻapaʻa ʻaʻole kūpono ka Alpine no ka hana ʻana, a pololei paha lākou. Akā ʻo wau iho, ʻaʻohe oʻu pilikia me ia a ʻaʻohe hoʻopaʻapaʻa kūʻē iā ia.

No ka liʻiliʻi o nā papa, e hōʻuluʻulu au i ke kiʻi i 2 mau pae. ʻO ka mea mua he kikoʻī; e waiho ʻia nā mea kōkua a pau a me nā faila manawa. A i ka pae hope e kākau wale au i ka mana hope o ka noi.

E hoʻomaka kākou me ke kiʻi kōkua.

No ka hōʻuluʻulu ʻana i kahi noi SPA, pono ʻoe i ka node.js. E lawe au i ke kiʻi kūhelu, e hele pū me nā luna o ka npm a me ka yarn package managers. Ma koʻu inoa ponoʻī, e hoʻohui wau i ka node-gyp, kahi e pono ai ke kūkulu i kekahi mau pūʻulu npm, a me ka Brotli compressor mai Google, e pono ai iā mākou ma hope.

Dockerfile me nā manaʻo.

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

I kēia manawa ke hakakā nei au no ka minimalism, no laila ua hui pū ʻia ke kiʻi e hoʻokahi hui nui.

Hiki ke loaʻa ke kiʻi i hoʻopau ʻia ma aneʻi: https://hub.docker.com/r/alexxxnf/spa-builder. ʻOiai ke paipai nei au ʻaʻole e hilinaʻi i nā kiʻi a nā poʻe ʻē aʻe a e ʻohi i kāu kiʻi ponoʻī.

nginx

Hiki iā ʻoe ke hoʻohana i kekahi kikowaena pūnaewele no ka hoʻolaha ʻana i nā ʻike static. Ua maʻa wau i ka hana me ka nginx, no laila e hoʻohana wau i kēia manawa.

Loaʻa iā Nginx kahi kiʻi Docker mana, akā he nui nā modula no ka hoʻohele static maʻalahi. ʻO nā mea i hoʻokomo ʻia i ka lawe ʻana hiki ke ʻike ʻia e kahi hui kūikawā a i ʻole ma ka Dockerfile mana.

$ docker holo --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

E hoʻohana wau i ka Dockerfile ma ke ʻano he kumu, akā e waiho wau i loko o ia mea wale nō ka mea e pono ai e puʻunaue i ka ʻike static. ʻAʻole hiki i kaʻu mana ke hana ma luna o HTTPS, ʻaʻole e kākoʻo i ka ʻae ʻana, a ʻoi aku ka nui. Akā hiki i kaʻu mana ke hāʻawi i nā faila i hoʻopili ʻia me ka Brotli algorithm, ʻoi aku ka maikaʻi ma mua o ka gzip. E hoʻopili mākou i nā faila i hoʻokahi manawa; ʻaʻohe pono e hana i kēia ma ka lele.

ʻO kēia ka Dockerfile aʻu i hoʻopau ai. ʻO nā manaʻo ma ka ʻōlelo Lūkini naʻu, ma ka ʻōlelo Pelekania - mai ka mea kumu.

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

E hoʻoponopono koke wau i ka nginx.conf i hiki ai i ka gzip a me ka brotli ke hoʻohana ʻia e ka paʻamau. E hoʻokomo pū wau i nā poʻomanaʻo caching, no ka mea ʻaʻole mākou e hoʻololi i ka static. A ʻo ka hoʻopā hope loa e hoʻihoʻi hou i nā noi 404 āpau i index.html, pono kēia no ka hoʻokele ʻana i ka 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";
            }
        }
    }
}

Hiki iā ʻoe ke hoʻoiho i ke kiʻi i hoʻopau ʻia ma aneʻi: https://hub.docker.com/r/alexxxnf/nginx-spa. Loaʻa iā 10,5 MB. Ua lawe ka nginx kumu i 19,7 MB. Ua māʻona koʻu hoihoi pāʻani.

Ke aʻo ʻana i nā statics e hoʻomaopopo i nā loli kaiapuni

No ke aha e pono ai nā hoʻonohonoho ma SPA? No ka laʻana, i mea e kuhikuhi ai i ka API RESTful e hoʻohana ai. ʻO ka maʻamau, hoʻololi ʻia nā hoʻonohonoho no ke kaiapuni i makemake ʻia i SPA ma ke kahua kūkulu. Inā pono ʻoe e hoʻololi i kekahi mea, pono ʻoe e kūkulu hou i ka noi. ʻAʻole wau makemake. Makemake au e kūkulu ʻia ka noi i hoʻokahi manawa ma ke kahua CI, a hoʻonohonoho ʻia e like me ka mea e pono ai ma ke kahua CD me ka hoʻohana ʻana i nā ʻano hoʻololi kaiapuni.

ʻOiaʻiʻo, ʻaʻole maopopo nā faila static iā lākou iho i nā ʻano hoʻololi kaiapuni. No laila, pono ʻoe e hoʻohana i kahi hoʻopunipuni. I ke kiʻi hope loa, ʻaʻole wau e hoʻomaka i ka nginx, akā he ʻatikala shell kūikawā e heluhelu ai i nā ʻano hoʻololi o ke kaiapuni, e kākau iā lākou i nā faila static, hoʻopaʻa iā lākou, a laila e hoʻololi i ka mana i ka nginx.

No kēia kumu, hāʻawi ka Dockerfile i ka helu ENTRYPOINT. E hāʻawi iā ia i kēia palapala (e hoʻohana ana i ka Angular ma ke ʻano he laʻana):

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 "$@"
I mea e hana ai ka palapala i kāna hana, pono e kākau ʻia nā hoʻonohonoho i nā faila js ma kēia ʻano: ${API_URL}.

He mea pono e hoʻomaopopo i ka nui o nā SPA hou e hoʻohui i nā hashes i kā lākou faila i ke kūkulu ʻana. Pono kēia i hiki i ka polokalamu kele pūnaewele ke hūnā i ka faila no ka manawa lōʻihi. Inā loli ka faila, a laila e hoʻololi ʻia kāna hash, ʻo ia ka mea e koi ai i ka polokalamu kele e hoʻoiho hou i ka faila.

ʻO ka mea pōʻino, ma kaʻu ʻano, ʻo ka hoʻololi ʻana i ka hoʻonohonoho ma o nā ʻano hoʻololi kaiapuni ʻaʻole ia e alakaʻi i kahi hoʻololi i ka file hash, ʻo ia hoʻi, pono e hoʻopau ʻia ka cache browser ma kekahi ʻano ʻē aʻe. ʻAʻohe oʻu pilikia no ka mea ua hoʻonohonoho ʻia nā ʻano hoʻonohonoho like ʻole i nā wahi like ʻole.

Hoʻohui i ke kiʻi hope loa

ʻO ka hope loa.

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

I kēia manawa hiki ke hōʻuluʻulu a hoʻohana ʻia ke kiʻi hopena ma nā wahi āpau.

Source: www.habr.com

ʻO ke kiʻi Docker no ka hāʻawi ʻana i ka palapala noi ʻaoʻao hoʻokahi

Ke kūkulu ʻana i kiʻi no ka hui ʻana

nginx

Ke aʻo ʻana i nā statics e hoʻomaopopo i nā loli kaiapuni

Hoʻohui i ke kiʻi hope loa