ウェブサイトを「正しく」メンテナンス状態にする

ウェブサイトを「正しく」メンテナンス状態にするWeb開発者の備忘録ウェブサイトを一時的にアクセスできなくし、その間入れ替えなど行う場合ですが。
スマートにメンテナンス状態にする方が何かとよろしいのです。
それについて語ってみようかと思います。

メンテナンス状態の定義

(1)一般からのアクセスでは「メンテナンス中です」と表示させる。
 →503 service temporarily unable を返して、メンテナンスの理由や復旧予定などきちんと表示する
(2)メンテナンスを行う側からは、通常通り表示させる。
 →メンテナンスを行う側のIPアドレスが固定である場合に、503以外ののレスポンスを返す

という事を想定しています。

503にする理由

ズバリ、検索エンジン対策(SEO対策)です。
絶対に、301,302,403,404などにしてはいけません。
メンテ状態の時にクロールされたら、変な状態でインデックスされてしまいます。
※一度や二度くらいではならないかもしれませんが、万全は期したいです

やり方

.htaccessファイル(httpd.conf)

(1)httpd前提ですが。。.htaccessファイル(httpd.conf)を、次の様に作って下さい。

ErrorDocument 503 /maintenance.html ←注1
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !=/maintenance.html ←注1
RewriteCond %{REMOTE_ADDR} !=111.222.333.444 ←注2
RewriteRule ^.*$ - [R=503,L]
</IfModule>
<IfModule mod_headers.c>
Header set Retry-After "Fri, 26 Mar 2015 17:00:00 JST" ←注3
</IfModule>

注1 : メンテ表示を示すHTMLファイルを指すURLです。
注2 : メンテナンスする人のIPアドレスです。固定IPを持っている事が前提。
無い人はProxyサーバなど固定IPを持っている人に泣きついて下さい。
注3 : Googleさんにいつ復旧するか伝えるおまじないです。復旧予定日時を入れておきましょう

メンテナンスhtmlファイルの作成

まずは普通にHTMLを作りましょう。
でも、CSSや画像を使ってある程度見栄えを良くしたくなるのが人情というもの。
でも、上の .htaccess で示した通り、maintenance.html ファイル以外のアクセスはダメ。
※外部CSS,画像ファイルはRewriteRule対象外にしてもよいですがちょっと面倒

ということで、やる事は
・外部CSSの中身を、全部 <style type=”text/css”>中身</style>で maintenance.html 内部に記述してしまう。
・画像は、<img src=”data:image/jpeg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx” />
 のように記述してしまう。

です。

画像については、画像ファイルを base64エンコードしたものを、xxxxxxxxxxx に書くわけですが。
自前で作ろうとするとちょっと面倒なので、「画像 base64」あたりでググってウェブサービスを使って下さい。

というかんじで、無事メンテナンスを乗り切って下さい。