LoginSignup
22
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-05-22

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/
ありがとうございます!!

22
11
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
11