【Vue】S3+CloudFront環境でTOPページ以外をリロードすると開けない

はじめに

Vue-cliで作成したSPAサイト（Routerでページの振り分けを行っているサイト）をS3＋CloudFront環境で動作させている。この状況でS3で設定しているDefault Topページ以外のページをリロードすると以下のようなエラーが出力されて表示できない。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error data-livestyle-extension="available">
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3A494C8D44686E0B</RequestId>
<HostId>
2Md7g0VQi8VqOpfMODf3ppFzZIWDioRilTv900Mvk6cLBCB5Tia/virxZloyDTQrferhb9PKn/A=
</HostId>
</Error>

原因

SPAにて指定されているパスが物理パスではなく仮想パスであることが原因の可能性がある。

解決策

エラー時のリダイレクト先をindex.htmlにする。
対象のCloudFront>Error Pagesタブ>Custom Error Responseにて以下のように設定する。

おわりに

こちらを参考にしました。