SPAのメンテナンスページをCloudFront Functionsを使って実現する - Qiita

概要 複数のフロントエンド × 単一のバックエンドを持つSPA (Single Page Application)のメンテナンスモードを実装しました。 インフラとしてはAWSを使っています。 今回は諸々の事情でWAFにてメンテナンスレスポンスを返すのではなく、一段踏み込んだCloudFont Functions（以降CF2）でのメンテナンスレスポンス返却を行っています。 全体図 要件 複数のフロントエンドドメインがあるがそれら全てにおいて、メンテナンスモード中はユーザーにメンテナンス画面を表示したい 特定のIPからはメンテナンス中でも通常通り触れるようにしたい フロント実装手順 各々フロントエンドにてメンテナンスページとrouterを準備 ここらへんは好きなように準備 <template> <div class="maintenance__page"> <div class="mainte