Amazon CloudFront カスタムエラーレスポンスを使ってホストサーバーが停止した場合に任意のページを表示させる

AWS

2023.7.21

Topics

はじめに

突然サーバーが停止して Web サイトが見れなくなったというご経験はありませんか?
今回は、もしサーバー(EC2)が停止した場合でも、ユーザーに任意のページを表示させて情報を正しく知らせる方法について記述致します。

構成

今回は単純な構成にしています。
ホストは、EC2 サーバーで Apache を使って Web サーバーを構築しています。
S3 では、エラー時に表示する HTML ファイルを格納しています。

EC2が停止した場合に、S3にあるHTML ファイルでエラーページを表示させる内容になっています。

カスタムページのAWS構成図

カスタムエラーレスポンスについて

今回メインの機能が、「カスタムエラーレスポンス」になっています。
この設定を CloudFront に行うことによって、ホスト(EC2)からレスポンスされた HTTP ステータスコードによって表示するページを切り替えることができます。

現在対応している HTTP ステータスコードは以下の通りです。

  • 400,403,404,405,414,416
  • 500,501,502,503,504

CloudFront より返されるレスポンスコードの変更 – Amazon CloudFront

ステータスコードごとに用意した任意のエラーページに指定することができます。
そのため、400 系はこのページ、500 系はこのページと細かく分けることができます。

今回は、EC2 を停止して動作を確認するため、その際にレスポンスされる「504」で検証を行います。

設定

簡単に設定内容について説明します。
まず、CloudFront の接続先として、オリジンにはホストとなる EC2 とエラーページ用の S3 を設定します。

CloudFrontオリジンでEC2とS3を設定する

次に、リクエストの処理方法を指定するビヘイビアとして特定のパスの場合は S3 にアクセスさせるように設定します。
この特定のパスは、エラーページの方でレスポンスするパスを指定します。

今回設定するS3のパスパターンは/sorry/*配下です。
また、カスタムエラーレスポンスのパスは/sorry/error.htmlとしています。

また、重要なポイントとしては各パターンの優先度です。
仮に、EC2 のパスパターンより S3 が低かった場合は、すべてのアクセス(今回のパスパターンの場合)が EC2 に振り分けられるためカスタムページを表示させることができません。

CloudFrontビヘイビアでエラーパスが優先度1番高くする

最後に、ホストからレスポンスされるステータスコードとパスを設定します。
このパスは、S3 に格納してある表示させたいファイルを指定します。
また、合わせてどのステータスコードで設定するかを選べます。

今回は、「504」がレスポンスされたときに S3 のパスを表示するように設定します。

エラーページで504を設定する

詳細な設定方法については以下をご覧ください。
カスタムエラーレスポンスの生成 – Amazon CloudFront
Help getting custom error pages from S3 into Cloudfront Distribution | AWS re:Post

ホスト(EC2)が正常な場合

まずは、ホストが正常に稼働していた場合の挙動について見ていきます。

アクセスの流れは以下の通りです。

  1. Client から CloudFront のドメイン名に対してアクセスをする
  2. CloudFront から EC2 に対してリクエストを振り分ける
  3. EC2 から HTTP ステータスコード 200 がレスポンスされる
  4. レスポンスされたページを表示する

実際の流れでアクセスした場合の画面です。
今回は、検証なので簡単な HTML ファイルを作成しています。

ホストが正常な場合のアクセス画面

ホスト(EC2)が停止した場合

では、続いてホスト(EC2)を停止して動作を確認しています。

アクセスの流れは以下の通りです。

  1. Client から CloudFront のドメイン名に対してアクセスをする
  2. CloudFront から EC2 に対してリクエストを振り分ける
  3. EC2 から HTTP ステータスコード 504 がレスポンスされる
  4. カスタムエラーレスポンスに基づいて「/sorry/error.html」にパスが上書きされる
  5. CloudFront から S3 に対してリクエストを振り分ける
  6. S3 の「/sorry/error.html」をレスポンスする
  7. レスポンスされたページを表示する

実際の流れでアクセスした場合の画面です。
カスタムエラーレスポンスを設定していると、以下のようにS3のページを表示させることができます。

エラーページが表示される

仮に CloudFront を経由しない、EC2 にアタッチした EIP でサイトにアクセスしてみます。
そうすると以下のように、アクセスできないと表示されます。

CloudFrontを経由しない場合のホストエラーページ

まとめ

CloudFront を使用することで、CDN としてのキャッシュ機能だけではなく、エラー時の表示まで行うことが可能です。

カスタムエラーレスポンスがない場合、「間違ったドメインに対してアクセスしているのか」や「サーバーがダウンしているのか」など情報がわからないままです。
そこで、カスタムエラーレスポンスを使って任意の画面を表示することで、ユーザーにサイトがどういった状態なのかを正しく伝えることができます。

参考情報

カスタムエラーレスポンスの生成 – Amazon CloudFront
Help getting custom error pages from S3 into Cloudfront Distribution | AWS re:Post

テックブログ新着情報のほか、AWSやGoogle Cloudに関するお役立ち情報を配信中!

Cold-Airflow

2021年新卒入社。インフラエンジニアです。RDBが三度の飯より好きです。 主にデータベースやAWSのサーバレスについて書く予定です。あと寒いのは苦手です。

Recommends

こちらもおすすめ

Special Topics

注目記事はこちら