ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਵੰਡ ਲਈ ਡੌਕਰ ਚਿੱਤਰ

ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ (SPA) ਸਥਿਰ JavaScript ਅਤੇ HTML ਫਾਈਲਾਂ ਦੇ ਨਾਲ-ਨਾਲ ਚਿੱਤਰਾਂ ਅਤੇ ਹੋਰ ਸਰੋਤਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ। ਕਿਉਂਕਿ ਉਹ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਨਹੀਂ ਬਦਲਦੇ, ਉਹਨਾਂ ਨੂੰ ਔਨਲਾਈਨ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨਾ ਬਹੁਤ ਆਸਾਨ ਹੈ। ਇਸਦੇ ਲਈ ਬਹੁਤ ਸਾਰੀਆਂ ਸਸਤੀਆਂ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਮੁਫਤ ਸੇਵਾਵਾਂ ਹਨ, ਇੱਕ ਸਧਾਰਨ GitHub ਪੰਨਿਆਂ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ (ਅਤੇ ਕੁਝ ਲਈ narod.ru ਨਾਲ ਵੀ) ਅਤੇ ਐਮਾਜ਼ਾਨ S3 ਵਰਗੇ CDN ਨਾਲ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ। ਹਾਲਾਂਕਿ, ਮੈਨੂੰ ਕੁਝ ਹੋਰ ਚਾਹੀਦਾ ਸੀ।

ਮੈਨੂੰ SPA ਦੇ ਨਾਲ ਇੱਕ ਡੌਕਰ ਚਿੱਤਰ ਦੀ ਲੋੜ ਸੀ ਤਾਂ ਜੋ ਇਸਨੂੰ ਕੁਬਰਨੇਟਸ ਕਲੱਸਟਰ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਉਤਪਾਦਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਲਾਂਚ ਕੀਤਾ ਜਾ ਸਕੇ, ਅਤੇ ਇੱਕ ਬੈਕ-ਐਂਡ ਡਿਵੈਲਪਰ ਦੀ ਮਸ਼ੀਨ 'ਤੇ ਜਿਸ ਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਕਿ SPA ਕੀ ਹੈ।

ਮੈਂ ਆਪਣੇ ਲਈ ਹੇਠ ਲਿਖੀਆਂ ਚਿੱਤਰ ਲੋੜਾਂ ਨਿਰਧਾਰਤ ਕੀਤੀਆਂ ਹਨ:

• ਵਰਤਣ ਦੀ ਸੌਖ (ਪਰ ਅਸੈਂਬਲੀ ਨਹੀਂ);
• ਡਿਸਕ ਅਤੇ ਰੈਮ ਦੇ ਰੂਪ ਵਿੱਚ ਘੱਟੋ-ਘੱਟ ਆਕਾਰ;
• ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਸੰਰਚਨਾ ਤਾਂ ਜੋ ਚਿੱਤਰ ਨੂੰ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕੇ;
• ਫਾਈਲਾਂ ਦੀ ਸਭ ਤੋਂ ਕੁਸ਼ਲ ਵੰਡ.

ਅੱਜ ਮੈਂ ਤੁਹਾਨੂੰ ਦੱਸਾਂਗਾ ਕਿ ਕਿਵੇਂ:

• gut nginx;
• ਸਰੋਤਾਂ ਤੋਂ ਬਰੋਟਲੀ ਬਣਾਓ;
• ਸਥਿਰ ਫਾਈਲਾਂ ਨੂੰ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਨੂੰ ਸਮਝਣ ਲਈ ਸਿਖਾਓ;
• ਅਤੇ ਬੇਸ਼ਕ ਇਸ ਸਭ ਤੋਂ ਇੱਕ ਡੌਕਰ ਚਿੱਤਰ ਨੂੰ ਕਿਵੇਂ ਇਕੱਠਾ ਕਰਨਾ ਹੈ.

ਇਸ ਲੇਖ ਦਾ ਉਦੇਸ਼ ਮੇਰੇ ਅਨੁਭਵ ਨੂੰ ਸਾਂਝਾ ਕਰਨਾ ਅਤੇ ਤਜਰਬੇਕਾਰ ਭਾਈਚਾਰੇ ਦੇ ਮੈਂਬਰਾਂ ਨੂੰ ਉਸਾਰੂ ਆਲੋਚਨਾ ਲਈ ਉਕਸਾਉਣਾ ਹੈ।

ਅਸੈਂਬਲੀ ਲਈ ਇੱਕ ਚਿੱਤਰ ਬਣਾਉਣਾ

ਫਾਈਨਲ ਡੌਕਰ ਚਿੱਤਰ ਨੂੰ ਆਕਾਰ ਵਿੱਚ ਛੋਟਾ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਦੋ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ: ਘੱਟੋ-ਘੱਟ ਲੇਅਰਾਂ ਅਤੇ ਇੱਕ ਘੱਟੋ-ਘੱਟ ਅਧਾਰ ਚਿੱਤਰ। ਸਭ ਤੋਂ ਛੋਟੀਆਂ ਬੇਸ ਚਿੱਤਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਅਲਪਾਈਨ ਲੀਨਕਸ ਚਿੱਤਰ ਹੈ, ਇਸਲਈ ਇਹ ਉਹੀ ਹੈ ਜੋ ਮੈਂ ਚੁਣਾਂਗਾ। ਕੁਝ ਲੋਕ ਇਹ ਦਲੀਲ ਦੇ ਸਕਦੇ ਹਨ ਕਿ ਐਲਪਾਈਨ ਉਤਪਾਦਨ ਲਈ ਢੁਕਵੀਂ ਨਹੀਂ ਹੈ, ਅਤੇ ਉਹ ਸਹੀ ਹੋ ਸਕਦੇ ਹਨ। ਪਰ ਨਿੱਜੀ ਤੌਰ 'ਤੇ, ਮੈਨੂੰ ਉਸ ਨਾਲ ਕਦੇ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਆਈ ਅਤੇ ਨਾ ਹੀ ਉਸ ਵਿਰੁੱਧ ਕੋਈ ਦਲੀਲ ਹੈ।

ਘੱਟ ਲੇਅਰਾਂ ਰੱਖਣ ਲਈ, ਮੈਂ ਚਿੱਤਰ ਨੂੰ 2 ਪੜਾਵਾਂ ਵਿੱਚ ਇਕੱਠਾ ਕਰਾਂਗਾ। ਪਹਿਲਾ ਇੱਕ ਡਰਾਫਟ ਹੈ; ਸਾਰੀਆਂ ਸਹਾਇਕ ਸਹੂਲਤਾਂ ਅਤੇ ਅਸਥਾਈ ਫਾਈਲਾਂ ਇਸ ਵਿੱਚ ਰਹਿਣਗੀਆਂ। ਅਤੇ ਅੰਤਮ ਪੜਾਅ ਵਿੱਚ ਮੈਂ ਸਿਰਫ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਅੰਤਮ ਸੰਸਕਰਣ ਲਿਖਾਂਗਾ।

ਆਉ ਸਹਾਇਕ ਚਿੱਤਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ।

ਇੱਕ SPA ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਆਮ ਤੌਰ 'ਤੇ node.js ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਮੈਂ ਅਧਿਕਾਰਤ ਚਿੱਤਰ ਲਵਾਂਗਾ, ਜੋ ਕਿ ਐਨਪੀਐਮ ਅਤੇ ਧਾਗੇ ਦੇ ਪੈਕੇਜ ਪ੍ਰਬੰਧਕਾਂ ਦੇ ਨਾਲ ਵੀ ਆਉਂਦਾ ਹੈ। ਮੇਰੀ ਆਪਣੀ ਤਰਫੋਂ, ਮੈਂ ਨੋਡ-ਜਿਪ ਨੂੰ ਜੋੜਾਂਗਾ, ਜੋ ਕਿ ਕੁਝ ਐਨਪੀਐਮ ਪੈਕੇਜ ਬਣਾਉਣ ਲਈ ਲੋੜੀਂਦਾ ਹੈ, ਅਤੇ ਗੂਗਲ ਤੋਂ ਬਰੋਟਲੀ ਕੰਪ੍ਰੈਸਰ, ਜੋ ਬਾਅਦ ਵਿੱਚ ਸਾਡੇ ਲਈ ਲਾਭਦਾਇਕ ਹੋਵੇਗਾ.

ਟਿੱਪਣੀਆਂ ਦੇ ਨਾਲ ਡੌਕਰਫਾਈਲ.

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

ਮੈਂ ਡੌਕਰਫਾਈਲ ਨੂੰ ਅਧਾਰ ਵਜੋਂ ਵਰਤਾਂਗਾ, ਪਰ ਮੈਂ ਇਸ ਵਿੱਚ ਸਿਰਫ ਉਹੀ ਛੱਡਾਂਗਾ ਜੋ ਸਥਿਰ ਸਮੱਗਰੀ ਨੂੰ ਵੰਡਣ ਲਈ ਲੋੜੀਂਦਾ ਹੈ. ਮੇਰਾ ਸੰਸਕਰਣ HTTPS 'ਤੇ ਕੰਮ ਕਰਨ ਦੇ ਯੋਗ ਨਹੀਂ ਹੋਵੇਗਾ, ਅਧਿਕਾਰ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰੇਗਾ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ। ਪਰ ਮੇਰਾ ਸੰਸਕਰਣ ਬਰੋਟਲੀ ਐਲਗੋਰਿਦਮ ਨਾਲ ਸੰਕੁਚਿਤ ਫਾਈਲਾਂ ਨੂੰ ਵੰਡਣ ਦੇ ਯੋਗ ਹੋਵੇਗਾ, ਜੋ ਕਿ gzip ਨਾਲੋਂ ਥੋੜ੍ਹਾ ਵਧੇਰੇ ਕੁਸ਼ਲ ਹੈ. ਅਸੀਂ ਫਾਈਲਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਸੰਕੁਚਿਤ ਕਰਾਂਗੇ; ਫਲਾਈ 'ਤੇ ਅਜਿਹਾ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ।

ਇਹ ਉਹ ਡੌਕਰਫਾਈਲ ਹੈ ਜਿਸ ਨਾਲ ਮੈਂ ਖਤਮ ਹੋਇਆ ਸੀ. ਰੂਸੀ ਵਿੱਚ ਟਿੱਪਣੀਆਂ ਮੇਰੀਆਂ ਹਨ, ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ - ਮੂਲ ਤੋਂ।

ਡੌਕਰਫਾਈਲ

# Базовый образ снова 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 ਅਤੇ ਬਰੋਟਲੀ ਮੂਲ ਰੂਪ ਵਿੱਚ ਸਮਰੱਥ ਹੋ ਜਾਣ। ਮੈਂ ਕੈਚਿੰਗ ਹੈਡਰ ਵੀ ਸ਼ਾਮਲ ਕਰਾਂਗਾ, ਕਿਉਂਕਿ ਅਸੀਂ ਕਦੇ ਵੀ ਸਥਿਰ ਨਹੀਂ ਬਦਲਾਂਗੇ. ਅਤੇ ਅੰਤਮ ਸੰਪਰਕ ਸਾਰੀਆਂ 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 MB ਲੈਂਦਾ ਹੈ। ਅਸਲੀ nginx ਨੇ 19,7 MB ਲਿਆ। ਮੇਰੀ ਖੇਡ ਰੁਚੀ ਸੰਤੁਸ਼ਟ ਹੈ।

ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਨੂੰ ਸਮਝਣ ਲਈ ਸਟੈਟਿਕਸ ਸਿਖਾਉਣਾ

SPA ਵਿੱਚ ਸੈਟਿੰਗਾਂ ਦੀ ਲੋੜ ਕਿਉਂ ਹੋ ਸਕਦੀ ਹੈ? ਉਦਾਹਰਨ ਲਈ, ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕਿ ਕਿਹੜਾ RESTful API ਵਰਤਣਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਲੋੜੀਂਦੇ ਵਾਤਾਵਰਣ ਲਈ ਸੈਟਿੰਗਾਂ ਨੂੰ ਬਿਲਡ ਪੜਾਅ 'ਤੇ SPA ਨੂੰ ਟ੍ਰਾਂਸਫਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਕੁਝ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਣਾ ਹੋਵੇਗਾ। ਮੈਨੂੰ ਇਹ ਨਹੀਂ ਚਾਹੀਦਾ. ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇੱਕ ਵਾਰ CI ਪੜਾਅ 'ਤੇ ਬਣਾਇਆ ਜਾਵੇ, ਅਤੇ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ CD ਪੜਾਅ 'ਤੇ ਲੋੜ ਅਨੁਸਾਰ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾਵੇ।

ਬੇਸ਼ੱਕ, ਸਥਿਰ ਫਾਈਲਾਂ ਆਪਣੇ ਆਪ ਵਿੱਚ ਕਿਸੇ ਵੀ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਨੂੰ ਨਹੀਂ ਸਮਝਦੀਆਂ. ਇਸ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਚਾਲ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ. ਅੰਤਮ ਚਿੱਤਰ ਵਿੱਚ, ਮੈਂ nginx ਨੂੰ ਲਾਂਚ ਨਹੀਂ ਕਰਾਂਗਾ, ਪਰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸ਼ੈੱਲ ਸਕ੍ਰਿਪਟ ਜੋ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਪੜ੍ਹੇਗਾ, ਉਹਨਾਂ ਨੂੰ ਸਥਿਰ ਫਾਈਲਾਂ ਵਿੱਚ ਲਿਖੇਗਾ, ਉਹਨਾਂ ਨੂੰ ਸੰਕੁਚਿਤ ਕਰੇਗਾ, ਅਤੇ ਕੇਵਲ ਤਦ ਹੀ ਨਿਯੰਤਰਣ ਨੂੰ nginx ਵਿੱਚ ਟ੍ਰਾਂਸਫਰ ਕਰੇਗਾ।

ਇਸ ਉਦੇਸ਼ ਲਈ, ਡੌਕਰਫਾਈਲ ENTRYPOINT ਪੈਰਾਮੀਟਰ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਆਓ ਉਸ ਨੂੰ ਹੇਠ ਲਿਖੀ ਸਕ੍ਰਿਪਟ ਦੇਈਏ (ਇੱਕ ਉਦਾਹਰਣ ਵਜੋਂ ਐਂਗੁਲਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ):

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}.
ਇਹ ਧਿਆਨ ਦੇਣ ਯੋਗ ਹੈ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ SPA ਬਣਾਉਂਦੇ ਸਮੇਂ ਆਪਣੀਆਂ ਫਾਈਲਾਂ ਵਿੱਚ ਹੈਸ਼ ਜੋੜਦੇ ਹਨ। ਇਹ ਜ਼ਰੂਰੀ ਹੈ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਲੰਬੇ ਸਮੇਂ ਲਈ ਫਾਈਲ ਨੂੰ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਕੈਸ਼ ਕਰ ਸਕੇ। ਜੇਕਰ ਫਾਈਲ ਬਦਲਦੀ ਹੈ, ਤਾਂ ਇਸਦਾ ਹੈਸ਼ ਬਦਲ ਜਾਵੇਗਾ, ਜੋ ਬਦਲੇ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਫਾਈਲ ਨੂੰ ਦੁਬਾਰਾ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ।
ਬਦਕਿਸਮਤੀ ਨਾਲ, ਮੇਰੀ ਵਿਧੀ ਵਿੱਚ, ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਸੰਰਚਨਾ ਨੂੰ ਬਦਲਣ ਨਾਲ ਫਾਈਲ ਹੈਸ਼ ਵਿੱਚ ਕੋਈ ਤਬਦੀਲੀ ਨਹੀਂ ਹੁੰਦੀ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕੈਸ਼ ਨੂੰ ਕਿਸੇ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਅਵੈਧ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮੈਨੂੰ ਇਹ ਸਮੱਸਿਆ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ ਵੱਖ-ਵੱਖ ਸੰਰਚਨਾਵਾਂ ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਤੈਨਾਤ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ।
ਅੰਤਿਮ ਚਿੱਤਰ ਨੂੰ ਇਕੱਠਾ ਕਰਨਾ
ਅੰਤ ਵਿੱਚ.
ਡੌਕਰਫਾਈਲ
# Первый базовый образ для сборки
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