LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログです。

ALB固定レスポンスを利用してメンテナンス画面を表示する

Webエンジニアの森脇です。ALBでの固定レスポンスを利用して、メンテンナンスページを表示する際にいくつか考慮した点について紹介します。

ALBでの固定レスポンスとは

ALBの固定レスポンスを利用することで、リクエストをWebサーバへ転送することなくALB自体から任意レスポンスコードとHTMLを返却できます。サイトのメンテナンス時には、レスポンスコード 503を返すと共に、以下のようなページを表示することがALBだけで完結できます。

f:id:lcl-engineer:20181115144510p:plain

設定手順

具体的な設定手順は、以下の記事を参考にさせていただきましたので、割愛します。

dev.classmethod.jp

HTMLについて

画像/CSSの配置

ALBで固定レスポンスを利用する場合は、Webサーバへはリクエストが到達しないため、メンテナンスページで画像やCSSを参照する場合はS3等へ配置する必要があります。

デバイス判定

バス比較なびではデバイスごとに異なるHTML/CSSを返していますが、ALBの固定レスポンスでは、デバイスを判定して異なるHTML/CSSを返すことができません。デバイスごとに見た目を最適化したい場合は、レスポンシブウェブデザインにする必要があります。

文字数制限

固定レスポンスで登録するHTMLの文字数は1024文字以内に収める必要があります。ある程度の見た目の画面を作る場合には、この制約が結構厳しく、以下の対策をしました。

  • class名を短く
  • CSS/画像のURLに、短縮URLを利用
  • 不要な改行・スペースを除去

事前確認

Pathにダミーのパスを設定しておくことで、事前に固定レスポンスで表示されるページを確認できます。全ページを対象にする場合はPathを「*」へ変更します。

f:id:lcl-engineer:20181115162048p:plain

まとめ

ALBの固定レスポンスを利用することで、メンテナンスページの表示が非常に簡単になりました。HTMLの文字数制限が緩和されれば、更に容易になるので、今後に期待します。