ProHoster > blog > administrasi > Gambar Docker untuk distribusi Aplikasi Halaman Tunggal

Gambar Docker untuk distribusi Aplikasi Halaman Tunggal

Aplikasi Satu Halaman (SPA) adalah sekumpulan file JavaScript dan HTML statis, serta gambar dan sumber daya lainnya. Karena tidak berubah secara dinamis, mempublikasikannya secara online sangatlah mudah. Ada banyak layanan murah dan bahkan gratis untuk ini, dimulai dengan Halaman GitHub sederhana (dan untuk beberapa bahkan dengan narod.ru) dan diakhiri dengan CDN seperti Amazon S3. Namun, saya membutuhkan sesuatu yang lain.

Saya memerlukan image Docker dengan SPA agar dapat dengan mudah diluncurkan baik dalam produksi sebagai bagian dari cluster Kubernetes, dan pada mesin pengembang back-end yang tidak tahu apa itu SPA.

Saya telah menentukan sendiri persyaratan gambar berikut:

  • kemudahan penggunaan (tetapi bukan perakitan);
  • ukuran minimum baik dari segi disk dan RAM;
  • konfigurasi melalui variabel lingkungan sehingga gambar dapat digunakan di lingkungan yang berbeda;
  • distribusi file yang paling efisien.

Hari ini saya akan memberi tahu Anda caranya:

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

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

Membangun citra untuk perakitan

Untuk membuat image Docker akhir berukuran kecil, Anda harus mematuhi dua aturan: minimal lapisan dan image dasar minimalis. Salah satu image dasar terkecil adalah image Alpine Linux, jadi itulah yang akan saya pilih. Beberapa orang mungkin berpendapat bahwa Alpine tidak cocok untuk produksi, dan mereka mungkin benar. Tapi secara pribadi, saya tidak pernah punya masalah dengannya dan tidak ada argumen yang menentangnya.

Untuk mendapatkan lebih sedikit lapisan, saya akan merakit gambar dalam 2 tahap. Yang pertama adalah draf, semua utilitas tambahan dan file sementara akan tetap ada di dalamnya. Dan pada tahap akhir saya hanya akan menuliskan versi final dari aplikasi tersebut.

Mari kita mulai dengan gambar tambahan.

Untuk mengkompilasi aplikasi SPA, biasanya Anda memerlukan node.js. Saya akan mengambil gambar resmi, yang juga disertakan dengan manajer paket npm dan benang. Atas nama saya sendiri, saya akan menambahkan node-gyp, yang diperlukan untuk membangun beberapa paket npm, dan kompresor Brotli dari Google, yang nantinya akan berguna bagi kita.

Dockerfile dengan komentar.

# Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π·
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

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

Gambar yang sudah jadi dapat ditemukan di sini: https://hub.docker.com/r/alexxxnf/spa-builder. Meskipun saya menyarankan untuk tidak mengandalkan gambar orang lain dan mengumpulkan gambar Anda sendiri.

nginx

Anda dapat menggunakan server web apa pun untuk mendistribusikan konten statis. Saya sudah terbiasa bekerja dengan nginx, jadi saya akan menggunakannya sekarang.

Nginx memiliki image Docker resmi, tetapi memiliki terlalu banyak modul untuk distribusi statis sederhana. Yang mana saja yang termasuk dalam pengiriman dapat dilihat di tim khusus atau di Dockerfile resmi.

$ buruh pelabuhan menjalankan --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 menyisakan apa yang diperlukan untuk mendistribusikan konten statis. Versi saya tidak akan dapat bekerja melalui HTTPS, tidak mendukung otorisasi, dan banyak lagi. Namun versi saya akan mampu mendistribusikan file yang dikompresi dengan algoritma Brotli, yang sedikit lebih efisien daripada gzip. Kami akan mengompres file satu kali; tidak perlu melakukan ini dengan cepat.

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

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 memperbaiki nginx.conf agar gzip dan brotli diaktifkan secara default. Saya juga akan menyertakan header caching, karena kita tidak akan pernah mengubah statis. Dan sentuhan terakhir adalah mengarahkan semua permintaan 404 ke index.html, ini 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 jadi di sini: https://hub.docker.com/r/alexxxnf/nginx-spa. Dibutuhkan 10,5 MB. Nginx asli memakan 19,7 MB. Minat olahraga saya terpuaskan.

Mengajarkan statika untuk memahami variabel lingkungan

Mengapa pengaturan mungkin diperlukan di SPA? Misalnya, untuk menentukan RESTful API mana yang akan digunakan. Biasanya, pengaturan untuk lingkungan yang diinginkan ditransfer ke SPA pada tahap pembangunan. Jika Anda perlu mengubah sesuatu, Anda harus membangun kembali aplikasi tersebut. Saya tidak mau itu. Saya ingin aplikasi dibangun satu kali pada tahap CI, dan dikonfigurasi sebanyak yang diperlukan pada tahap CD menggunakan variabel lingkungan.

Tentu saja, file statis itu sendiri tidak memahami variabel lingkungan apa pun. Oleh karena itu, Anda harus menggunakan trik. Pada gambar terakhir, saya tidak akan meluncurkan nginx, tetapi skrip shell khusus yang akan membaca variabel lingkungan, menulisnya ke file statis, mengompresnya, dan baru kemudian mentransfer kontrol ke nginx.

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

buruh pelabuhan-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 melakukan tugasnya, pengaturannya harus ditulis dalam file js dalam bentuk ini: ${API_URL}.


Perlu dicatat bahwa sebagian besar SPA modern menambahkan hash ke file mereka saat membuat. Ini diperlukan agar browser dapat menyimpan file dalam cache dengan aman untuk waktu yang lama. Jika file berubah, maka hashnya akan berubah, yang pada gilirannya akan memaksa browser untuk mendownload file tersebut lagi.


Sayangnya, dalam metode saya, mengubah konfigurasi melalui variabel lingkungan tidak menyebabkan perubahan pada hash file, yang berarti cache browser harus dibatalkan dengan cara lain. Saya tidak mengalami masalah ini karena konfigurasi berbeda diterapkan di lingkungan berbeda.


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


Kini gambar yang dihasilkan bisa dirangkai dan digunakan dimana saja.


Sumber: www.habr.com