こんにちは、okutani(@okutani_t)です。本記事では、「Herokuのメンテナンス画面を独自にカスタマイズする」方法について解説しています。
背景として、私が運営しているメッセージアプリの「LINKチョコボックス(Chocobox)」に独自のメンテナンス画面を設置したいと思い、本記事に備忘録的に載せてあります。
Herokuではデフォルトでメンテナンス画面が用意されていますが、殺風景かつ英語なので、今回HTMLファイルを作成して設置してみました。
以下はHerokuデフォルトのメンテナンス画面です。
「Offline for maintenance」と表示され、特に日本のユーザーから見るとかなり分かりにくいですね。
ちなみにこのページ自体は以下から確認できます。
LINKError Pages | Heroku Dev Center
今回は以下の手順で独自のメンテナンス画面を設置してみました。
- メンテナンス画面のHTMLファイルの作成
- GitHub Pagesで公開
- Herokuに設定
それではさっそく設定方法を見ていきましょう。
スポンサーリンク
メンテナンス画面のHTMLを用意
HTMLとCSSを使ってコーディングしていきます。
好きなように記述してOKなので、コーディングが苦手な方は「Bootstrap」などを使ってみてもいいかと思います。
今回はすべて1から書きました。今回作成したファイルは、以下のGitHubのリポジトリに配置しました。
LINKokutani-t/chocobox-maintenance: チョコボックスのメンテナンス画面
index.htmlにアクセスするとコーディングしたメンテナンス画面が表示されます。
上記のリポジトリを、以下の手順でWebサイトとしてURLでアクセスできるようにします。
GitHub Pagesの設定
用意したメンテナンス画面のリポジトリを、「GitHub Pages」を使ってWebサイトとして公開します。
ちなみに、GitHub Pagesの細かい設定方法については過去に記事にしています。
LINKGitHub Pagesを使って無料でWebサイトを公開してみよう！ | vdeep
今回は説明を省略します。気になる方は上記の記事を参考に進めてみてください。
また、レンタルサーバーなどを借りている方はそちらに配置してもOKかと思います。
Heroku管理画面から設定
さきほど作成したメンテナンス画面をHerokuのメンテナンス画面に設定します。
「Settings」→「Reveal Config Vars」をクリック。以下のとおり設定します。
- KEY: MAINTENANCE_PAGE_URL
- VALUE: メンテナンス画面のURL
「ADD」をクリックして設定完了です。
もしくは、以下のコマンドをターミナルで実行することで、管理画面に入らなくても設定できます。
$ heroku config:set MAINTENANCE_PAGE_URL=メンテナンス画面のURL --app アプリ名メンテナンス画面確認
設定が完了したら、以下のコマンドでメンテナンス画面を確認してみましょう。
$ heroku maintenance:on --app アプリ名サイトにアクセスします。
メンテナンス画面に切り替わっていることが確認できました。
以下のコマンドでメンテナンスを解除しておきます。
$ heroku maintenance:off --app アプリ名これでいつでも独自のメンテナンス画面が利用できますね。
Herokuユーザーの参考になれば幸いです。