経験知ロゴ

Nginxでお手軽にメンテナンス画面を表示する方法

※本ページはプロモーションが含まれています

メンテナンス画面
PHPやMySQLのアップデート時にNginxでメンテナンス画面を簡単に表示させる方法。

「Nginxでrestart, reloadをすることなくメンテナンス画面に切り替える – Qiita」を参考に、503エラーを返すようにしました。

メンテナンス画面の作成

/var/www/maintenance/maintenance.html

上記のようにメンテナンス画面用のHTMLを作成する。
「maintenance」ディレクトリがない場合は

$ sudo mkdir /var/www/maintenance

maintenance.htmlを作成する。

$ sudo vi /var/www/maintenance/maintenance.html

「maintenance.html」内のHTMLをこんな感じで作成。titleと時間を自分用に変更する。

<!DOCTYPE html>
<html>
    <head>
        <title>メンテナンス中 | サイト名</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
        body { text-align: center; padding: 150px; }
        h1 { font-size: 50px; }
        body { font: 20px color: #333; }
        article { display: block; text-align: left; width: 650px; margin: 0 auto; }
        a { color: #dc8100; text-decoration: none; }
        a:hover { color: #333; text-decoration: none; }
</style>
    </head>
    <body>
    <article>
        <h1>メンテナンス中</h1>
        <p>只今メンテナンス中です。16時30分には終了します。</p>
    </article>
    </body>
</html>

Nginxの設定

「default.conf」を編集。

$ sudo vi /etc/nginx/conf.d/default.conf

既存の「server」内に追加。

server {
…
   set $maintenance false;
    if (-e /var/tmp/do_maintenance) {
        set $maintenance true;
    }
    if ($uri ~ "^/maintenance/") {
        set $maintenance false;
    }

    if ($remote_addr = 自分のIPアドレス) {
        set $maintenance false;
    }
    error_page 503 /maintenance/maintenance.html;
    location /maintenance/ {
        root /var/www;
    }
    if ($maintenance = true) {
        return 503;
    }
…
}

「/var/tmp/do_maintenance」ファイルがある場合は503エラーを返し、「/var/www/maintenance/maintenance.html」を表示させている。

「自分のIPアドレス」にIPアドレスを入れると、そのIPからのアクセスはメンテナンス画面でなく、通常通りに表示させることができる。

サーバーを再起動。

$ sudo service nginx restart

これで準備完了。

メンテナンス画面の出し方、戻し方

「/var/tmp/do_maintenance」を作成する。

$ sudo touch /var/tmp/do_maintenance

これでメンテナンス画面に変わる。

メンテナンス画面を終了させるには「/var/tmp/do_maintenance」を削除する。

$ sudo rm /var/tmp/do_maintenance

以上のファイルの作成、削除だけでメンテナンス画面の出し戻しができるようになった。

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから