SPA+AWSでメンテナンスモードをつくる

概要

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タブから値を変更できるので結果よかったです。

結果