AWS ELBでメンテナンス(503)画面を表示する

f:id:jun9632:20210527103255p:plain

awsのelbだけで、メンテナンス画面を表示させる方法です。

elbのルートの条件は下記のようにしています。

f:id:jun9632:20210527103658p:plain

条件やレスポンスなど適宜調整してください。

パス

レスポンスコード

Content-Type

text/html

レスポンス本文

<!DOCTYPE html>
<html>
<head>
  <title>メンテナンス作業中です。(503)</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta charset="UTF-8" />
  <style>
    .page {
        margin-top: 60px;
    }
    .tit_box.center {
      text-align: center;
    }
    .page .page_inner {
      max-width: 640px;
      text-align: center;
      margin: 0 auto;
    }
  </style>
</head>
<article class="page">

  <div class="tit_box center">
    <img src="https://placehold.jp/60/666666/ffffff/300x300.png?text=503%0A" >
  </div>
  <div class="tit_box center">
    <h1 class="page-title">503 Service Unavailable<br>ただいま、メンテナンス作業中です</h1>
  </div>

  <div class="page_inner">
    <p>
      メンテナンス作業中のため、ただいまサービスをご利用頂くことができません。<br>
      ご迷惑をおかけして大変申し訳ありませんが、終了までしばらくおまちください。<br>
    </p>
  </div>
</article>

<body>
</body>
</html>

上記のようなルートを作っておき、必要な時に、条件の一番先頭に移動すると、いつでもメンテナンス画面に変更することができます。

f:id:jun9632:20210527103926p:plain