WEBサイトリニューアル時にhtaccessで「メンテナンス中」ページを表示する方法

WEBサイトをリニューアル公開する際に、FTPソフトなどで旧データを削除して、新データをアップロード、もしくは上書きする方法は一般的だと思いますが、簡単な静的HTMLだけであれば大きな問題は無いと思いますが、システムが絡んでいたりする場合、公開する前に不具合が無いか本番サーバーでチェックしてから、公開したいという場合もあるのではないでしょうか。そんな時、チェックする間の数時間〜半日程度の間、WEBサイトを「メンテナンス中」と表記する方法が考えられます。

今回はhtaccessを使って、簡単に特定のIPアドレスからのアクセス以外は、メンテナンス中ページを表記する方法をお伝えいたします。

メンテナンス中ページを表示する仕組み

メンテナンス中ページを表示する仕組みを簡単にご説明します。メンテナンス中のファイルを表示するためのhtaccessファイルと、メンテナンス中の表示の内容を記述したhtmlページをmente.htmlなどの名前で作成して、ドキュメントルートにこの２つのファイルを設置します。

この方法は、分かりやすく言うとmente.html以外へのアクセスはすべてmente.htmlにリダイレクトさせるという方法ですが、正しくは「特定のIPアドレスからのアクセスを除く、mente.html以外のアクセス」は503エラーとなり、503エラー内容（エラードキュメント）をmente.htmlとして表示するという方法です。

メンテナンス中ページをHTMLで作成

まずはメンテナンス中ページをhtmlで作成します。mente.htmlなど適当なファイル名で作成します。1ファイルだけで完結するように、cssなどの装飾が必要な場合はhtml内にcssも記述しましょう。

数時間だけのためのページですが、訪問者が不快に思わないようにシンプルかつ丁寧な説明が必要ではないかと思います。
まずは訪問したサイトがどこのサイトなのか、間違って訪問したわけではないですよと伝えるため、サイト名やサイトのロゴ（旧サイトのロゴと新サイトのロゴが変わる場合は、その説明を入れてもいいかもしれません。）などは必須です。（ただし、画像の設置には注意が必要なので後ほど説明します）

そして「現在WEBサイトのリニューアル工事中です、しばらくお待ち下さい。」などの最低限の文章を入れます。より良い文章としてはリニューアルする理由なども添えると尚いいかもしれません。さらに、リニューアル作業がいつ終わるか目処がわかる場合は、いついつまでに終わる旨を記載するとベターだと思います。（もちろんサイトの特性上必要であれば、リニューアルの数日前からリニューアル日時を告知する必要があるでしょう。）
以下参考までにサンプル文章を記載します。

メンテナンス中ページへ遷移させるhtaccessの記述

htaccessの内容は以下です。

ErrorDocument 503 /mente.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !=/mente.html
RewriteCond %{REMOTE_ADDR} !=xx.xxx.xxx.xx
RewriteRule ^.*$ - [R=503,L]

冒頭に説明したとおり、このhtaccessファイルとさきほど作ったmente.htmlドキュメントルートに設置して、それ以外はリニューアル予定のHTML等のファイルを適宜アップすれば完成です。

特定のIPアドレスからのアクセスを除く

「RewriteCond %{REMOTE_ADDR} !=xx.xxx.xxx.xx」の部分の、「xxx」にWEBサイトをチェックされる方のIPアドレスを記載する事で、特定のIPアドレスからのアクセスの場合のみ、mente.htmlではなく、通常通りリニューアル後のhtmlが表示されますので、リニューアルサイトに間違いやエラーが無いかしっかりチェックしましょう！

チェックが終わったら、htaccessファイルとmente.htmlを削除すれば、リニューアルの完成です！

メンテナンス中ページに画像を使う場合の注意点

先程少し触れましたが、メンテナンス中ページにロゴ画像など「画像」を使う場合は、注意が必要です。

今回の方法は前述したとおり、mente.html以外のアクセスはエラーとなりリダイレクトされるのですが、それは画像ファイルも例外ではありません。ですので、画像ファイルをhtml内に入れる場合は、単純に画像ファイルへのパスを記述するのではなく、base64エンコードして「データURIスキーム（data URI scheme）」としてhtml内に記述しましょう。

データURIスキーム（data URI scheme）とは「外部データ無しにウェブページにデータを埋めこむためのURIスキーム」です。簡単に言うと外部画像ファイルを参照するのではなく、html内に埋め込んでしまうという事です。データURIスキームを使用すれば内部データとして画像を埋め込むことができるので1つのHTTPリクエストで済むという事です。

「base64 画像 変換」などで検索すると、Base64変換サービスサイトが出てくると思うので、そこで変換するのが簡単だと思います。もしくはMacの場合はデスクトップにエンコードしたい画像を保存し、「ターミナル」で「base64 hoge.jpg」とコマンドを実行すればOKです（hoge.jpgは任意のファイル名）。変換するととても長いですが「data:image/jpeg;base64,/9j/2wCEAAEBAQEBAQEBAQE…（中略）」というような文字列に変換されますので、これを通常どおりimgタグのsrcの値として入れれば画像を埋め込む事ができます。<img src=”data:image/jpeg;base64,/9j/2wCEAAEBAQE・・・” alt=””>

まとめ

WEBサイトのリニューアル時は、できるだけトラブルの起こらないように準備が必要です。メンテナンス中画面を作る事で、少しはスムーズな移行の手助けとなるのではないでしょうか。