Speeding up nginx mycontroller proxy

[Avamander]

To increase security, place nginx under a subdomain and to get rid of "insecure" https warning I set up nginx as a proxy. The downside was that this significantly increased the load on the Raspberry Pi making mycontroller load really slowly, so I found a workaround and even managed to make the proxied version load a bit faster (about 33% (1sec)) than mycontroller alone did and that all with stronger crypto and smaller download sizes :D.

Nginx configuration:

   location / {
       # I'm sending HSTS header with this config
       include security_headers.conf;
       # Should contain pushed files
       include mycontroller_http2_push.conf;
       # CPU becomes a bottleneck with this many files or is just ineffective, workaround for that is below
       gzip off; 
       tcp_nopush on;
       tcp_nodelay on;
       # This would benefit if mycontroller sent `Link` headers
       http2_push_preload on;
       # You'll get smaller overhead if this is disabled 
       proxy_buffering off;

       # Just as a courtesy
       proxy_set_header        X-Real-IP $remote_addr;
       proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;

      # Port and IP of mycontroller
       proxy_pass              http://127.0.0.1:8443;
       charset                 utf-8;
   }

   location ~ ^/(app.js|app.css|services|partials|libs|languages|images|_configurations|controllers){
       gzip on;
       gzip_static on;
       root /[mycontroller_install_directory]/www/;
   }

In order to actually make gzip_static on work you should compress all the files in mycontroller's installation's subdirectory www before with this script, it should be ran every time you update mycontroller:

find . -type f -name "*.css" -exec sh -c "touch {} && \
    gzip -9v < {} > {}.gz" \;

find . -type f -name "*.js" -exec sh -c "touch {} && \
    gzip -9v < {} > {}.gz" \;

find . -type f -name "*.html" -exec sh -c "touch {} && \
    gzip -9v < {} > {}.gz" \;

In order to speed up downloads I recommend you utilize http2 push too, a separate configuration file for that is a good idea:

http2_push /libs/angular-resource/angular-resource.min.js?mcv=20;
http2_push /libs/bootstrap-duallistbox/dist/jquery.bootstrap-duallistbox.min.js?mcv=20;
http2_push /controllers/resources-group.js?mcv=20;
http2_push /controllers/sensors.js?mcv=20;
http2_push /libs/patternfly/dist/css/patternfly.min.css?mcv=20;
http2_push /libs/weather-icons/css/weather-icons.min.css?mcv=20;
http2_push /libs/angular-bootstrap-datetimepicker/css/datetimepicker.css?mcv=20;
http2_push /libs/kubernetes-topology-graph/topology-graph.css?mcv=20;
http2_push /libs/d3/d3.min.js?mcv=20;
http2_push /libs/bootstrap-switch/dist/js/bootstrap-switch.min.js?mcv=20;

I tried pushing more but either nginx or chrome does not accept any other files than these, further improvement could be made by making the controller push resources with Link and nginx having http2_push_preload on; but it doesn't matter much on LAN because round trip takes so little time.

For a few additional milliseconds shaved off you can add fastopen=100 to your listen lines (make sure TCP fast open is also enabled by your OS).

If you want you can also compile nginx with brotli support and further compress all the required files, my tests have shown it's about 5% increase in speed compared to static gzip.

[jkandasa]

@avamander This is great sharing! Thank you so much!
Let me know If I have any action item on this task.