[CloudFront+S3+APIGateway]Access Deniedエラーについて

こんにちは。KOUKIです。

とある企業でWeb系エンジニアをやっています。

最近仕事で、AWSのCloudFront + S3 + API Gatewayの環境構築を構築する機会があったのですが、下記のエラーに悩まされました。

ちなみに、HTTPステータスコードは、403で返されます。

この問題の解決策を記述します。

事象について

フロントエンドをVueJSで作成していて、S3に保存したファイルをCloudFrontから読み込み、API Gatewayに登録したエンドポイントに向けてリクエストを送ります。

その際に、ログインページや遷移先のページは表示されるのですが、ページをリロードしたりすると表題のエラーが発生する次第です。

根本原因

私の場合は、CloudFrontのエラーページ設定をしていないことが原因でした。

「CloudFront」 -> 「ディストリビューション」 -> 「CloduFrontのID」へアクセスし、「エラーページ」タブを開きます。

そこで、エラーになった時のレスポンスを設定できるので、下記のように設定します。

• HTTPエラーコード: 403:Forbidden
• 最低TTL(秒): 10
• レスポンスページのパス: /index.html
  ※設定により異なる。デフォルトルートオブジェクトに設定している値と合わせている
• HTTPレスポンスコード: 200:OK

要するに、403エラーになった時のリダイレクト先を設定することで、事象を回避できた感じですね。

まとめ

正直、設定によって根本原因は異なると思います。

キャッシュとかS3のアクセス制限などなど、色々な原因が考えられるからです。

しかし、CloudFrontを設定する際にエラーページの設定も忘れないようにすれば、私のようにエラー地獄に陥ることを回避できますw

参考になれば、幸いです！

記事まとめ

プログラミング