📝

Azure Storage Accountにてメンテナンス画面を表示させる方法

jemiya

2024/06/28に公開

Azure

tech

はじめに

システムを運用保守していくうえでどうしてもメンテナンスを実施しなければならないこともあるかと思います。今回はAzure Storage Accountにてメンテナンス画面を表示させる方法についてお伝えします。意外と情報がなさそうだったので、記事にしました。

前提①

メンテナンス用のStorage AccountとApplication GatewayかFrontDoorを用意する必要があります。今回はApplication Gatewayを使用します。メンテナンス用のStorage Accountを作成してない場合は作成しましょう。

前提②

証明書があり、Application Gatewayのリスナーの設定をしていること。していない場合は下記の記事をご参照ください。証明書はAppService証明書を購入する形で大丈夫です。

前提③

IP制限の設定をする場合、WAFのカスタムルールを作成する必要があります。
※設定済みの場合、IP制限を設定しない場合は手順を無視して構いません。

Azure Portalの画面上部の検索欄で「WAF」と入力し、「WAF」をクリックする。
対象のWAFをクリックする。（スクショは割愛します）
サイドメニューの[カスタムルール]をクリックする。
[カスタムルールの追加]をクリックする。
下記の情報を入力し、[追加]をクリックする。

カスタムルール
ルールを有効にする：有効
ルールの種類：一致
優先度
一致の種類：IPアドレス
演算：含まれる
IPアドレスまたは範囲：ここで対象のIPアドレスを入力する
結果：トラフィックを拒否する

[保存]をクリックする。

前提④

メンテナンス用のHTMLファイルを作成しておきます。これはStorage Accountのコンテナーに格納することになります。メンテナンス用のHTMLファイル作成はChatGPTとかにお任せして良いと思いますし、フォントや色の好みもあると思いますのでそこは個人の好みとなりますww

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>タイトル</title>
</head>

<body>
    <div class="maintenance">
        <p class="site">タイトル</p>
        <h1>ただいまメンテナンス中です</h1>
        <p class="title">メンテナンス時間</p>
        <p class="time">日時</p>
        <p class="note">ご利用の皆様にはご迷惑をおかけし、申し訳ございません。<br>メンテナンス終了までしばらくお待ちください。</p>
    </div>
    <style>
        body {
            font-family: -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
            font-size: 100%;
        }
        
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        .maintenance {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .maintenance .site {
            color: #005f3c;
            font-weight: bold;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
        
        h1 {
            margin-bottom: 2rem;
        }
        
        .title {
            font-weight: bold;
            margin-bottom: -1.2rem;
            background-color: #000;
            color: #fff;
            padding: .25rem 2rem;
            position: relative;
            z-index: 2;
            display: inline-block;
        }
        
        .time {
            color: #D10008;
            font-weight: bold;
            font-size: 1.8rem;
            border: 1px solid #000;
            padding: 3rem;
            margin: 0 1rem 1rem;
        }
        
        p.note {
            text-align: center;
            line-height: 1.8rem;
        }
    </style>

</body>

</html>

Storage Accountのスペック&設定

パフォーマンス：Standard
冗長性：ゾーン冗長ストレージ（冗長性の種類はローカル、geo冗長ストレージ、geoゾーン冗長ストレージ）
REST API 操作の安全な転送を必須にする：有効
個々のコンテナーでの匿名アクセスの有効化を許可する：無効
ストレージアカウントキーへのアクセスを有効にする：有効
Azure portal で Microsoft Entra 認可を既定にする：無効
TLS の最小バージョン：バージョン1.2
コピー操作の許可されるスコープ (プレビュー)：任意のストレージアカウントから
階層型名前空間を有効にする：無効
SFTP を有効にする：無効
ネットワークファイルシステム v3 を有効にする：無効
クロステナントレプリケーションを許可する：無効
アクセス層：ホット
ネットワークアクセス：すべてのネットワークからのパブリックアクセスを有効にする
ルーティングの優先順位：Microsoftネットワークルーティング
コンテナーのポイントインタイムリストアを有効にする：無効
BLOB の論理的な削除を有効にする：有効（削除された BLOB を保持する日数：7）
コンテナーの論理的な削除を有効にする：有効（削除されたコンテナーを保持する日数：7）
ファイル共有の論理的な削除を有効にする：有効（削除されたファイル共有を保持する日数：7）
BLOB のバージョン管理を有効にする：無効
BLOB の変更フィードを有効にする：無効
バージョンレベルの不変性のサポートを有効にする：無効
暗号化の種類：Microsoft マネージドキー (MMK)
カスタマーマネージドキーのサポートを有効にする：BLOBとファイルのみ
インフラストラクチャ暗号化を有効にする：有効
タグ：未入力

手順①

※メンテナンス日時を編集する際に実施する手順です。必要がない場合は手順②へスキップ。

Azure Portalに入る。
https://portal.azure.com/
Azure Portalの画面上部の検索欄で「ストレージアカウント」と入力し、「ストレージアカウント」をクリックする。
メンテナンス用のStorage Accountをクリックする。（スクショは割愛します）
サイドメニューの[コンテナー]をクリックする。
メンテナンス用のHTMLファイルを格納したコンテナーをクリックする。「maintenance.html」と命名しました。（スクショは割愛します）
「maintenance.html」をクリックする。
[編集]をクリックする。
メンテナンス日時を修正し、[保存]をクリックする。

<p class="title">メンテナンス時間</p>
        <p class="time">日時</p>

下記のURLを別タブ等開き、メンテナンス日時が変わっていることを確認する。
https://<ストレージアカウント名>.blob.core.windows.net/<コンテナー名>/maintenance.html

手順②

Azure Portalに入る。
https://portal.azure.com/
Azure Portalの画面上部の検索欄で「アプリケーションゲートウェイ」と入力し、「アプリケーションゲートウェイ」をクリックする。
対象のアプリケーションゲートウェイのリソースをクリックする。（スクショは割愛します）
サイドメニューの[リスナー]をクリックする。
プロトコル"HTTPS"、リスナー"443"のリスナーをクリックする。
下部へスクロールし、「禁止-403」のURLを下記に変更する。
https://<ストレージアカウント名>.blob.core.windows.net/<コンテナー名>/maintenance.html
[保存]をクリックする。
Azure Portalのホーム画面に戻る。
Azure Portalの画面上部の検索欄で「WAF」と入力し、「WAF」をクリックする。
対象のWAFをクリックする。（スクショは割愛します）
サイドメニューの[関連付けられたアプリケーションゲートウェイ]をクリックする。
[＋関連付けの追加]をクリックし、[HTTPリスナー]をクリックする。
対象のApplication Gateway（WAF v2 SKU）とリスナーを選択し、[追加]をクリックする。
IP制限をかけるため、VPN接続をする。
VPN接続をした後にサイトURLに接続し、本来のUIのサイトが表示されることを確認する。
VPN接続を解除した後にサイトURLに接続し、メンテナンス画面が表示されることを確認する。

その他

①別記事でメンテナンス画面解除方法を共有します。
②別記事でAzure FrontDoorでのメンテナンス画面の方法の記事を共有します。

ヘッドウォータース

株式会社ヘッドウォータースのテックブログです。生成AI、LLM、Azureのサービスや資格、IoT、XR系などData&AIとApp modernizeに関して幅広く投稿します！

はじめに

前提①

前提②

前提③

前提④

Storage Accountのスペック&設定

手順①

手順②

その他

Discussion