【Webサイト】メンテナンス画面の設定方法

(※Wordpressでサイトを運営していた時期の記事です。)

Webサイトを運営していると、更新がしたいときなど何かの都合でサイトを一時閉鎖したいような場面に出くわすかと思います。 例えばクラッキングされてしまって一時閉鎖する場合など…。(参考:クラッキングされたWebサイトの応急処置をしました) この記事ではメンテンナンス画面のサンプルコードと.htaccessへhttpステータス503を設定する方法を紹介します。

メンテナンス画面の必要性


ユーザーに対する案内

メンテナンス中の様子をユーザーに丸見えにしておくのはリスクが高いです。 エラーメッセージなどわけのわからない文字列が表示されている状態を見せれば「怪しいサイトに接続してしまった」と勘違いして、せっかく検索エンジンから訪問したユーザーは離れていってしまうでしょう。 奇怪なエラーメッセージの代わりに「メンテンナンス終了時刻は〇時を予定しております。」という表示を見ればアクセスしてしまったことを後悔することなく安心して次の行動に移れるでしょう。再度検索エンジンであなたのサイトを見かけた際にも、抵抗なくアクセスしてくれるはずです。

検索エンジンに対する案内

怪しむのはユーザーだけではなく検索エンジン側も同じです。 Googleには「クローラー」と呼ばれるWebサイトを周回して検索結果の表示順位を決めるロボットが存在します。 クローラーはユーザーの悩みを解決できる有益な記事を「良い記事」として評価します。ユーザーも読み取れないようなエラーメッセージが表示された記事の評価は下がっていくでしょう。 そうならないためにも「このサイトは一時閉鎖中です」という案内をクローラーに対しても示す必要があります。

メンテナンス画面を作ろう


まずはユーザーに対して一時閉鎖中であることを示すためのhtmlファイルを作ります。 完成イメージはこんな感じ。 web1

私一人で作業するので見切り発車でテキトーに作ってしまいました。 フロントエンド系(Webサイトやアプリの画面を作る仕事)の実務経験は乏しいのでご容赦ください。

複数人で作ったり、もっとこだわりを持った画面にしたい場合は設計が重要になります。 Adobe XDが非常に便利らしいですね。コーディング不要で直観的に画面をデザインできるらしく (参考:Adobe XDでWebデザインをしよう!画面作成からページ推移までの手順を紹介 | Webクリエイターボックス) デザインしたものを専用ソフトを入れなくても複数人で共有できるのは魅力的だと思います。 (参考:チームの効率を劇的アップ Adobe XDで簡単にアプリ/Webサイトのプロトタイプを作成しよう - アールズ株式会社)

さてポンコツエンジニアが書いたコードを貼っておきます。 旦那さんからの「画面系はCodepenが見やすい」との助言を受けて、今回はCrayonではなくCodepenを使います。


画像やCSSを読み込みたい

<link>や<img>タグを指定する時に絶対パスで指定しないと読み込んでもらえませんでした。 この後紹介する.htaccessでのリダイレクト対象除外もしていたのですが、相対パスだとどこに画像があるのかわからないみたいです。

検索エンジンに一時閉鎖を伝えよう


ユーザーへの案内は完了しました。次はクローラーに向けて案内します。 .htaccessにコードを書き込み、httpステータスを正常値の200番台から「503」へ変更することで実現可能です。 (※httpステータスについてはhttpステータスコードの確認方法 | trogで解説しています。) メンテナンスが終わった時のことも考えて既存の.htaccessはバックアップで残しておきましょう。

.htaccessに書く内容

.htaccess
ErrorDocument 503 /maintenance.html
  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/maintenance.html
    RewriteCond %{REQUEST_URI} !=/maintenance.css
    RewriteCond %{REQUEST_URI} !=/161738.png
    RewriteCond %{REQUEST_URI} !=/reset.css
    #RewriteCond %{REMOTE_ADDR} !=192.168.0.4
    RewriteRule ^.*$ - [R=503,L]
  </IfModule>
  <IfModule mod_headers.c>
    Header set Retry-After "Sun, 20 Jun 2019 6:00:00 GMT"
  </IfModule>

ルートディレクトリの直下に.htaccess・maintenance.html・maintenance.css・(作業員が頭を下げている画像).png・reset.cssを設置した想定です。 .htaccessをルートディレクトリの直下に置けばサイトのどのURLにアクセスされたとしてもmaintenance.htmlを表示して503エラーを返します。maintenance.htmlはどこに置いても動きます、.htaccessで正しくパスを指定してください。よくわからない方は全て直下に置いてください。 ブラウザから要素の検証(F12)→Networkで503が返却されていれば成功です。

web2

詳しくはhttpステータスコードの確認方法 | trogで解説しています。

RewriteCond %{REQUEST_URI}!= とは

「RewriteCond %{REQUEST_URI}!=/」でリダイレクト(転送)対象から除外したいファイルを指定できます。こうすることで503エラーを返しても作成したmaintenance.htmlなどはユーザーに表示できるようになります。

RewriteCond %{REMOTE_ADDR} != とは

また「RewriteCond %{REMOTE_ADDR} !=」で特定のIPアドレスのみアクセスを許可することができます。自分の端末のIPはコマンドプロンプトやターミナルからご確認ください。 (参考:Windows 7 パソコン (クライアント)側IPアドレス確認手順|プロバイダ ASAHIネット) 転送することなくありのままのWebサイトの状態を、特別に閲覧できる端末を指定できると思ってください。管理者の端末まで503で転送されるとメンテナンス作業に支障が出ますからね。

メンテナンス終了時間をクローラーに伝える

おまけですが「Header set Retry-After "Sun, 20 Jun 2019 6:00:00 GMT"」でクローラーに対して「2019/1/20 日曜のAM6時までメンテナンスします」と伝えることができます。その間クローラーが空気を読んで巡回して来なくなります。つけなくても問題ありません。

.htaccess内でコメントがつけたい時には#を使いましょう。 無事メンテナンスが終了したら.htaccessを元の状態に戻せば通常運転再開できます。

まとめ


あらかじめメンテナンス画面を用意しておけば突然閉鎖したくなった時にも更新作業に集中できますね。 フロントエンド苦手な私は良いhtmlの勉強になりました。