前書き
Nginxは、柔軟性とパワーを備えたコンテンツを提供できる高性能Webサーバーです。 Webページを設計するとき、ユーザーに表示されるすべてのコンテンツをカスタマイズすると役立つことがよくあります。 これには、利用できないコンテンツを要求したときのエラーページが含まれます。 このガイドでは、Ubuntu 14.04でカスタムエラーページを使用するようにNginxを構成する方法を示します。
前提条件
このガイドを始めるには、 `+ sudo +`権限を持つ非rootユーザーが必要です。 このタイプのユーザーを設定するには、https：//www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04 [Ubuntu 14.04の初期設定ガイド]に従ってください。 。
また、システムにNginxをインストールする必要があります。 https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-14-04-lts [このガイド]に従って、これを設定する方法を学びます。
上記の手順を完了したら、このガイドに進みます。
カスタムエラーページを作成します
デモ用にいくつかのカスタムエラーページを作成しますが、カスタムページは明らかに異なります。
カスタムエラーページは、UbuntuのNginxがデフォルトのドキュメントルートを設定する `+ / usr / share / nginx / html `ディレクトリに配置します。 「 custom_404.html 」と呼ばれる404エラー用のページと、「 custom_50x.html +」と呼ばれる一般的な500レベルのエラー用のページを作成します。 テストするだけの場合は、次の行を使用できます。 それ以外の場合は、次の場所に独自のコンテンツを配置します。
echo "<h1 style='color:red'>Error 404: Not found :-(</h1>" | sudo tee /usr/share/nginx/html/custom_404.html
echo "<p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>" | sudo tee -a /usr/share/nginx/html/custom_404.html
echo "<h1>Oops! Something went wrong...</h1>" | sudo tee /usr/share/nginx/html/custom_50x.html
echo "<p>We seem to be having some technical difficulties. Hang tight.</p>" | sudo tee -a /usr/share/nginx/html/custom_50x.htmlこれで、クライアントリクエストがさまざまなエラーになったときに提供できる2つのカスタムエラーページができました。
エラーページを使用するためのNginxの構成
ここで、正しいエラー状態が発生したときにこれらのページを使用する必要があることをNginxに伝える必要があります。 設定したい `+ / etc / nginx / sites-enabled `ディレクトリにあるサーバーブロックファイルを開きます。 ` default +`というデフォルトのサーバーブロックファイルを使用しますが、デフォルト以外のファイルを使用している場合は、独自のサーバーブロックを調整する必要があります。
sudo nano /etc/nginx/sites-enabled/defaultこれで、カスタムエラーページにNginxを向けることができます。
カスタム404ページへの404エラーのダイレクト
`+ error_page +`ディレクティブを使用して、404エラーが発生したとき（要求されたファイルが見つからないとき）、作成したカスタムページが提供されるようにします。 ルートブロックがファイルシステムの場所と一致し、ファイルがNginxの内部リダイレクト（クライアントから直接要求できない）を介してのみアクセスできることを確認できるファイルの場所ブロックを作成します。
/ etc / nginx / sites-enabled / default
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
. . .
}通常、サーバーブロックのルートと一致するため、新しいロケーションブロックに「+ root +」を設定する必要はありません。 ただし、通常のWebコンテンツと関連するドキュメントルートを別の場所に移動してもエラーページが表示されるように、ここでは明示的にしています。
カスタム50xページへの500レベルのエラーのダイレクト
次に、ディレクティブを追加して、Nginxが500レベルのエラー（サーバー関連の問題）に遭遇したときに、作成した他のカスタムページを処理するようにします。 これは、前のセクションで使用した式とまったく同じです。 今回は、すべてが `+ custom_50x.html +`ページを使用するように複数の500レベルエラーを設定します。
/ etc / nginx / sites-enabled / default
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
. . .
error_page 404 /custom_404.html;
location = /custom_404.html {
root /usr/share/nginx/html;
internal;
}
}下部に、ダミーのFastCGIパスも追加して、500レベルのエラーページをテストできるようにしました。 バックエンドが存在しないため、これは正しく機能しません。 ここでページをリクエストすると、500レベルのエラーがカスタムページに配信されることをテストできます。
完了したら、ファイルを保存して閉じます。
Nginxの再起動とページのテスト
次を入力して、構成ファイルの構文をテストします。
sudo nginx -tエラーが報告された場合は、続行する前に修正してください。 構文エラーが返されない場合、次を入力してNginxを再起動します。
sudo service nginx restartこれで、サーバーのドメインまたはIPアドレスにアクセスして存在しないファイルを要求すると、設定した404ページが表示されます。
http:///thiswillerrorimage：https：//assets.digitalocean.com/articles/nginx_custom_error_1404/custom_404.png [nginx custom 404]
FastCGIパス用に設定した場所に移動すると、カスタム500レベルページで502 Bad Gatewayエラーが表示されます。
http:///testing画像：https：//assets.digitalocean.com/articles/nginx_custom_error_1404/custom_50x.png [nginx custom 50x]
戻って、Nginx構成から偽のFastCGIパスの場所を削除できます。
結論
これで、サイトのカスタムエラーページを提供するはずです。 これは、ユーザーが問題を経験している場合でも、ユーザーエクスペリエンスをパーソナライズする簡単な方法です。 これらのページの1つの提案は、ヘルプや詳細情報を入手できる場所へのリンクを含めることです。 これを行う場合は、関連するエラーが発生している場合でもリンク先にアクセスできることを確認してください。