[ENHANCEMENT]: Cache settings of NGINX Server

[ObsidianOracle]

Description

To improve data which is loaded in the ui we should check the cache settings of NGINX Server

[gluafamichl]

For our production web-ui container we should use an nginx.conf like this one:

server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    # ----------------------------
    # Security Header (global)
    # ----------------------------
    server_tokens off;

    add_header Referrer-Policy "same-origin" always;
    add_header Permissions-Policy "geolocation=(), midi=(), notifications=(), push=(), sync-xhr=(self), microphone=(), camera=(), magnetometer=(), gyroscope=(), speaker=(), vibrate=(), fullscreen=(self), payment=(), bluetooth=(), display-capture=(), usb=()" always;
    add_header Content-Security-Policy "frame-ancestors 'none'" always;
    add_header X-Frame-Options DENY always;
    add_header X-Content-Type-Options nosniff always;
    add_header X-XSS-Protection "1; mode=block" always;

    # ----------------------------
    # Angular Routing
    # ----------------------------
    location / {
        try_files $uri $uri/ /index.html;
    }

    # ----------------------------
    #  index.html: no caching
    # ----------------------------
    location = /index.html {
        expires -1;
        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
    }

    # ----------------------------
    # static assets: long caching period
    # ----------------------------
    location ~* \.(?:js|css|woff2?|ttf|eot|ico|png|jpg|jpeg|gif|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable" always;
        access_log off;
    }

    # ----------------------------
    # optional JSON / Config short caching
    # ----------------------------
    location ~* \.json$ {
        expires 1h;
        add_header Cache-Control "public" always;
    }
}

[gluafamichl]

Additionally we should add gzip compression to the config to reduce the required bandwidth for sending assets from the server to the client.

GZIP

gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_vary on;
gzip_proxied any;
gzip_disable "msie6";

gzip_types
    text/plain
    text/css
    text/xml
    application/json
    application/javascript
    application/xml
    application/xml+rss
    application/vnd.ms-fontobject
    application/x-font-ttf
    font/woff
    font/woff2
    image/svg+xml;

[s3inlc]

That sounds good 👍
Is the gzip config also to be in the nginx.conf file?

There is already a header.conf file which is put into the production image on the docker build, maybe this can be merged with the header options you proposed above and maybe the other configs could be put into additional conf files and added in the production docker build?

[gluafamichl]

This can all be done in one nginx.conf (or maybe a hashtopolis.conf, the names doesn't matter), the content of the header.conf is already merged to the server block of the config mentioned above.

[gluafamichl]

I have pushed the changes in the web branch 1854-enhancement-cache-settings-of-nginx-server
@s3inlc , @jessevz could you please check it with a local build of the production image of this branch, if everything works like expected?

[s3inlc]

It seems to work from my perspective, most of the files are now only reloaded when I force reload with shift+F5.

What I noticed is that the browser tells me this option: Cache-Control max-age=31536000. Is this set anywhere explicitly or is this the default value for caching? And do we consider such a long time to be good, or should we discuss about changing it?

[gluafamichl]

This is the setting for the static assets of one year. This is okay, because all css and js files have a hashed name set by Angular build. With every new build, the names will change, so such a long period is okay in that case.

    location ~* \.(?:js|css|woff2?|ttf|eot|ico|png|jpg|jpeg|gif|svg)$ {
    ==>    expires 1y;
        add_header Cache-Control "public, immutable" always;
        access_log off;
    }

[gluafamichl]

But it's not a problem to restrict the expire date to one day, so the static assets will be loaded once a day, that's okay, too.