実機環境でのReactRouterのページ遷移が想定と異なる

前提・実現したいこと

現在AWS上にて、Cloudfront + S3という構成でReactアプリを公開しようとしております。
Reactの勉強として、React-Routerを用いた画面遷移を実装しました。

発生している問題・エラーメッセージ

ローカル（※１）にて起動したReactアプリの場合、Appページが起動時に表示されます。
しかし、S3上に※２のコマンドにてアップロードしたものでは、Page404がアクセス時に表示されます。

こちらが期待する動作としては、
https://xxx.cloudfront.net/、またはhttps://xxx.cloudfront.netにアクセスした場合は、Appページを表示、
存在しないページ（https://xxx.cloudfront.net/aaaなど）にアクセスした場合、404Pageを表示になります。
※xxxには自動割り当てされたドメイン名が入ります。

react-router-domは降順にて定義したものが優先される認識のため、S3上でもAppページが表示される想定です。
こちらについて原因わかる方いらっしゃるでしょうか？
React勉強中のため、原因は基礎的なことかもしれませんがご指摘いただけると幸いです。

※１　実行コマンド
npm run start

※２　実行コマンド
npm run build

アクセス先

ローカル：http://localhost:3000
→Appページが表示

AWS：https://xxx.cloudfront.net/index.html
→Page404が表示
xxxには、自動割り当てされたドメイン名が入力されている。

該当のソースコード

下記すべて.jsファイルとして読み替えてください。

UIRoute
1function UIRoute() {
2    return (
3        <Router>
4            <Switch>
5                <Route exact path="/" component={App} />
6                <Route path='*' component={Page404} />
7            </Switch>
8        </Router>

index
1// Route定義
2import UIRoute from './Route/UIRoute'
3
4ReactDOM.render(
5    <UIRoute />,
6    document.getElementById('root')
7);

App
1import logo from '../../logo.svg';
2import '../../css/pages/App.css';
3
4// 追加
5import { Link } from "react-router-dom";
6
7function App() {
8  return (
9    <tp>
10      <div>
11          <Link to='/'>App画面</Link><br />
12      </div>
13      <div className="App">
14        <header className="App-header">
15          <img src={logo} className="App-logo" alt="logo" />
16          <p>
17            Edit <code>src/App.js</code> and save to reload.
18          </p>
19          <a
20            className="App-link"
21            href="https://reactjs.org"
22            target="_blank"
23            rel="noopener noreferrer"
24          >
25            Learn React
26          </a>
27        </header>
28      </div>
29    </tp>
30  );
31}
32
33export default App;

Page404
1import React from "react";
2
3class Page404 extends React.Component {
4    render() {
5        return(
6            <div>Not Found</div>
7        );
8    }
9}
10
11export default Page404;

補足情報（FW/ツールのバージョンなど）

reacr-router-domのバージョンは、"5.3.0"です。
またベースとしては、create-react-appコマンドを使用してから改修しています。
その他不足内容あれば、ご指摘ください。
初質問のため、その点もご了承いただけると幸いです。

hoshi-takanori

2021/11/16 21:15

AWS：xxx/index.html index.html を付けたら / ではなく /* にマッチするでしょうね。あと、xxx はホスト名または IP アドレスでしようか？

Lian

2021/11/17 01:42 編集

はい、ご指摘の通りxxxにはホスト名が入ります。例. https://xxx.cloudfront.net/ →xxxには自動割り当てされたドメイン名が入力されます。　しかし、https://xxx.cloudfront.net/ にアクセスした場合、AccessDeniedのページが表示されます。 https://xxx.cloudfront.net/にアクセスした場合は、Appページを表示、存在しないページ（https://xxx.cloudfront.net/aaaなど）にアクセスした場合、404Pageを表示しようとした場合、どのように実現すればよろしいですか？

hoshi-takanori

2021/11/17 01:52

CloudFront の設定画面で Default Root Object に index.html と指定すればいいかも？ https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html

Lian

2021/11/17 07:28 編集

解決しました！ありがとうございます！！べストアンサーにしたいので、お手数ですが回答に記載をお願い致します！！以下実施した手順です。 1. "index.html"をデフォルトルートオブジェクトに設定 2. キャッシュ削除を実行 3. https://<ドメイン名>にアクセスしたところ、Appページが表示されました！