🥇 תמונת דוקר להפצת יישומי עמוד בודד

יישום של עמוד בודד (SPA) הוא קבוצה של קובצי JavaScript ו-HTML סטטיים, כמו גם תמונות ומשאבים אחרים. מכיוון שהם אינם משתנים באופן דינמי, פרסום אותם באינטרנט הוא קל מאוד. יש מספר רב של שירותים זולים ואפילו חינמיים עבור זה, החל מ-GitHub Pages פשוט (ועבור חלקם אפילו עם narod.ru) וכלה ב-CDN כמו Amazon S3. עם זאת, הייתי צריך משהו אחר.

הייתי צריך תמונת Docker עם SPA כדי שניתן יהיה להשיק אותה בקלות גם בייצור כחלק מאשכול Kubernetes, וגם במכונה של מפתח אחורי שאין לו מושג מה זה SPA.

קבעתי לעצמי את דרישות התמונה הבאות:

קלות שימוש (אך לא הרכבה);
גודל מינימלי הן מבחינת דיסק והן מבחינת זיכרון RAM;
תצורה באמצעות משתני סביבה כך שניתן יהיה להשתמש בתמונה בסביבות שונות;
ההפצה היעילה ביותר של קבצים.

היום אספר לכם איך:

nginx בטן;
לבנות ברוטלי ממקורות;
ללמד קבצים סטטיים להבין משתני סביבה;
וכמובן איך להרכיב תמונת Docker מכל זה.

מטרת מאמר זה היא לשתף מניסיוני ולעורר את חברי הקהילה המנוסים לביקורת בונה.

בניית תמונה להרכבה

כדי להפוך את תמונת ה-Docker הסופית לקטנה בגודלה, עליך להקפיד על שני כללים: מינימום שכבות ותמונת בסיס מינימליסטית. אחת מתמונות הבסיס הקטנות ביותר היא תמונת Alpine Linux, אז זה מה שאני אבחר. יש שיטענו שהאלפין אינו מתאים לייצור, ואולי הם צודקים. אבל אישית, מעולם לא היו לי בעיות איתו ואין טענות נגדו.

כדי שיהיו פחות שכבות, ארכיב את התמונה ב-2 שלבים. הראשון הוא טיוטה; כל כלי העזר והקבצים הזמניים יישארו בה. ובשלב הסופי אכתוב רק את הגרסה הסופית של האפליקציה.

נתחיל בתמונת העזר.

כדי להרכיב אפליקציית SPA, אתה בדרך כלל צריך node.js. אני אקח את התמונה הרשמית, שמגיעה גם עם מנהלי npm וחבילות חוטים. בשמי, אוסיף את node-gyp, שדרוש לבניית כמה חבילות npm, ואת המדחס Brotli מגוגל, שיהיה שימושי עבורנו בהמשך.

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 יש תמונת Docker רשמית, אבל יש לה יותר מדי מודולים להפצה סטטית פשוטה. אילו מהם כלולים במשלוח ניתן לראות על ידי צוות מיוחד או ב-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, לא תתמוך בהרשאה ועוד הרבה יותר. אבל הגרסה שלי תוכל להפיץ קבצים דחוסים עם אלגוריתם Brotli, שהוא מעט יותר יעיל מ-gzip. נדחוס קבצים פעם אחת; אין צורך לעשות זאת תוך כדי תנועה.

זה ה-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 מגה-בייט. העניין הספורטיבי שלי מרוצה.

הוראת סטטיקה להבנת משתני סביבה

מדוע ייתכן שיהיה צורך בהגדרות בספא? לדוגמה, על מנת לציין באיזה RESTful API להשתמש. בדרך כלל, הגדרות עבור הסביבה הרצויה מועברות ל-SPA בשלב הבנייה. אם אתה צריך לשנות משהו, תצטרך לבנות מחדש את היישום. אני לא רוצה את זה. אני רוצה שהאפליקציה תיבנה פעם אחת בשלב ה-CI, ותצורה ככל הדרוש בשלב התקליטור באמצעות משתני סביבה.

כמובן, קבצים סטטיים עצמם אינם מבינים אף משתני סביבה. לכן, תצטרך להשתמש בטריק. בתמונה הסופית אני לא אשיק nginx, אלא סקריפט מעטפת מיוחד שיקרא משתני סביבה, יכתוב אותם לקבצים סטטיים, ידחוס אותם ורק אז יעביר את השליטה ל-nginx.

למטרה זו, ה-Dockerfile מספק את הפרמטר ENTRYPOINT. בואו ניתן לו את התסריט הבא (באמצעות Angular כדוגמה):

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 "$@"
על מנת שהסקריפט יעשה את עבודתו, יש לכתוב את ההגדרות בקבצי js בצורה זו: ${API_URL}.

ראוי לציין שרוב ה-SPAs המודרניים מוסיפים גיבוב לקבצים שלהם בעת הבנייה. זה הכרחי כדי שהדפדפן יוכל לשמור את הקובץ בבטחה במשך זמן רב. אם הקובץ אכן ישתנה, ה-hash שלו ישתנה, מה שבתורו יאלץ את הדפדפן להוריד את הקובץ שוב.

לצערי, בשיטה שלי, שינוי התצורה באמצעות משתני סביבה לא מוביל לשינוי ב-hash של הקובץ, מה שאומר שיש לבטל את מטמון הדפדפן בדרך אחרת. אין לי בעיה זו כי תצורות שונות פרוסות בסביבות שונות.

מרכיבים את התמונה הסופית

סוף כל סוף.

דוקרפיל

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

תמונת Docker להפצה של יישום עמוד בודד

בניית תמונה להרכבה

nginx

הוראת סטטיקה להבנת משתני סביבה

מרכיבים את התמונה הסופית