Gambar Docker untuk distribusi Aplikasi Halaman Tunggal

Aplikasi Satu Halaman (SPA) adalah kumpulan berkas JavaScript dan HTML statis, beserta gambar dan sumber daya lainnya. Karena berkas-berkas ini tidak berubah secara dinamis, mempublikasikannya secara daring sangatlah mudah. ​​Ada banyak layanan murah dan bahkan gratis untuk ini, mulai dari yang sederhana seperti GitHub Pages (dan bagi sebagian orang, bahkan narod.ru) hingga CDN seperti Amazon S3. Namun, saya membutuhkan sesuatu yang berbeda.

Saya memerlukan citra Docker dengan SPA sehingga dapat dijalankan dengan mudah baik dalam produksi sebagai bagian dari kluster Kubernetes maupun pada mesin pengembang back-end yang tidak tahu apa itu SPA.

Saya telah menetapkan persyaratan berikut untuk gambar tersebut bagi diri saya sendiri:

• kemudahan penggunaan (tetapi bukan perakitan);
• ukuran minimal dalam hal disk dan RAM;
• konfigurasi melalui variabel lingkungan sehingga gambar dapat digunakan di lingkungan yang berbeda;
• distribusi berkas yang paling efisien.

Hari ini saya akan memberi tahu Anda caranya:

• usus nginx;
• kompilasi brotli dari sumber;
• mengajarkan file statis untuk memahami variabel lingkungan;
• dan tentu saja, cara membangun citra Docker dari semua ini.

Tujuan artikel ini adalah untuk berbagi pengalaman saya dan memancing kritik yang membangun dari anggota komunitas yang berpengalaman.

Membangun gambar untuk perakitan

Untuk menjaga agar image Docker akhir tetap kecil, Anda perlu mematuhi dua aturan: jumlah layer seminimal mungkin dan image dasar yang minimalis. Salah satu image dasar terkecil adalah image Alpine. LinuxJadi, itulah yang akan saya pilih. Beberapa orang mungkin berpendapat bahwa Alpine tidak cocok untuk produksi, dan mereka mungkin benar. Tetapi secara pribadi, saya tidak pernah mengalami masalah dengannya, dan saya tidak memiliki argumen yang menentangnya.

Untuk meminimalkan lapisan, saya akan membangun citra dalam dua tahap. Tahap pertama adalah pembangunan kasar, yang akan berisi semua utilitas tambahan dan berkas sementara. Pembangunan akhir hanya akan berisi versi final aplikasi.

Mari kita mulai dengan gambar tambahan.

Mengompilasi aplikasi SPA biasanya membutuhkan Node.js. Saya akan menggunakan gambar resmi, yang juga mencakup pengelola paket npm dan yarn. Saya juga akan menyertakan node-gyp, yang diperlukan untuk membangun beberapa paket npm, dan kompresor Brotli Google, yang akan kita perlukan nanti.

Dockerfile dengan komentar.

# Базовый образ
FROM node:12-alpine
LABEL maintainer="Aleksey Maydokin <amaydokin@gmail.com>"
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

Di sini saya sudah berjuang untuk minimalis, jadi gambarnya disatukan oleh satu tim besar.

Gambar yang sudah selesai dapat ditemukan di sini: https://hub.docker.com/r/alexxxnf/spa-builderMeskipun saya sarankan untuk tidak bergantung pada gambar orang lain dan membuat gambar Anda sendiri.

nginx

Anda bisa menggunakan server web apa pun untuk menyajikan konten statis. Saya terbiasa menggunakan Nginx, jadi saya akan menggunakannya mulai sekarang.

Nginx memiliki citra Docker resmi, tetapi memiliki terlalu banyak modul untuk penyajian berkas statis sederhana. Anda dapat melihat modul mana yang disertakan dengan perintah khusus atau di Dockerfile resmi.

$ docker jalankan --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 dasar, tetapi saya hanya akan menyertakan apa yang dibutuhkan untuk distribusi konten statis. Versi saya tidak akan berfungsi melalui HTTPS, tidak akan mendukung autentikasi, dan banyak lagi. Namun, versi saya akan dapat mendistribusikan berkas yang dikompresi dengan Brotli, yang sedikit lebih efisien daripada gzip. Kita akan mengompres berkas sekali saja; tidak perlu melakukannya secara langsung.

Ini Dockerfile yang saya dapatkan. Komentar dalam bahasa Rusia adalah milik saya, sedangkan komentar dalam bahasa Inggris berasal dari aslinya.

Dockerfile

# Базовый образ снова Alpine
FROM alpine:3.9
LABEL maintainer="Aleksey Maydokin <amaydokin@gmail.com>"
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 mengedit nginx.conf untuk mengaktifkan gzip dan brotli secara default. Saya juga akan mengaktifkan header caching, karena kita akan menyajikan konten statis yang tidak pernah berubah. Dan sentuhan terakhir adalah mengalihkan semua permintaan 404 ke index.html, yang diperlukan untuk navigasi di 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 dapat mengunduh gambar yang sudah selesai di sini: https://hub.docker.com/r/alexxxnf/nginx-spaUkurannya 10,5 MB. Nginx versi asli 19,7 MB. Minat olahraga saya terpenuhi.

Mengajarkan statika untuk memahami variabel lingkungan

Mengapa SPA mungkin memerlukan pengaturan? Misalnya, untuk menentukan API RESTful mana yang akan digunakan. Biasanya, pengaturan untuk lingkungan yang diperlukan diteruskan ke SPA selama proses pembangunan. Jika Anda perlu mengubah apa pun, Anda harus membangun ulang aplikasi. Saya tidak menginginkan itu. Saya ingin aplikasi dibangun sekali selama tahap CI dan dikonfigurasi sesering yang diperlukan selama tahap CD menggunakan variabel lingkungan.

Tentu saja, berkas statis itu sendiri tidak memahami variabel lingkungan apa pun. Jadi, saya harus menggunakan trik. Pada gambar terakhir, saya tidak akan menjalankan nginx, melainkan skrip shell khusus yang akan membaca variabel lingkungan, menuliskannya ke berkas statis, mengompresnya, dan baru kemudian menyerahkan kendali ke nginx.

Untuk tujuan ini, Dockerfile menggunakan parameter ENTRYPOINT. Mari kita berikan 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 "$@"
 Agar skrip dapat menjalankan tugasnya, pengaturan dalam file JS harus ditulis dalam format berikut: ${API_URL}.
Perlu dicatat bahwa sebagian besar SPA modern menambahkan hash ke berkas mereka selama kompilasi. Hal ini diperlukan agar peramban dapat menyimpan berkas tersebut dalam cache dengan aman untuk jangka panjang. Jika berkas berubah, hash-nya juga akan berubah, yang pada gilirannya memaksa peramban untuk mengunduh berkas tersebut lagi.
Sayangnya, dalam metode saya, mengubah konfigurasi melalui variabel lingkungan tidak mengubah hash file, yang berarti cache browser perlu diinvalidasi dengan cara lain. Saya tidak mengalami masalah ini karena konfigurasi yang berbeda diterapkan di lingkungan yang berbeda.
Merakit gambar 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;"]
Sekarang gambar yang dihasilkan dapat dirangkai dan digunakan di mana saja.
Sumber: www.habr.com