React * S3 * CloudFrontでルートページ以外でAccessDeniedになった場合の対応

始めに

ReactアプリケーションをS3*CloudFrontでデプロイして動作確認をした時にルート("/")以外を直接指定して遷移した時にAccess Denied(403)が発生したため対応方法についてまとめます

本構成は別記事でまとめております。
https://zenn.dev/yuya_morimoto/articles/44bc2b33d78c2c

対応方法

403エラー時に"/"に飛ばすことで対応できそう。他記事でもこの対応が多かった。

1. CloudFrontよりカスタムエラーレスポンス作成画面へ遷移
   

2. 403エラー発生時に200OKで"/"に飛ばすように設定
   

最後に

今回はReactでの説明になりますが、SPAによるため発生しているものだと思われます。
原因の詳細は不明ですが、おそらく直接URLを叩くことによりindex.htmlではなく別のものとして判断されAccessDeniedが発生している(index.htmlなら問題ない)のだろうと思っています。

詳細わかるかた教えてください。。。

以上！！！