Cloudflareにおける「500 Internal Server Error」の基礎知識とカスタムページ設定方法

「500 Internal Server Error」は、インターネットを運用する上で遭遇する可能性のある重要なエラーコードです。特に、Webサイトのパフォーマンスとセキュリティを担うCloudflareを導入している環境では、このエラーがどこで発生しているかを正しく理解し、適切な対応をとることが求められます。

本記事では、Cloudflare環境における500エラーの定義から、その原因の切り分け方、そして訪問者エクスペリエンス向上のためのカスタムエラーページの導入手順について解説します。

Cloudflare環境下での「500 Internal Server Error」の理解

HTTPステータスコード500は、サーバーがリクエストを処理しようとした際に、予期せぬ内部的な問題が発生し、処理を完了できなかったことを示します。

Cloudflareを使用する最大の利点の一つは、オリジンサーバーがダウンし、自力でエラーページを返せない状況であっても、Cloudflareのエッジネットワークがそのエラーを検知し、適切なエラーページを訪問者に対して確実に表示できる点にあります。

Cloudflareを経由してアクセスしている場合、このエラーの発生源は大きく分けて二つあります。

A. オリジンサーバー（お客様のWebサーバー）が原因の場合

リクエストがCloudflareからお客様のオリジンWebサーバーに転送された後、サーバー側でアプリケーションエラー（例：PHPエラー、データベース接続失敗、プログラムのバグ）が発生し、500ステータスコードをCloudflareに返しているケースです。

• 切り分けのヒント: エラー画面にCloudflare固有のエラーコード（例: 52x台）が表示されていない場合、オリジン側が原因である可能性が高いです。

B. Cloudflareのネットワークやエッジが原因の場合

Cloudflareのグローバルネットワーク内での問題、あるいは特定のCloudflareサービス（例：Worker、ルール設定）の処理中に問題が発生したケースです。大規模な障害や設定ミスの際に発生することがあります。

• 切り分けのヒント: エラー画面にcloudflareやcloudflare-nginxといった文字や、Cloudflare特有のRay IDが表示されている場合は、Cloudflare側のシステムに起因する可能性があります。

---

カスタムエラーページを設定するメリット

オリジンサーバーがダウンしたり、500エラーを返したりした場合、ユーザーに表示されるデフォルトのページは非常にそっけないものです。一般的なブラウザやサーバーが返すエラーメッセージは、原因や解決策について一切触れず、単に「500 Internal Server Error」とだけ表示されることが多く、訪問者を不安にさせ、即座のサイト離脱につながりかねません。

カスタムエラーページを設定することで、以下のメリットが得られます。

1. ブランドの一貫性維持: サイトのデザインやロゴを維持したまま、エラーが発生したことを丁寧に伝えることができます。
2. ユーザーエクスペリエンス向上: そっけないエラーメッセージを避け、エラーの原因を分かりやすく説明したり、トップページへのリンクなどを提示したりすることで、訪問者の混乱を防ぎます。
3. 情報伝達: メンテナンス情報や復旧見込み時間など、必要な情報をエラーページに含めることができます。
4. 【最重要】確実にエラー情報を表示: オリジンサーバーが完全に停止し、エラーページを自前で表示できない状況下でも、Cloudflareがこのカスタムページをエッジでキャッシュから生成・表示できるため、訪問者に真っ白な画面ではなく、何らかの情報を提供することが可能になります。

---

オリジンサーバー（お客様のWebサーバー）が原因の場合は、カスタムページを設置することで、独自の画面表示が可能です。

カスタム500エラーページの設定手順

500エラーが発生した際に、ご自身のデザインしたカスタムページを、オリジンサーバーの状態にかかわらずCloudflareから表示させる手順は以下の通りです。

ステップ 1: カスタムHTMLの作成とホスティング

カスタムエラーページは、オリジンサーバーの稼働状況に依存しない環境にホストする必要があります。

1. HTMLファイルの作成: 独自のHTML、CSSを使用してエラーページを作成します。
2. Cloudflareトークンの組み込み: ユーザーがサポートに問い合わせる際などに必要なエラーの詳細情報を表示するため、HTMLファイル内の任意の場所にCloudflareが提供する特定のトークンを挿入します。

トークン	説明
::CLOUDFLARE_ERROR_500S_BOX::	最も推奨されるトークン。このトークンを配置すると、エラー発生時にRay IDやタイムスタンプなど、Cloudflareのデバッグ情報を自動的に含んだボックスが表示されます。
::CLOUDFLARE_ERROR_500S_LINK::	デバッグ情報を含むリンクとして表示されます。

• 外部ホスティング: 作成したHTMLファイルを、オリジンサーバーとは別の安定したプラットフォーム（例：Cloudflare Pages、Amazon S3、別の静的ホスティングサービス）にアップロードし、その公開URLを取得します。

ステップ 2: Cloudflareダッシュボードでの設定

取得したカスタムページのURLをCloudflareに登録します。

1. Cloudflareダッシュボードにログインし、該当する**ゾーン（ドメイン）**を選択します。
2. サイドバーメニューから「規則 (Rules)」へ進み、「カスタムページ (Custom Pages)」を選択します。
3. 「500 Internal Server Error」または「5xx Class Errors」の項目を探します。
4. 対応する「カスタムページを設定 (Edit)」をクリックし、ステップ1でホストしたカスタムエラーページの公開URLを入力します。
5. 「プレビュー」で正常に表示されることを確認した後、「公開 (Publish)」ボタンをクリックして設定を適用します。