メンテナンス画像への切り替えについて

サイトをリニューアルする際、テスト環境から公開環境へ最新コンテンツを移行するまでの間、公開環境をメンテナンス状態にしておく必要があります。
今回はメンテナンス対応時の大まかな手順について共有します。

1.メンテナンス画像を作成

まずメンテナンス画像を用意します。
①会社のロゴ、②メンテナンス時間、③告知文 を記載します。
自分は万が一メンテナンス時間内に作業が完了しなかった時を考慮して「時間が前後する場合も～」といった文言も添えてます。
また、メンテナンス中はフォームからのお問い合わせが出来ないので電話番号も載せておくと親切かと思います。

2.メンテナンスページを作成

メンテナンス告知用のページ「maintenance.html」を作成します。

<style>
.maintenance img {
  display: block;
  margin: 0 auto;
}
</style>
<div class="maintenance">
  <img src="" />
</div>

メンテナンス画像を外部ツールでBase64エンコードした後、上記imgタグのsrc属性に貼付けます。これで画像の元データは不要となります。

<style>
.maintenance img {
　　display: block;
　　margin: 0 auto;
}
</style>
<div class="maintenance">
　　<img src="data:image/png;base64,iVBORw0KGgoAAAANS******" />
</div>

3.「.htaccess」の編集

ルートディレクトリ直下の.htaccessを編集して、「maintenance.html以外のページにアクセスがあったらmaintenance.htmlへリダイレクトする」様に設定します。

#メンテナンス対応
ErrorDocument 503 /maintenance.html
 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/maintenance.html
    RewriteRule ^.*$ - [R=503,L]
</IfModule>

4.特定のIPアドレスからのアクセスを許可する

いざメンテナンス状態になった時に、制作会社側とクライアント側で事前に公開環境の確認をする必要があります。その場合特定のIPアドレスからのアクセスを許可する様にhtaccessに以下を記載します。

RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX

「XXX.XX.XXX.XXX」はアクセスを許可したいIPになります。
自分のIPアドレスはここから確認出来ます。

最終的に.htaccessは以下のようになります。

#メンテナンス対応
ErrorDocument 503 /maintenance.html
 
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/maintenance.html
    RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX
    RewriteCond %{REMOTE_ADDR} !=XXX.XX.XXX.XXX
    RewriteRule ^.*$ - [R=503,L]
</IfModule>
)

.htaccessの詳細については下記サイトの解説が参考になるかと思います。