メンテナンスページを表示させる構成について（AWS CloudFront＋S3）

Question

前提

Vue.jsによるSPAを作成し、AWSのCloudFront+S3にて配信を行っています。
またSPAからのAPI実行は CloudFront-->APIGateway-->Lambda という流れとなっています。

実現したいこと

アプリケーションの更新時にメンテナンスページが表示されるようにしたい。

検討したこと

調べてみると以下のような対応があるようでした

• ALBを使用する --> 今回のオリジンはS3とAPIGatewayなので、この方法ではできなさそう
• CloudFrontの503エラーページとして設定 --> Lambda実行にて503を返すようにしたとしても、S3からはコンテンツを配信してしまう

上記２つは自分の要件にははまらなかったため、他に良い方法があったらご教示くださいますようお願いいたします。

Answer 1

AWS WAFを使ってはどうでしょう？
下記のページはCloudFrontではなくALBとWAFを連携させていますが、CloudFrontもWAFと連携させることができるのでうまくできそうな気はします。
CloudFront配下のWEBページをAWS WAFを使ってメンテナンスページを表示する

メンテンナンス→WAFでアクセスをブロックし、カスタムエラーページでメンテナンス中の旨表示する
メンテナンスから戻す→WAFのアクセスブロックを解除

みたいなのをイメージしました。

参考
CloudFront カスタムエラーページでの AWS WAF の使用
特定の HTTP ステータスコードのカスタムエラーページを作成する

Comments

[plasticgrammer]

回答ありがとうございました。
該当ページは目を通した記憶がありますが、構成でALBがでてきた時点で諦めていました。
内容を理解し、検証してみます。

[yu_1985]

重要なのはALBではなくWAFを使うことで、出てきた記事は単にWAFの連携先をALBにしてるだけですね。
検証結果は自分も気になるのでぜひ確かめてみてください。

[plasticgrammer]

挙げて頂いたサイトの設定を参考にして、CloudFrontからの遷移前にWAFによる制御を挟むことができました。ありがとうございます。

対応としては以下２点の対応を行いました。
- WAFで既定IP以外は拒否する設定
- CloudFrontにて拒否された際の403エラーページを設定

既にページを表示していて何かアクションをした場合には、API呼出で403エラーとなるため該当ページに遷移はしませんが、ほぼ期待通りの挙動になりました。