Angular 13 Docker how to use brotli on nginx docker server?

Viewed 614

My point is to enable Brotli compression on my docker angular app.

Brotli is enabled in Angular build

package.json

"architect": {
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
              "customWebpackConfig": {
                "path": "./webpack.config.js"
            },

webpack.config.js

var BrotliPlugin = require('brotli-webpack-plugin');
module.exports = {
    plugins: [
        new BrotliPlugin({
            asset: '[path].br',
            threshold: 0,
            minRatio: 0.8,
        })
    ]
}

Here's my docker file

# Use official node image as the base image
FROM node:14.17.0-alpine as build
    
# Set the working directory
WORKDIR /usr/local/app
    
# Add the source code to app
COPY ./ /usr/local/app/
    
# Install all the dependencies
RUN npm install
    
# Generate the build of the application
RUN npm run build --prod
    
#RUN apk add --no-cache nginx-plus-module-brotli
    
# Stage 2: Serve app with nginx server
    
# Use official nginx image as the base image
#FROM macbre/nginx-brotli:1.19.10
FROM nginx:alpine
RUN apk update
RUN apk --no-cache add brotli 
RUN apk --no-cache add nginx-mod-http-brotli 
#nginx-plus-module-brotli
    
# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/local/app/dist/mindmarket-front /usr/share/nginx/html
   
# Expose port 80 443
EXPOSE 80 443

Here's my nginx config

load_module modules/ngx_http_brotli_filter_module.so; # for compressing responses on-the-fly
load_module modules/ngx_http_brotli_static_module.so;

server {
        listen 80;
        listen [::]:80; #ipv6
        server_name example.com;
        return 301 https://$http_host$request_uri;
        #rewrite ^(.*)$ https://$host$1 permanent; we just replace request to https
}


server {
     # quic and http/3
    #listen 443 http3 reuseport;

    # http/2 and http/1.1

    listen      443 ssl http2;
    listen [::]:443 ssl http2; #ipv6

    server_name  example.com;

    ssl_certificate     /etc/nginx/certs/cert.pem;
    ssl_certificate_key /etc/nginx/certs/privkey.pem;

    ssl_session_cache  builtin:1000  shared:SSL:10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    ssl_prefer_server_ciphers on;


    brotli on;
    brotli_comp_level 6;
    brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript  application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;
   
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

  # 0-RTT QUIC connection resumption
    #ssl_early_data on;
  # Add Alt-Svc header to negotiate HTTP/3.
    #add_header alt-svc 'h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400';

    # Sent when QUIC was used
    #add_header QUIC-Status $quic;


    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

docker run command

docker run -p 80:80 -p 443:443 --name test -v /etc/letsencrypt/live/example.com/cert.pem:/etc/nginx/certs/cert.pem -v /etc/letsencrypt/live/example.com/privkey.pem:/etc/nginx/certs/privkey.pem  -v /home/admin/nginx-default.conf:/etc/nginx/conf.d/default.conf:ro -d test:latest;

when i run the docker container I got this error

2022/02/18 12:42:52 [emerg] 1#1: "load_module" directive is not allowed here in /etc/nginx/conf.d/default.conf:4
nginx: [emerg] "load_module" directive is not allowed here in /etc/nginx/conf.d/default.conf:4

According to nginx documentation the load_module directive seems to be in the right place. If I remove load_module nginx says it doesn't know brotli directive. How could I fix this ?

0 Answers
Related