ALBの固定レスポンスには最大1024文字のHTML・CSSを含められる

メンテナンスのため、一時的にWebサーバへのアクセスを止める必要が発生しました。その時間帯は、いわゆる「メンテナンスページ」「Sorryページ」を表示させる必要があります。ふと、 HTMLとかCSSで多少はデザインされたページを返したい と思いました。

今回はEC2インスタンスのフロントにあるALB単体での実現を試みました。

設定

ALBの固定レスポンス機能を利用します。

リスナーにルールの追加

リスナーのルールに対して設定を追加します。 HTTPとHTTPSがある場合は、それぞれにルールを追加する必要があります。

f:id:swx-watanabe:20200827115655p:plain

設定追加前のルール

以下のようにデフォルトアクションが１つ定義されていて、全てのトラフィックをターゲットグループに転送するようになっています。

f:id:swx-watanabe:20200827115939p:plain

ルールの挿入

+ ボタンをクリックします。

f:id:swx-watanabe:20200827120414p:plain

ルールの挿入 をクリックします。

f:id:swx-watanabe:20200827120620p:plain

IF/THENの入力

IF（すべてに一致）
- パスが*
THEN
- 固定レスポンスを返す
- レスポンスコード
  - 503
- Content-Type
  - text/html
- レスポンス本文

<html>
<head>
<meta charset="utf-8">
<title>Maintenance</title>
<style>
    html{
        margin: 0;
        padding: 0;
        text-align: center;
        height: 100%;
    }
    body{
        position: relative;
        height: 100%;
        background: #eee;
    }
    div{
        position: absolute;
        left: 50%;
        top: 30%;
        margin-left: -300px;
        width: 600px;
        border: 2px solid #666;
        padding: 64px 32px;
        box-sizing: border-box;
        background: #fff;
        text-align: center;
    }   
    .message{
        font-size: 34px;
        margin-bottom: 24px;
        font-weight: bold;
    }
    .date{
        color: #fff;
        padding: 8px;
        background: #cc0000;
        width: 90%;
        margin: 0 auto 16px;
    }
</style>
</head>

<body>
<div>
    <p class="message">ただいまメンテナンス中です</p>
    <p class="date">【メンテナンス日時】2020年12月12日 2:00～7:00</p>
    <p>ご利用の皆様にはご迷惑をおかけし、大変申し訳ございません。<br>
    メンテナンス終了までしばらくお待ちください。</p>
</div>
</body>