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エラーを返している
コメントいただき誠にありがとうございます。
エラーが起きるリクエストと起きないリクエストでログに違いがあるか確認したところ、 起きるリクエストでは/(ルート)に、起きないリクエストでは/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のデフォルトルートオブジェクトを設定すると、問題なく動作することを確認しました。 ご対応誠にありがとうございました。