Amazon CloudFront を使ってメンテナンス画面に切り替えてみた

WEB サービスを運用する上で、予期せぬ障害や計画的なメンテナンス作業により、バックエンドの EC2 インスタンスが一時的に停止してしまうことがあります。このような状況で、ユーザーに何も表示されないエラー画面を見せてしまうと、サービスの信頼性やユーザー体験を大きく損なうことになりかねません。

そこで重要となるのが、 EC2 が停止した際に自動的にメンテナンス画面を表示する仕組みです。これにより、ユーザーはサービスが一時停止していることを理解でき、不安なく待つことができます。

本ブログでは、この要件を Amazon CloudFront によって実現させる仕組みをご紹介いたします。

Amazon CloudFront を含む今回の構成について

今回利用するサービスとその構成は以下のとおりです。

CloudFront：WEB コンテンツを世界中のユーザーに高速かつ安全に配信するための CDN（ Content Delivery Network ）サービスです。ユーザーからのリクエストをまず CloudFront が受け取り、オリジン（EC2やS3）に転送したり、エッジロケーションでコンテンツをキャッシュしたりします。今回の構成では、 EC2 が停止した際に S3 のメンテナンス画面に切り替えるルーティングとしての役割を担います。

EC2：スケーラブルな仮想サーバーを提供するサービスで、WEB アプリケーションのバックエンドとして動作します。今回の構成では、通常時にユーザーにサービスを提供するメインの WEBサーバーとして機能します。

S3：高い耐久性と可用性を持つオブジェクトストレージサービスです。静的ファイルを保管するのに最適であり、非常に高い信頼性でデータを提供できます。今回の構成では、EC2 が停止した際に表示するメンテナンス画面の HTML ファイルを保管・配信する役割を担います。

簡易構成図は以下の通りです。

Amazon CloudFront を活用したメンテナンス画面表示のリソース準備

では実際に検証していきます。具体的には Amazon CloudFront のカスタムエラーレスポンス 機能を使ってメンテナンス画面を表示させます。

まずは、使用する各リソースを用意します。

★EC2

今回使用する EC2 はメインとして使うものではなく、あくまで メンテナンス画面に切り替わることを確認するためのものになるので、デフォルトの最低スペックで問題ないです。OS は Amazon linux 2023、名前は「 test-maintenance 」にしました。

作成後、WEB ページとして機能させるために EC2 に ssh 接続し、Apatch をインストールしてください。

Apatch インストールコマンド ↓

sudo yum install httpd -y

インストール後、Apatch 起動コマンド を実行してください ↓

sudo systemctl start httpd

その後、お使いのブラウザで EC2 のパブリック IP を調べてください。
警告文を無視し進んで「 It works! 」が表示されたら、EC2 の準備は完了です。

★S3

次はメンテナンス画面を格納する S3 バケットを作成します。

 S3 バケット名については以下のルールを守る必要があります。

・グローバル名前空間で一意であること

すべての Amazon S3 ユーザ間でバケット名が重複しないことが必要です。世界中の他のユーザーが使っていない名前のみ使用可能です。

・バケット命名規則に従うこと

AWS が定めている以下のルールに従う必要があります。（AWS 公式から一部抜粋）

• バケット名は 3 (最少)～63 (最大) 文字の長さにする必要があります。
• バケット名は、小文字、数字、ドット (.)、およびハイフン (-) のみで構成できます。
• バケット名は、文字または数字で開始および終了する必要があります。
• バケット名には、連続する 2 つのピリオドを含めることはできません。
• バケット名は IP アドレスの形式 (192.168.5.4 など) にはできません。
• バケット名のプレフィックスは xn-- で始まってはいけません。
• バケット名を、プレフィックス sthree- または sthree-configurator で始めることはできません。
• バケット名のサフィックスは -s3alias で終わってはいけません。
• バケット名のサフィックスは --ol-s3 で終わってはいけません。
• バケット名は、パーティション内のすべての AWS リージョン のすべての AWS アカウント にわたって一意である必要があります。パーティションは、リージョンのグループです。AWS には、現在、aws (標準リージョン)、aws-cn (中国リージョン)、および aws-us-gov (AWS GovCloud (US)) の 3 つのパーティションがあります。

• バケットが削除されるまで、バケット名を同じパーティション内の別の AWS アカウント で使用することはできません。
• Amazon S3 Transfer Acceleration で使用されるバケットの名前にドット (.) を付けることはできません。

以上の命名ルールに従い、今回は dev-test-cloudfront-functions としました。
※「CloudFront の機能検証」という意味で設定しました。既存サービスの「 CloudFront Functions 」と今回は関係ありません。

バケット名を入力した後は、一旦何も変更せず S3 バケットを作成してください。

その後「 maintenance 」フォルダを作成し、メンテナンス画面を表示するファイルを配下へアップロードします。
ちなみにメンテナンス画面は ChatGPT に作成してもらいました。このメンテナンス画面を EC2 停止時に表示します。

★Amazon CloudFront 

ディストリビューション名は  test-maintenance.com とします。

オリジンに EC2 のパブリック DNS 名を入力してください。

今回 WAF は使用しません。

最後に確認画面が出るので、すべて問題なければ そのまま CloudFront ディストリビューションを作成してください。

今回は検証なので SSL 証明書を発行しません。

CloudFront ディストリビューション作成後、オリジンの設定にてプロトコルを「 HTTP のみ 」に変更してください。

ビヘイビアの設定では、ビューワープロトコルポリシーを「 HTTP and HTTPS 」にしてください。

設定後、ディストリビューション名をブラウザで検索すると、EC2 の WEB ページが表示されます。

ここまでが EC2 の設定です。

次にメンテナンス画面表示用の S3 を第2のオリジンとして設定してください。またオリジンアクセス設定は推奨値である「 Origin access control settings (recommended) 」にしてください。さらに「 create new OAC 」を押下し OAC を作成するとそのままバケットポリシーをコピーできるので、「 S3 バケットアクセス許可に移動」からバケットポリシーを設定してください。

【注意！】

OAC 作成時にコピーできるバケットポリシーには List 権限が作成されない（検証時）ため、ご自分で List 権限を追加してください。
（ List 権限が無いと、うまくメンテナンス画面に遷移しませんでした。）

その後、S3 オリジンを作成してください。

次に S3 のビヘイビアも設定してください。
パスパターンは「 /maintenance/* 」、オリジンは dev-test-cloudfront-functions 、ビューワープロトコルポリシーを「 HTTP and HTTPS 」に設定し、後はデフォルトのまま作成します。

最後にメンテナンス画面を表示するための、カスタムエラーレスポンスを作成します。

504 エラーが生じた際に、S3 の /maintenance/maintenance.html を表示するように設定します。

Amazon CloudFront を活用したメンテナンス画面表示の検証

それでは実際に検証していきます。
繰り返しになりますが、現在 CloudFront ディストリビューションドメイン にアクセスすると、EC2 が正常に稼働しているため「 It works! 」が表示されます。

では EC2 を停止してみます。

この状態で再度 CloudFront ディストリビューションドメインにアクセスしてみると

S3 に格納されているメンテナンス画面に遷移しました。事前に設定しておくと、万が一 EC2 が停止してしまっても、このように自動的に遷移してくれることがわかりました。ちなみに、EC2 が停止してからメンテナンス画面に遷移するまでは、約 3 分ほどかかっています。

本筋とは関係ないですが、先述したとおり このメンテナンス画面は ChatfGPT に作成してもらったものです。「メンテナンス画面を表示するための HTML ファイルを作成して」というプロンプトだけでこれだけのクオリティで HTML ファイルを作成してくれるので、大変便利ですね。

Amazon CloudFront を使ってメンテナンス画面に切り替えてみた（まとめ）

本ブログでは Amazon CloudFront の設定のみでメンテナンス画面を表示させる方法をご紹介しました。メンテナンス画面を表示させる方法としては、他にも Route53 や ALB を使う方法や、Amazon CloudFront のフェイルオーバーを使う方法など様々あります。是非ご自分の環境にあった方法で、メンテナンス表示を実装してみてください。

お読みいただきありがとうございました。