PWA(Progressive Web App)でホーム画面に保存した場合にCloudFront経由でのS3オブジェクトへのアクセスができない

0

AWS上にデプロイしたReactアプリが、iPhoneにてホーム画面に追加した場合のみアクセスが拒否される状態となっています。

何かアドバイスがあれば、教えていただければ幸いです。

現象

Reactで開発したアプリがiPhoneでSafari及びChromeではアクセスができるが、Safari及びChromeから”ホーム画面に追加”をし、ホーム画面上に追加されたアプリを開くとAccessDeniedとなってしまう

環境

iPhone : iOS 17.5.1

実施手順

npx create-react-app my-app --template cra-template-pwa-typescriptにて、Reactアプリを作成&ビルド

・S3にデプロイ、HTTPS接続をするためCloudFront経由でのアクセスとなるよう設定(S3バケットにてパブリックアクセスをすべてブロック)

・iPhoneのsafari、chromeにて{ディストリビューション}.cloudfront.net/index.htmlにアクセスし、Reactのアプリ画面が表示される

・iPhoneのsafari、chrome両方で、ホーム画面に追加をしたアプリではAccessDeniedと表示されアクセスができない

・同様のアプリをVercelにデプロイした場合は、iPhoneでホーム画面に追加してアクセスするとエラーなく正しく表示される

(そのためAWSの設定を何か間違えているのではないかと思っています。)

・macのchromeにて、ホーム画面に追加をしてもアクセス可能

・CloudFrontのログをS3に書き出し確認すると、GETリクエストに対し403エラーを返している

mm
質問済み 2ヶ月前213ビュー
1回答
1
承認された回答

エラーが起きるリクエストと起きないリクエストでログに何か違いはありませんか?
例えば何かしらユーザーエージェントが異なるとかアクセス先のパスが異なるなど無いでしょうか?
ちなみにAWS WAFなどは設定していない認識で正しいでしょうか?
https://repost.aws/ja/knowledge-center/cloudfront-troubleshoot-403-errors

profile picture
エキスパート
回答済み 2ヶ月前
  • コメントいただき誠にありがとうございます。

    エラーが起きるリクエストと起きないリクエストでログに違いがあるか確認したところ、 起きるリクエストでは/(ルート)に、起きないリクエストでは/index.htmlにリクエストが飛んでいました。 一時的に、CloudFrontにてエラーページを設定し対処したところ、iPhoneのsafariと同様のページが表示されることを確認しました。 (403エラーを返す際、レスポンスページを/index.htmlに設定) Vercelではデフォルトでindex.htmlに飛ぶようになっているのかもしれません。

    また、念の為ですがWAFは設定しておりません。

  • デフォルトのルートオブジェクトなどを設定していない可能性があると思います。 こちらを設定すると「/index.html」をURLに設定しないでもアクセスできると思います。 https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html

  • 尋常じゃないスピードでのご回答ありがとうございます。(調べてスパムと間違えられた記事を見つけました) 一度CloudFrontでのエラーページ設定を削除し再度アクセス拒否される状態にし、 その後CloudFrontのデフォルトルートオブジェクトを設定すると、問題なく動作することを確認しました。 ご対応誠にありがとうございました。

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン