AWS
S3
CloudFront
Vue.js
nuxt.js

CloudFront+S3環境で Vue Nuxt の静的化ページでリロードした時にエラー(access denied)となる時の対処法


CloudFront+S3の環境構築にデプロイ

nuxtアプリのmode: 'universal'モードにて

アプリケーションから静的ファイルを生成する。

npm run generate

静的なホスティングサイトにデプロイする準備が整ったものが全て入った dist フォルダが作成されます。

デプロイはAWS S3に先程生成されたファイルを配置することでデプロイできます。


「/」以外のURLでリロードした場合に403(access denied)エラーとなる

This XML file does not appear to have any style information associated with it.!~~~~

AccessDenied

AccessDenied


対応策

エラーの原因として対応するファイルがないため、ブラウザリロードすると 403 エラーになってしまうようです。


CloudFrontのError Pagesで設定

403のときに/index.html(今回は「/」)へ転送するよう設定することでこの現象を回避することができます。


Custom Error Response で追加設定

HTTP Error Code: 403:Forbidden

Error Caching Minimum TTL (seconds): 0

Customize Error Response: Yes

Response Page Path:/

HTTP Response Code: 200:OK

以上の設定でリロードしてもエラーとならずページが表示されます。

こちらのサイトの記事を参考に解決することができました。

https://dev.classmethod.jp/cloud/aws/s3-cloudfront-spa-angular-403-access-denied/

ありがとうございます!!