はじめに
CloudFront経由でS3上の静的ファイルを配信し、バックエンドをECS Fargateで動かしている構成において、何らかの障害が発生した際にエンドユーザーへメンテナンスページ（Sorryページ）を表示したい場合の方法についてまとめます。
※ 本記事は個人的に調べた内容をもとにまとめたものです。
実際の環境や仕様によっては動作しない場合や設定方法が異なる可能性もありますので、参考情報としてご覧ください。
書こうと思ったきっかけ
フロントエンドがCloudFront + S3、バックエンドがFargateという構成で運用中に、障害時にユーザー体験を損なわないための対策が必要だと感じ、メンテナンスページの表示方法を整理しておこうと思いました。
方法：CloudFrontのカスタムエラーページ機能を活用（※あくまで個人調べ）
1. S3にメンテナンスページをアップロード
- ファイル名：
maintenance.html - 可能であればCSSや画像も含めてデザインを整える
2. CloudFrontの設定を変更
-
CloudFrontの「Error Pages」から「カスタムエラーレスポンス」を作成
- HTTP Error Code：503
- Response Page Path：
/maintenance.html - HTTP Response Code：200
3. オプション：オリジングループでフェイルオーバー構成
- オリジンA：通常のS3 + バックエンド連携
- オリジンB：メンテナンスページ専用のS3バケット
- CloudFrontのオリジングループで、オリジンAがヘルスチェック失敗時にオリジンBへ切替
4. 切り替えタイミング
- 手動運用：通常index.htmlを
maintenance.htmlへ一時差し替え - 自動化運用：Lambda@EdgeやCloudFront FunctionsでCookieやヘッダーを見て表示分岐
5. その他の注意点
- CloudFrontキャッシュの影響を避けるため、切り替え時にキャッシュ無効化（Invalidation）を行う
参考文献
まとめ
| 方法 | 設置場所 | 特徴 |
|---|---|---|
| CloudFront + カスタムエラーページ | S3にmaintenance.html
|
簡単・高可用・即時反映 |
| CloudFront オリジングループ | S3にメンテナンス専用パス | 自動切替可・柔軟性高い |
まずはS3にmaintenance.htmlを用意し、CloudFrontで503エラー時に差し替え表示させる方法が、コストや手間の面でもっとも現実的だと思います...！