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

記事タイトルとURLをコピーする

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

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

設定

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

リスナーにルールの追加

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

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

設定追加前のルール

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

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>

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

レスポンス本文の最大文字数は1024です。 日本語でも、空白でも、改行でも、全て1文字とカウントされます。 もし、1025文字以上を使いたい場合は外部リンクをするしかないと思います。

なお、私はデザインセンスが壊滅的ため、上記のレスポンス本文は下記ページのものを参考にさせていただきました。(1024文字を超えないように少し削り、1002文字にしました)

www.magazine.makeshop.jp

設定の保存

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

設定が上手くいくと、以下のような表示になります。

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

動作確認

ブラウザでアクセスしてみましょう。

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

私の主観かもしれませんが、ただのテキストだけよりは、ユーザーフレンドリーな感じがします。

メンテナンス後

ルールを削除すれば元どおりになります。

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

まとめ

ALBの固定レスポンス機能を使えば、1024文字以内のレスポンスを返すことができます。1024文字以内なら、その中にHTMLやCSSを含めることも可能なので、単純なテキスト以上のデザインのページも可能です。

渡辺 信秀(記事一覧)

2017年入社 / 地味な内容を丁寧に書きたい