coditbetaコードノートVue.jsのSPAで、メンテナンスページを出すVue.jsのSPAで、障害や予定メンテンスなどの時にメンテナンスページを出す方法をまとめました。APIサーバーからstatusを出すことで、リアルタイム制御ができて、PWAにも対応できます。watch)時にapp.example.comからstatusデータを取得するメンテナンス状態なら、/maintenanceにリダイレクトするバックエンド単純に、status.jsonを返すだけです。200}メンテナンス実行時statusの値が通常と違うだけで問題ないのですが、どうせなので計画メンテナンスのケース用にスケジュール時刻を返してみます。07:00:00",}statusコードはHTTPのレンスポンスコードに合わせてますが、booleanでもなんでも良いと思います。フロント(Vue.jsのSPA)App.vue各ViewはApp.vueを必ず通る設計にしておきます。その上で、createdとwatchでメンテンス情報を取得するメソッド「chechMaintenance()」を実行させることで、読み込みやルートチェンジなどすべてのタイミングでメンテンスをチェックできます。}}</script>単純にjsonファイルを返すだけのサーバーであれば、100msecもあれば返ってくるので、非同期通信でデータを取得すれば、アプリの動作には、体感上はほとんど影響ないと思います。PWAでローカルに保存されていたとしても、App.vueを通過する度にチェックする仕組みになっているので、リアルタイムでチェックができます。Maintenance.vueリダイレクト先のメンテンスを通知するページです。Vue.jsはHTTPレスポンスを返せないので、503などのステータスコードを出すことはできませんが、短期間のメンテナンスであればこれでOKでしょう。<p>現在システムメンテナンスを行なっています。ご迷惑をおかけしまして申し訳ございません。<p>メンテナンス終了後に再度ページを読み込んでいただきますようお願いいたします。表示するのであれば、「getInfo」メソッドのフローはまるっとなしで良いです。障害(サーバーダウン)Vue.jsのSPAアプリの場合、フロントは静的サーバーなので、ダウンしたとしても、ファイルをまるっと別のサーバーに移してしまえば良いので問題は軽いですが、バックエンドAPI側は動的になることが多いので、こちらのサーバーに障害が起こった際は厄介です。その際は、一時的にstatus.jsonだけを返すサーバーを立てて、そちらにapp.example.comのDNSを向けて対処するのが良いでしょう。向け先のサーバーは、事前に用意してシャットダウンしておけば、より万全ですね。長期的なメンテナンスの場合あまり想定したくないですが、システムが取り返しのつかないことになったりして、数日以上のメンテナンスが必要になる場合は、しっかりとHTTPヘッダーで503を返す方がSEO的に良いです。その場合は、フロントのVue.js・SPA側のpublicに、maintenance.htmlなどを用意して、サーバー側で503ステータスを付与すると良いと思います。Vue.jsのSPAで、メンテナンスページを出す方法を見てきました。SPA(特にPWA)はアプリの用意に動作するので、障害やメンテナンス用のフローはしっかり用意しておくと安心ですね。.Hugo.Environmentで取れる。masterブランチ以外で実行されるテストコマンド。