Página de erro interna personalizada do Nginx quando o upstream está inativo

Question

Eu sou novo no Nginx e tenho um proxy reverso para um servidor glassfish upstream. Eu estou tentando configurar uma página personalizada 503 para quando o aplicativo está em manutenção. Eu tenho falhado em fazer isso por várias horas agora. A página maintenance.html contém um link css e jpg. Estes estão aparecendo quando eu sou encaminhado para a página de manutenção. Tudo que eu obtenho é o texto da página e uma imagem quebrada.

CentOS 6.5 nginx 1.4.4 (do repositório nginx)

upstream glassfish {
server <upstream IP>:8181 max_fails=1;
}

server {
 listen       80;
 server_name  localhost;

#charset koi8-r;
#access_log  /var/log/nginx/log/host.access.log  main;

error_page  404 502   /static/error.html;
error_page  503      /static/maintenance.html;

location ~ ^/static/ {
    internal;
}

 location / {
 proxy_set_header X-Real-IP  $remote_addr;
 proxy_set_header X-Forwarded-For $remote_addr;
 proxy_set_header Host $host;
 proxy_pass https://glassfish;
 port_in_redirect off;
 }
}

O erro que aparece no access.log é

[19/Dec/2013:17:49:17 -0500] "GET /static/main.css HTTP/1.1" 404 1136 "http:/// [19/Dec/2013:17:49:18 -0500] "GET /static/header-logo.jpg HTTP/1.1" 404 1136 "http:///

Verifiquei se existe /etc/nginx/html/static/header-logo.jpg

Tenho certeza de que é simples o suficiente, mas não consigo entender!

    

Answer 1

Você diz que está fazendo isso:

location ~ ^/static/ {
    internal;
}

A palavra-chave internal significa que esse location é visível somente para solicitações internas, o que corresponde às suas solicitações error_page .

Se você quiser acessar /static/ diretamente do navegador da web, o que parece necessário para veicular imagens referenciadas nas páginas de erro, será necessário remover a diretiva internal do disse location .

    

Answer 2

Eu recentemente quis fazer a mesma coisa (mostrar uma manutenção / página de erro mais agradável com imagens, CSS e fontes personalizadas).

O que acabei fazendo foi usar um bloco de localização interno como este:

server {
  …

  error_page 502 = @maintenance;

  location @maintenance {
    root /path/to/maintenance-site;

    if (!-f $request_filename) {
      rewrite ^ /index.html break;
    }
  }
}

Eu escrevi uma postagem no blog sobre isso, se precisar de mais detalhes desceu porque eu estava reconstruindo minha infra-estrutura, mas está de volta novamente).

    

Answer 3

Acho que a melhor abordagem é fazer o seguinte:

• Use inline CSS
• Converta suas imagens para Base64

Depois de fazer isso, você pode incorporar a string Base64 gerada na regra CSS background-image da seguinte forma:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

Você também pode usar a string com as tags <img> , apenas passe-a para o atributo src da seguinte forma:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

Dessa forma, você pode manter a regra internal nginx.

Felicidades!