2024/08/05更新
2024年8月現在、WAFのカスタムレスポンスを使ってresponseを返し、axiosでエラー処理をした場合、catchしたレスポンスの中身を取ることができない事象が発生しており、解決できない状況です。
SPA(Single Page Application)構成でメンテナンスモードを構築する場合、CloudFront Functionを使った方法も有効ですので以下の記事もご参照ください。
概要
SPA(Single Page Application)において、メンテナンスモードを作ります。SPAでは長期間リロード処理が発生しないため、フロントエンド側のWAFにメンテナンスモードを設定しても、バックエンド側の通信が続いてしまいます。そのため、バックエンド側にメンテナンスモードを設定します。
要点
- バックエンド側でメンテナンス判定をします
- 必ず実行されるAPI（認証チェックなど）に仕込みます
- プリフライトを許可します。
- CORSエラーになるのでカスタムヘッダーを設定します。
構成
シンプルなSPA環境です。
WAFの設定
バックエンド側のWAFのルールを追加します。
必ず通るAPIに仕込みます
URI Pathを使って判定します。
プリフライトを許可します
NOTステートメントにし、HTTP Method OPTIONS以外を判定します。
プリフライトは必ずHTTPステータスがOK(200)で返す必要があるため、OPTIONSの通信はバックエンドまで到達するようにします。
CORSエラーを回避します。
通常の通信はバックエンド側でCORS処理をしますが、WAFで返す場合はヘッダーを付ける必要があります。Access-Control-Allow-Originを設定し許可しましょう。
カスタムボディーに好きなデータを入れる
今回はCustom Response Bodyにメンテナンス開始時間とメンテナンス終了時間をいれています。これでフロント側で503エラーを検知したときにリダイレクトするページ於いて、カスタムボディーに設定された値を表示しています。
ここで、Custome Response Headerに何かしら値を設定し、取得することもできますが、私の環境に置いて、axiosで以下のようにヘッダーを取得したときにheadersが取得できませんでした。カスタムレスポンスヘッダーは諦めてBodyにしました。
必ず通るAPI()
.then(() => {
next({ name: 'INDEX' })
})
.catch((error) => {
// error.response.headersに何もデータが入らない
if (error.response.status == 503) {
next({ name: 'MAINTENANCE-INDEX', query: { start: error.response.data?.maintenance_start, end: error.response.data?.maintenance_end } })
}
next()
})
カスタムレスポンスボディーのほうが、Allow -> Block と戻しても設定値が消えないし、AWS WAFのWEBコンソールタブのCustom response bodiesタブから値を変更できるので結果よかったです。
結果
