☰

アップストリームがダウンしたときの Nginx のカスタム内部エラー ページ

tag-icon • tag-icon centos nginx
アップストリームがダウンしたときの Nginx のカスタム内部エラー ページ

私は Nginx を初めて使用しており、上流の GlassFish サーバーへのリバース プロキシを持っています。アプリがメンテナンスのためにダウンしているときに使用するカスタム 503 ページを設定しようとしています。数時間前から設定に失敗しています。maintenance.html ページには、css と jpg リンクが含まれています。メンテナンス ページに転送されると、これらが表示されます。表示されるのは、ページのテキストと壊れた画像だけです。

CentOS 6.5 nginx 1.4.4 (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;
 }
}

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:///

/etc/nginx/html/static/header-logo.jpgが存在することを確認しました

十分簡単なことだと思うのですが、どうしてもわかりません!

答え1

最近、私も同じことをしたいと思いました (画像、CSS、カスタム フォントを使用して、より見栄えの良いメンテナンス/エラー ページを表示する)。

最終的に私がやったのは、次のような内部ロケーション ブロックを使うことでした。

server {
  …

  error_page 502 = @maintenance;

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

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

私は書いたブログ投稿詳細が必要な場合は、それについてお問い合わせください (インフラストラクチャを再構築していたためダウンしていましたが、再び復旧しました)。

答え2

あなたはこうしていると言っています:

location ~ ^/static/ {
    internal;
}

キーワードinternalは、これがlocation内部リクエスト、つまりあなたのerror_pageリクエストに対してのみ表示されることを意味します。

エラー ページから参照される画像を提供するためには、Web ブラウザーから直接アクセスできるようにする必要があると思われますが、その場合は、上記の からディレクティブ/static/を削除する必要があります。internallocation

答え3

最善のアプローチは次のことを実行することだと思います。

  • 使用inline CSS
  • 画像を変換するBase64

これを実行した後、生成された Base64 文字列をbackground-image次のように CSS ルールに埋め込むことができます。

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

タグと一緒に文字列を使用することもできます。次のように属性<img>に渡すだけです。src

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

この方法では、nginx ルールを維持できますinternal。

乾杯！

関連情報