ProHoster > blog > Utawala > Picha ya Docker kwa usambazaji wa Maombi ya Ukurasa Mmoja

Picha ya Docker kwa usambazaji wa Maombi ya Ukurasa Mmoja

Programu ya ukurasa mmoja (SPA) ni seti ya faili tuli za JavaScript na HTML, pamoja na picha na rasilimali zingine. Kwa sababu hazibadiliki kiutendaji, kuzichapisha mtandaoni ni rahisi sana. Kuna idadi kubwa ya huduma za bei nafuu na hata za bure kwa hili, kuanzia na Kurasa rahisi za GitHub (na kwa baadhi hata na narod.ru) na kuishia na CDN kama Amazon S3. Hata hivyo, nilihitaji kitu kingine.

Nilihitaji picha ya Docker iliyo na SPA ili iweze kuzinduliwa kwa urahisi katika uzalishaji kama sehemu ya nguzo ya Kubernetes, na kwenye mashine ya msanidi programu wa nyuma ambaye hajui SPA ni nini.

Nimejiwekea mahitaji yafuatayo ya picha:

  • urahisi wa matumizi (lakini sio mkusanyiko);
  • ukubwa wa chini wote kwa suala la disk na RAM;
  • usanidi kupitia vigezo vya mazingira ili picha iweze kutumika katika mazingira tofauti;
  • usambazaji bora zaidi wa faili.

Leo nitakuambia jinsi:

  • utumbo nginx;
  • jenga brotli kutoka kwa vyanzo;
  • kufundisha faili tuli kuelewa vigezo vya mazingira;
  • na kwa kweli jinsi ya kukusanya picha ya Docker kutoka kwa haya yote.

Madhumuni ya makala haya ni kushiriki uzoefu wangu na kuwachochea wanajamii wenye uzoefu wakosoaji wenye kujenga.

Kuunda picha kwa mkusanyiko

Ili kufanya picha ya mwisho ya Docker ndogo kwa ukubwa, unahitaji kuzingatia sheria mbili: kiwango cha chini cha tabaka na picha ya msingi ya minimalistic. Mojawapo ya picha ndogo zaidi za msingi ni picha ya Alpine Linux, kwa hivyo hiyo ndiyo nitakayochagua. Wengine wanaweza kusema kuwa Alpine haifai kwa uzalishaji, na wanaweza kuwa sahihi. Lakini binafsi, sijawahi kuwa na matatizo yoyote naye na hakuna mabishano dhidi yake.

Ili kuwa na tabaka chache, nitakusanya picha katika hatua 2. Ya kwanza ni rasimu; huduma zote za usaidizi na faili za muda zitabaki ndani yake. Na katika hatua ya mwisho nitaandika tu toleo la mwisho la programu.

Wacha tuanze na picha ya msaidizi.

Ili kuunda programu ya SPA, kwa kawaida unahitaji node.js. Nitachukua picha rasmi, ambayo pia inakuja na wasimamizi wa vifurushi vya npm na uzi. Kwa niaba yangu mwenyewe, nitaongeza node-gyp, ambayo inahitajika kuunda vifurushi kadhaa vya npm, na compressor ya Brotli kutoka Google, ambayo itakuwa muhimu kwetu baadaye.

Dockerfile na maoni.

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

Tayari hapa ninapigania minimalism, hivyo picha imewekwa pamoja na timu moja kubwa.

Picha iliyokamilishwa inaweza kupatikana hapa: https://hub.docker.com/r/alexxxnf/spa-builder. Ingawa ninapendekeza kutotegemea picha za watu wengine na kukusanya yako mwenyewe.

nginx

Unaweza kutumia seva yoyote ya wavuti kusambaza yaliyomo tuli. Nimezoea kufanya kazi na nginx, kwa hivyo nitatumia sasa.

Nginx ina picha rasmi ya Docker, lakini ina moduli nyingi sana za usambazaji rahisi wa tuli. Ambayo ni pamoja na katika utoaji inaweza kuonekana na timu maalum au katika Dockerfile rasmi.

$ 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

Nitatumia Dockerfile kama msingi, lakini nitaacha ndani yake tu kile kinachohitajika kusambaza yaliyomo tuli. Toleo langu halitaweza kufanya kazi kupitia HTTPS, halitaauni uidhinishaji, na mengine mengi. Lakini toleo langu litaweza kusambaza faili zilizobanwa na algoriti ya Brotli, ambayo ni bora kidogo kuliko gzip. Tutabana faili mara moja; hakuna haja ya kufanya hivyo kwa kuruka.

Hii ndio Dockerfile ambayo niliishia nayo. Maoni katika Kirusi ni yangu, kwa Kiingereza - kutoka kwa asili.

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

Nitarekebisha nginx.conf mara moja ili gzip na brotli ziwezeshwe kwa chaguo-msingi. Pia nitajumuisha vichwa vya kache, kwa sababu hatutawahi kubadilisha tuli. Na mguso wa mwisho utakuwa kuelekeza upya maombi yote 404 kwa index.html, hii ni muhimu kwa urambazaji katika 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";
            }
        }
    }
}

Unaweza kupakua picha iliyokamilishwa hapa: https://hub.docker.com/r/alexxxnf/nginx-spa. Inachukua hadi 10,5 MB. Nginx asili ilichukua 19,7 MB. Nia yangu ya michezo imeridhika.

Kufundisha statics kuelewa vigezo vya mazingira

Kwa nini mipangilio inaweza kuhitajika katika SPA? Kwa mfano, ili kubainisha ni API gani ya RESTful ya kutumia. Kawaida, mipangilio ya mazingira unayotaka huhamishiwa kwa SPA katika hatua ya ujenzi. Ikiwa unahitaji kubadilisha kitu, itabidi ujenge upya programu. sitaki. Ninataka programu ijengwe mara moja katika hatua ya CI, na kusanidiwa kadri inavyohitajika katika hatua ya CD kwa kutumia anuwai za mazingira.

Kwa kweli, faili tuli zenyewe hazielewi anuwai za mazingira. Kwa hivyo, utalazimika kutumia hila. Katika picha ya mwisho, sitazindua nginx, lakini hati maalum ya shell ambayo itasoma vigezo vya mazingira, kuandika kwa faili za tuli, kuzikandamiza, na kisha tu kuhamisha udhibiti kwa nginx.

Kwa kusudi hili, Dockerfile hutoa parameta ya ENTRYPOINT. Wacha tumpe hati ifuatayo (kwa kutumia Angular kama mfano):

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 "$@"

Ili hati ifanye kazi yake, mipangilio lazima iandikwe katika faili za js katika fomu hii: ${API_URL}.


Inafaa kumbuka kuwa SPA nyingi za kisasa huongeza heshi kwenye faili zao wakati wa kujenga. Hii ni muhimu ili kivinjari kiweze kuhifadhi faili kwa muda mrefu. Ikiwa faili itabadilika, basi hashi yake itabadilika, ambayo kwa upande italazimisha kivinjari kupakua faili tena.


Kwa bahati mbaya, kwa njia yangu, kubadilisha usanidi kwa njia ya vigezo vya mazingira haiongoi mabadiliko katika hash ya faili, ambayo ina maana kwamba cache ya kivinjari lazima iwe batili kwa njia nyingine. Sina shida hii kwa sababu usanidi tofauti hutumwa katika mazingira tofauti.


Kuweka pamoja picha ya mwisho


Hatimaye.


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


Sasa picha inayotokana inaweza kukusanyika na kutumika popote.


Chanzo: mapenzi.com