【Heroku】メンテナンス画面を独自にカスタマイズする方法

こんにちは、okutani(@okutani_t)です。本記事では、「Herokuのメンテナンス画面を独自にカスタマイズする」方法について解説しています。

背景として、私が運営しているメッセージアプリの「チョコボックス(Chocobox)」に独自のメンテナンス画面を設置したいと思い、本記事に備忘録的に載せてあります。

Herokuではデフォルトでメンテナンス画面が用意されていますが、殺風景かつ英語なので、今回HTMLファイルを作成して設置してみました。

以下はHerokuデフォルトのメンテナンス画面です。

「Offline for maintenance」と表示され、特に日本のユーザーから見るとかなり分かりにくいですね。

ちなみにこのページ自体は以下から確認できます。

今回は以下の手順で独自のメンテナンス画面を設置してみました。

それではさっそく設定方法を見ていきましょう。

メンテナンス画面のHTMLを用意

HTMLとCSSを使ってコーディングしていきます。好きなように記述してOK。

今回はすべて1から書きました。今回作成したファイルは、以下のGitHubのリポジトリに配置しました。

index.htmlにアクセスするとコーディングしたメンテナンス画面が表示されます。

上記のリポジトリを、以下の手順でWebサイトとしてURLでアクセスできるようにします。

用意したメンテナンス画面のリポジトリを、「GitHub Pages」を使ってWebサイトとして公開します。

ちなみに、GitHub Pagesの細かい設定方法については過去に記事にしています。

今回は説明を省略します。気になる方は上記の記事を参考に進めてみてください。

また、レンタルサーバーなどを借りている方はそちらに配置してもOKかと思います。

さきほど作成したメンテナンス画面をHerokuのメンテナンス画面に設定します。

「Settings」→「Reveal Config Vars」をクリック。以下のとおり設定します。

「ADD」をクリックして設定完了です。

もしくは、以下のコマンドをターミナルで実行することで、管理画面に入らなくても設定できます。

$ heroku config:set MAINTENANCE_PAGE_URL=メンテナンス画面のURL --app アプリ名

設定が完了したら、以下のコマンドでメンテナンス画面を確認してみましょう。

$ heroku maintenance:on --app アプリ名

サイトにアクセスします。

メンテナンス画面に切り替わっていることが確認できました。

以下のコマンドでメンテナンスを解除しておきます。

$ heroku maintenance:off --app アプリ名

これでいつでも独自のメンテナンス画面が利用できますね。

Herokuユーザーの参考になれば幸いです。