Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する

Angular に限らずだが、最近の SPA ライブラリでルーティングを使用していると、実際には HTML ページが存在しない /hoge/fuga/ といった URL を生成し、画面遷移を実現しているだろう。

こうした SPA アプリを GitHub Pages に公開した場合、最初は必ず /index.html を踏んでもらう必要があるが、ルーティングで生成した URL をブックマークされたりすると、ページが存在しない URL に飛んでしまい、404 エラーになってしまう。

コレを回避するための方法が紹介されていたので、拙作の Angular Utilities に取り入れてみた。

独自の 404 ページを用意する

404 エラーを回避するためには、独自の 404 ページを用意し、ココから index.html に遷移させてやれば良い。

GitHub Pages はルートディレクトリに 404.html があるとそれを独自の 404 ページとして自動的に利用してくれるので、コレにリダイレクトの meta 要素を書こう。

<meta http-equiv="refresh" content="0;URL=./">

後はこの 404.html を GitHub Pages にアップしてやれば良いだけ。簡単だ。

ただ、IE は独自に用意した 404 ページの容量が 512 バイトを超えると上手く動かないようなので、404 ページは最低限の実装にしておこう。

拙作の 404 ページの実装は以下のとおり。

踏まれた URL に遷移させ直すには

このリダイレクトだけだと、踏まれた URL に戻ってくれず、必ずアプリのトップページが開くような作りになってしまう。

そこで、404.html で踏まれた URL を SessionStorage に記録しておき、アプリの初期処理でその SessionStorage に記録されている URL を基に初期表示するページを選定してやる。

<script>
  // location.href を SessionStorage に記録しておく
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL=./">

アプリの初期処理の中で、sessionStorage.redirect の値を基に、表示したいページを選んでやれば良い、という寸法。

Angular の Guard によるページ遷移制限をかけていたり、ログインページを用意していたりする場合は、踏まれた URL ごとに適切にハンドリングしてやろう。

単純な発想だが、404 ページを利用する方法が思い付かず、目から鱗だった。

参考