[Nginx] error_page assets worden niet geladen

[scorpie]

Hi!

Issue: Ik krijg Nginx maar niet zover om de assets (fonts, images) van de errorpages te tonen en ik kan niet zo goed pinpointen waar het precies misgaat.

Please bare with me, de setup kost wat regels om uit te leggen

De applicatie die ik aan het deployen ben bestaat uit meerdere modules. Ieder van die modules is accessible dmv een REST API. Al die modules draaien intern op verschillende poorten (potentieel op verschillende hosts zelfs) en worden via Nginx als reverse proxy aangesproken.

Een (versimpeld) stukje filedirectory:

code:

/webroot
├── errorpages
│   ├── fonts
│   │   ├── ...
│   ├── img
│   │   ├── ...
│   └── index.html
├── module1
│   └── module1_executable (opent poort 5556)
├── module2
│   └── module2_executable (opent poort 5557)
├── module3
│   ├── module3_executable (opent poort 5558)
│   └── static
│       ├── email_template.html
│       ├── [...]
│       └── styles.css
├── module4
│   └── module4_executable (opent poort 5559)
└── webapp_directory
    ├── static
    │   └── dist
    └── webapp_executable (opent poort 5560)

(Poorten zijn fictief en dienen slechts ter illustratie)

De (wederom versimpelde) Nginx setup ziet er als volgt uit:

code:

    upstream application {
        server www.xxx.yyy.zzz:5560;
    }
    upstream module1 {
        server www.xxx.yyy.zzz:5556;
    }
    upstream module2 {
        server www.xxx.yyy.zzz:5557;
    }
    upstream module3 {
        server www.xxx.yyy.zzz:5558;
    }
    upstream module4 {
        server www.xxx.yyy.zzz:5559;
    }

    server {
        listen                  443 ssl http2;

        location / {
            rewrite         /(.*) /$1 break;
            proxy_pass      https://application/;
            proxy_set_header Host           $host;
            proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto  $scheme;
            proxy_set_header X-Forwarded-Host   $host;
            proxy_set_header X-Forwarded-Port   $server_port;
        }
        location /module1/ {
            rewrite         /module1/(.*) /$1 break;
            proxy_pass      http://module1/;
        }
        location /module2/ {
            rewrite         /module2/(.*) /$1 break;
            proxy_pass      http://module2/;
                }
                location /module3/ {
            rewrite         /module3/(.*) /$1 break;
            proxy_pass      http://module3/;
        }
        location /module4/ {
            rewrite         /module4/(.*) /$1 break;
            proxy_pass      http://module4/;
                }


        ## Errors -> Locations
        error_page   502 /errorpages/index.html;

        location = /errorpages/index.html {
            return 502 $scheme://$host/;
            try_files /50x.html @error;
            internal;
        }

        ## Fallback Directory
        location @error {
            proxy_intercept_errors on;
            root    /webroot/errorpages/;
            try_files $uri /index.html /index.html;
            internal;
        }

    }

Ok, dus wat gebeurt er nu precies? De frontend van de webapplicatie werkt prima, draait op poort 443, en alle afzonderlijke modules worden netjes door-gereverse-proxied. Maar in het geval van een error (in dit geval een 502 error) die wordt veroorzaakt in welke module dan ook, wordt de correcte error_page wel weergegeven (index.html in de map /webroot/errorpages/), alleen worden niet de images getoond of de correcte fonts gebruikt. In de network tabs van de diverse developer tools (chrome / firefox) zie ik dat al die resources (wederom) een http 502 opleveren.

Iemand?

[Hero of Time]

Dat je 502's krijgt erop, zal te maken hebben dat je geen regels hebt om die assets te kunnen laden. Het komt dan op de standaard location / terecht, die de boel forward naar de server die dus de 502 geeft. Je kan dat heel makkelijk herleiden door de logs van nginx te bekijken. Welke files worden geraakt en waar wordt je werkelijk heen gestuurd.

Je optie met fallback directory waar je 'location @error' hebt, suggereert dat je hier wel aan denkt, maar dat werkt dus blijkbaar niet. Ik heb al meerdere keren gehad dat een root directive geen / aan het einde nodig heeft, tenzij het alleen / is. Kijk daar eerst eens naar. Het is een tricky ding, de exacte werking weet ik ook nooit uit m'n hoofd en als het een niet werkt, probeer ik het ander.

[scorpie]

Ja, eigenlijk wilde ik niet naar een oplossing toe werken om de afzonderlijke asset directories te voorzien van een location block in m'n Nginx configuratie, want dan kunnen die afzonderlijke modules weer niet goed gaan werken. Ik hoopte dat door de root directive te gebruiken alle assets ook zouden worden geladen vanaf dat reference point.

Maar je hints zijn wel nuttig inderdaad, zal even voor de zekerheid checken of die 502's geladen worden door die modules. Maar ik denk eigenlijk van niet, want dan had ik eerder 404's verwacht. En die trailing slashes zijn inderdaad een beetje verwarrend, daar kan ik ook nog even naar kijken.

[Hero of Time]

Als je zegt 'location /webroot/error/pagina.html', dan geef je een exacte locatie voor een bestand op en niets meer. Er mag niets afwijken van wat er wordt opgevraagd. Leuk als je /webroot/error/502.html/assets hebt, maar je mist daar dan nog een index optie voor. Dus als je /webroot/error/assets/opmaak.css hebt, zal die nooit in dat location blok komen.