vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

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

   

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

LINEで送る
Pocket


こんにちは、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ユーザーの参考になれば幸いです。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
これでイカしたメンテナンス画面を使うことができますね。なかなか良い感じに設定できて良きです。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。

Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - Heroku

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。