開発者ドキュメント

Ubuntu14.04でカスタムエラーページを使用するようにNginxを構成する方法

getdocs

序章

Nginxは、柔軟性とパワーを備えたコンテンツを提供できる高性能Webサーバーです。 Webページをデザインするときは、ユーザーに表示されるすべてのコンテンツをカスタマイズすると役立つことがよくあります。 これには、利用できないコンテンツを要求した場合のエラーページが含まれます。 このガイドでは、Ubuntu14.04でカスタムエラーページを使用するようにNginxを構成する方法を示します。

前提条件

このガイドを開始するには、sudo権限を持つroot以外のユーザーが必要です。 このタイプのユーザーをセットアップするには、Ubuntu14.04の初期セットアップガイドに従ってください。

また、システムにNginxをインストールする必要があります。 このガイドに従って、これを設定する方法を学びます。

上記の手順を完了したら、このガイドに進んでください。

カスタムエラーページの作成

デモンストレーション用にいくつかのカスタムエラーページを作成しますが、カスタムページは明らかに異なります。

カスタムエラーページは、UbuntuのNginxがデフォルトのドキュメントルートを設定する/usr/share/nginx/htmlディレクトリに配置します。 custom_404.htmlと呼ばれる404エラーのページと、custom_50x.htmlと呼ばれる一般的な500レベルのエラーのページを作成します。 テストするだけの場合は、次の行を使用できます。 それ以外の場合は、次の場所に独自のコンテンツを配置します。

  1. echo "<h1 style='color:red'>Error 404: Not found :-(</h1>" | sudo tee /usr/share/nginx/html/custom_404.html

  2. 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

  3. echo "<h1>Oops! Something went wrong...</h1>" | sudo tee /usr/share/nginx/html/custom_50x.html

  4. 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というデフォルトのサーバーブロックファイルを使用しますが、デフォルト以外のファイルを使用している場合は、独自のサーバーブロックを調整する必要があります。

  1. 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;

        . . .

        error_page 404 /custom_404.html;
        location = /custom_404.html {
                root /usr/share/nginx/html;
                internal;
        }
}

通常、rootはサーバーブロックのルートと一致するため、新しいロケーションブロックに設定する必要はありません。 ただし、通常のWebコンテンツと関連するドキュメントルートを別の場所に移動してもエラーページが表示されるように、ここでは明示しています。

500レベルのエラーをカスタム50xページに送信

次に、ディレクティブを追加して、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;
        }

        error_page 500 502 503 504 /custom_50x.html;
        location = /custom_50x.html {
                root /usr/share/nginx/html;
                internal;
        }

        location /testing {
                fastcgi_pass unix:/does/not/exist;
        }
}

下部に、500レベルのエラーページをテストできるように、ダミーのFastCGIパスも追加しました。 バックエンドが存在しないため、これは正しく機能しません。 ここでページをリクエストすると、500レベルのエラーがカスタムページに役立つことをテストできます。

終了したら、ファイルを保存して閉じます。

Nginxを再起動してページをテストする

次のように入力して、構成ファイルの構文をテストします。

  1. sudo nginx -t

エラーが報告された場合は、続行する前にエラーを修正してください。 構文エラーが返されない場合は、次のように入力してNginxを再起動します。

  1. sudo service nginx restart

これで、サーバーのドメインまたはIPアドレスに移動して存在しないファイルを要求すると、次の404ページが表示されます。

http://server_domain_or_IP/thiswillerror

FastCGIパス用に設定した場所に移動すると、カスタム500レベルページで502BadGatewayエラーが発生します。

http://server_domain_or_IP/testing

これで、戻ってNginx構成から偽のFastCGIパスの場所を削除できます。

結論

これで、サイトのカスタムエラーページが表示されます。 これは、ユーザーが問題を抱えている場合でも、ユーザーのエクスペリエンスをパーソナライズする簡単な方法です。 これらのページの1つの提案は、ヘルプや詳細情報を入手するために行くことができる場所へのリンクを含めることです。 これを行う場合は、関連するエラーが発生している場合でも、リンク先にアクセスできることを確認してください。

モバイルバージョンを終了