Zenn
🔧

メンテナンスページのHTMLの書き方

2020/10/01に公開
CSS
HTML
tech

初出：https://qiita.com/studio15/items/3e5939bcf38d023fda16

Webサービスをメンテナンスモードに入れるためのサーバー設定の記事は数多くあるが、肝心の 「メンテナンス告知ページのHTMLをどう作るか」 という部分があまり語られないので、そのことを中心にまとめた。

前提：ウェブサーバーをメンテナンスモードにするには

メンテナンスページを除いた全てのページでHTTPステータスコード503を返すようにする。
正しくステータスコードを返さないと格好悪いことになってしまうので気をつける。

設定例は「Apache メンテナンス」とか「nginx メンテナンス」とかでググると山ほど出てくるので割愛。
AWSを利用している場合はALBやCloudFrontでメンテナンスページ（Sorry Page)の機能がIaaS側にあるのでそれを利用すると良い。
DNSレベルでサーバーを切り替えてメンテナンスページを表示する方法（僕は心の中で乙武法と呼んでいる）は、DNS切り替えのタイミングがきっちりしないというのと、切り替え先で503を返すなど手間なので、本当に緊急な時以外はあまり採用したくない。

メンテナンスページの作り方

メンテナンスページは複雑なことをしようと思うとトラブルのもとなので極力シンプルな実装を心がける。

1ファイルで完結させる
CSSや画像を別ファイルで用意するとApacheやnginxの設定がややこしくなるし、ALBのSorry Pageのような複数ファイルに対応していない場合に利用できないので、CSSはhead内に書くかインラインで、画像はbase64で埋め込み1ファイルにまとめる。
ログファイル的にも画像やCSSの200アクセスがなくなるので状況を把握しやすくなる（と思う）。
（一応faviconもbase64で埋め込むことが可能だが、IE11, Edgeでは表示されないようなので無理して入れることはない）

HTML5(プログレッシブ・エンハンスメント)
サービス自体がIE11を未だサポートしていたりする場合はメンテナンスページも対応せざるを得ないのでプログレッシブ・エンハンスメントで実装する。
ただ複雑なことをやるわけでもないので普通に書けばIE11でも正常に表示されるはず。

レスポンシブ
HTML一枚で全デバイスに対応する必要があるのでもちろんレスポンシブ。
スマホであれば幅はママでいいが、さすがにPCで幅の制限をかけないと少し間抜けになってしまうので幅640pxくらいで狭めで。

日本語UTF-8対応
今どきめったなことでは文字化けなんてしないけれども、お行儀よくlangとcharsetの指定はしたい。

Analyticsは導入すべきか
判断が分かれるかもしれないが、個人的には意図的に起こしている503ページのアクセスは統計に入れたくないというのと、メンテナンス中にプライバシーポリシーページが見られないことやGDPRのことを考えると入れなくて良いと思う。

連絡手段を提示する
メンテナンスに入っているということは問い合わせフォームも見られないため、ユーザーからすると連絡手段がわからなくなってしまう。
メンテナンス中にユーザーから代表電話に問い合わせが入ったという話も聞くので、電話に対応できるリソースがないのであればメールアドレスなりGoogleフォームなりを明記したほうが良い。

メンテナンス期間を明記する
Backlogの503ページにTwitterが埋め込まれていて、メンテナンス状況がリアルタイムで把握できてなかなかいいやり方だなと思ったので、定期メンテナンスなどが必要な場合は検討したい。
ただ基本的に意図的に入れたメンテナンスであればシンプルに終了時刻を目立たせてあげる方がユーザーにはわかりやすいと思うので、Twitterは単にリンクなどで見せるだけでも良いような気もする。

HTMLの例

簡易的な表示確認しかしていないので擬似コード程度のものとして見てほしい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ただいまメンテナンス中です | EXAMPLE.COM</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #eee;
  }
  #conainer {
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
    background: #fff;
  }
  h1 {
    font-size: 2em;
  }
  .warn {
    padding: 1em;
    background: #ff7;
  }
  .note {
    font-size: 0.8em;
  }
  #footer {
    text-align: center;
  }
</style>
</head>

<body>
  <div id="container">
    <img src="data:image/png;base64,略" alt="EXAMPLE.COM">
    <h1>ただいまメンテナンス中です</h1>
    <p>
      システムアップデートのためサービスを停止しています。<br>
      ユーザーの皆様にはご不便をおかけしますが、メンテナンス終了まで今しばらくお待ち下さい。<br>
    </p>
    <h2>メンテナンス期間</h2>
    <p class="warn">
        2020年1月1日（水） 00:00 〜 <strong>12月31日（木） 23:59</strong><br>
    </p>
    <p class="note">
      実施時間は前後する可能性があります。<br>
      最新の情報は<a href="https://twitter.com/{username}">Twitter</a>にて更新しています。<br>
    </p>
    <h2>
     お問い合わせ
    </h2>
    <p>
      メンテナンスに関するお問い合わせは<a href="mailto:maintenance@example.com">maintenance@example.com</a>までお願いします。
    </p>
    <hr>
    <div id="footer">
      &copy; example.com
    </div>
  </div>
</body>
</html>

Discussion