はじめに

普段はバックエンドとインフラをメインでやっています。
そのため、ついついフロントエンドのことを忘れてしまうので、メモしておきます。

構成

アプリへのアクセスは以下の流れになります。いわゆる静的ホスティングの王道パターンです。
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に対しても設定しましょう。