はじめに
普段はバックエンドとインフラをメインでやっています。
そのため、ついついフロントエンドのことを忘れてしまうので、メモしておきます。
構成
アプリへのアクセスは以下の流れになります。いわゆる静的ホスティングの王道パターンです。
Client ⇒ CloudFront ⇒ S3 ⇒ SPA Webアプリケーション
以下、補足です。
- ドメイン取得・付与、OAIの設定などは、本来はCloudFront＋S3構成ではベストプラクティスに沿って実施するべきですが、本記事で説明したいエラーページ遷移についてとは本筋がズレるため、行なっていません。
- SPAは、Vue.jsをフレームワークとして作成しています。ReactやAngularなど、他のSPAに置き換えて考えてもらっても構いません。
なぜエラーページ遷移設定は必須なのか？
端的に言うと、「SPAの仕組みとして、index.htmlを起点としてルーティングさせている。そのため、存在しないパス（ページ）へのアクセスも全てindex.htmlに返す必要がある」ためです。
SPAでない従来のWebページのファイル構成・ルーティング
SPAでない従来のWebページは以下のような階層構造とします。
- トップページ
- 会社情報
- 沿革
- 代表挨拶
- 事業紹介
- 事業A
- 事業B
- 採用
- 新卒
- 中途
- 会社情報
SPAでない従来ページでは、上記の項目1つ1つに対して全てHTMLファイルを用意して、階層的にホスティングが必要です。つまり上記の構成の場合、第1階層から第3階層まで、計10個のHTMLファイルが必要です。
アクセスされたパスに対応したHTMLファイルを返すので、イメージとしてはシンプルです。ルーティングに関係なく、対象のページが直接的に読み込まれます。
SPAのWebページのファイル構成・ルーティング
Webページ自体の構成は、SPAでないWebページと差分無いとします。
- トップページ
- 会社情報
- 沿革
- 代表挨拶
- 事業紹介
- 事業A
- 事業B
- 採用
- 新卒
- 中途
- 会社情報
SPAは、1つのindex.htmlだけが存在します。
そのindex.htmlと各ページに対応するコンポーネント組み合わせることによって、それぞれのWebページを描画しています。
（例えば、事業Aがアクセスされた場合、index.htmlが取得された後に、JavaScriptがブラウザで動作して、ルーティングによって対象のコンポーネントが取得されることで、index.htmlを修飾して描画します。）
従来Webページのように指定されたパスのHTMLファイルを探索すると、当然ですが該当ページ（HTMLファイル）が存在せずにエラーとなります。（403エラーが発生します）
このエラーを避けるために、CloudFrontのエラーページ遷移設定によって、403発生時にindex.htmlに遷移させて、上記のSPAの動作・描画をさせることができます。
まとめ
従来のページごとにHTMLファイルが読み込まれるWebページと異なり、SPAのHTMLはトップに配置されるindex.htmlのみとなります。
（だからこそ、Single Page Application）
SPAの挙動を理解した上で、index.htmlに誘導するためのルーティング設定をCloudFrontに対しても設定しましょう。