errore personalizzato nginx pagina 502 con file css e immagine

Sto cercando di aggiungere una pagina di errore personalizzata per 503. Quello che ho fatto è. aggiungendo sotto righe al server conf nel file nginx.conf.

error_page 500 502 503 504 /50x.html; location = /50x.html { root /home/username/sites/myProject/current/errorPages; internal; 

}

Visualizza la pagina personalizzata quando uwsgi non è attivo, tuttavia non è come alcuna immagine. Stavo cercando di fare molti config a cui riesco a pensare, ma senza fortuna. Qualcuno sa come posso visualizzare il file immagine e abilitare css per una pagina di errore personalizzata?

Ho inserito la mia pagina di errore personalizzata in / home / username / sites / myProject / current / errorPages e la struttura del file è ..

 errorPages/50x.html errorPages/50x_files/50x.css errorPages/50x_files/50x.js errorPages/50x_files/image.png 

Ho appena avuto lo stesso problema, e ciò che ha funzionato è impostare il conf nginx in questo modo:

 error_page 500 502 503 504 /50x.html; location = /50x.html { root /home/username/sites/myProject/current/errorPages; } location = /image.png { root /home/username/sites/myProject/current/errorPages/50x_files; } 

E quindi fare riferimento all’immagine semplicemente come src = “image.png”. Lo stesso dovrebbe valere per il tuo css e js!

Modifica: trovo un modo per farlo funzionare per un sacco di file:

 error_page 500 502 503 504 /errorPages/50x.html; location /errorPages/ { root /home/username/sites/myProject/current/; } 

In questo modo saranno disponibili tutti i file nella cartella errorPages (es. Src = “/ errorPages / image.png”), poiché nginx proverà ad abbinare tutti “/ errorPages / …”. È necessario rimuovere sia “=” che “posizione” (poiché non è più una corrispondenza esatta) e “interno”; in esso (come le altre risorse saranno chiamate da html e non internamente da nginx).

Il motivo per cui la tua immagine / css non viene mostrata / caricata, è perché stai usando la direttiva internal . La direttiva internal specifica che una determinata posizione può essere utilizzata solo per richieste interne e non è disponibile o accessibile dall’esterno (ad esempio http: //mysite/errorPages/500.html ). Quindi, un errore 404 al suo turno è dato per questi file.

Alcuni soluzioni alternative sono:

  1. Rimuovere la direttiva interna

     error_page 500 502 503 504 /50x.html; location = /50x.html { root /home/username/sites/myProject/current/errorPages; } 
  2. Usa gli css inline styles per le tue pagine di errore. Questo tuttavia non funzionerà per le tue immagini, o altri file che sono collegati alla tua pagina.
  3. Posiziona i file css e di immagine all’esterno della cartella errorPages e fai riferimento ad essi nel tuo codice html, con un percorso relativo, a partire dalla radice del tuo sito web.

Penso che l’approccio migliore sia fare le seguenti cose:

  • Usa inline CSS
  • Converti le tue immagini in Base64

Dopo aver fatto ciò, puoi incorporare la stringa Base64 generata nella regola CSS background-image come segue:

 background-image: url(https://stackoverflow.com/questions/27610979/nginx-custom-error-page-502-with-css-and-image-files/data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==) 

Puoi anche usare la stringa con i tag , basta passarla all’attributo src come segue:

  

In questo modo puoi mantenere la regola internal nginx.