web-dev-qa-db-ja.com

反応ルーターがaws s3バケットで機能しない

React website build/]フォルダーをAWS S3バケットにデプロイしました。

www.mywebsite.comに移動すると機能し、aタグをクリックして[プロジェクト]ページと[バージョン情報]ページに移動すると、適切なページに移動します。ただし、ページのURLをコピーして送信するか、www.mywebsite.com/projectsのようなリンクに直接移動すると、404が返されます。

これが私のApp.jsコードです：

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);
javascriptreactjsamazon-web-servicesamazon-s3
20
Viet

質問を閉じるために答えます。上記のAlan Friedmanのコメントのおかげで、この問題を解決しました。

エラー（この場合は404）をルートindex.htmlにリダイレクトする必要があります– 7月7日0:34

10
Viet

すでに解決したかどうかはわかりません。同じ問題がありました。

これは、AWS S3が提供するフォルダー（プロジェクト）を探しているためです。

エラードキュメントにindex.htmlを指定するだけです。

enter image description here

これは私のために働いた。反応ページでエラーページを処理できます。

36
A.R Naseef

それが起こる理由

問題は、react app/javascriptへのルーティングに責任を委ねたいことです。反応はリンクのクリックをリッスンし、ブラウザーのURLバーのルートを更新するだけなので、リンクは機能します。ただし、スクリプト（index.htmlとbundle.jsまたはアプリコードのある場所）がロードされていない場所に移動すると、JavaScriptはロードされず、リクエストを処理する機会がありません。代わりに、サーバーを実行するものは何でもリクエストを処理し、この場所にリソースがあるかどうかを確認し、404エラーまたはその他のエラーを返します。

解決策

コメントで述べたように、これが、404エラーをアプリが配置されている正確な場所にリダイレクトする必要がある理由です。これはAmazon固有のものではなく、Reactアプリをセットアップするための一般的な要件です。

この問題を解決するには、サーバー上のルーティングを処理するものとその構成方法を見つける必要があります。たとえば、Apacheサーバーがある場合、.htaccessファイルで次のような問題を処理できます。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

このファイルにより、サーバーはnot foundエラーをindex.htmlにリダイレクトできます。サーバー上にある他のルーティングルールに影響を与える可能性があることに注意してください。そのため、Reactアプリに独自の場所があり、他のものに干渉しない場合、この構成が最も簡単です。

4
Gegenwind

受け入れられた回答に記載されている構成を使用しているにもかかわらずこの問題に遭遇しましたが、403エラーが引き続き発生し、AWS Cloudflare Managerを使用している場合、配布設定の[エラーページ]タブでエラーページを作成できます、次の構成で：

Error Code: 404,
Customize Error Response: Yes, 
Response Page Path: /index.html, 
HTTP Response Code: 200

ブラウザルーターにルート処理を渡すエラーページ構成の図

これは私にとってはうまくいきましたが、私は適切なサーバー管理について決して知識がありません。誰かがこれが重大な問題であるか、偶然であるかどうかを教えてくれることを願っています。

2
Dank

Cloudfront to S3を使用する場合：

https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455

3b）AWS CloudFront —エラーページCloudFrontディストリビューションを作成した後、そのステータスが[進行中]の場合、[エラーページ]タブに進みます。エラー応答のカスタマイズで応答コード404および403を処理します。

1週間または604800秒のキャッシュをお勧めします。ここで行っているのは、欠落しているhtmlページを処理するようにCloudFrontをセットアップすることです。これは通常、ユーザーが無効なパスを入力したとき、または特にルートパス以外のパスを更新したときに発生します。

それが起こるとき：

CloudFrontは、S3バケットに存在しないファイルを探します。バケットには1つのhtmlファイルしかありません。これは、このプロジェクト例のような単一ページアプリケーションの場合のindex.htmlです。404応答が返され、カスタムエラー応答セットアップがそれをハイジャックします。代わりに200応答コードとindex.htmlページを返します。 React index.htmlファイルとともにロードされるルーターは、URLを見て、ルートパスの代わりに正しいページをレンダリングします。このページは、 TTL。なぜ403も処理する必要があるのですか？存在しないアセットに対しては、404の代わりにこの応答コードがAmazon S3によって返されるためです。たとえば、 https://yourdomain.com/somewhere のURLは、存在しないsomewhere（拡張子なし）というファイルを探します。

PS。以前は404を返していましたが、現在は403を返しているようです。どちらの方法でも、両方の応答コードを処理することが最善です）。

1
Flávio Vieira