URL にindex.html を追加しないと React ビルドが正しく動作しません
P粉216203545
2023-09-01 11:25:58
<p>React JS アプリケーションにハッシュ ルーティングを使用しています。アプリケーションはローカル環境で正常に動作します。 </p>
<p>たとえば、https://stackoverflow.com/posts/ をアプリケーションの URL にする必要がありますが、機能せず、https://stackoverflow.com/posts/index.html を使用する必要があります。仕事。 </p>
<p>デプロイ後、ビルド ファイルでデフォルトの <strong>index.html</strong> ファイルを提供するのではなく、「<strong>download</strong>」という名前の空のファイルをダウンロードしていることに気付きました。サーバー上でビルドを実行するには、S3 と CloudFront アーキテクチャを使用します。 </p>
<p>現時点では、HASH ルーティングが誤動作しているのか、それとも AWS のデプロイメントに問題があるのかわかりません。 </p>
<p>React JS を使用したコード スニペット</p>
<pre class="brush:php;toolbar:false;">React を 'react' からインポートします。
「react-dom」から ReactDOM をインポートします。
import { Provider } から 'react-redux';
'./redux/store' からストアをインポートします。
「./App」からアプリをインポートします。
reportWebVitals を './reportWebVitals' からインポートします。
import { HashRouter } から 'react-router-dom/cjs/react-router-dom';
ReactDOM.render(
<プロバイダストア={ストア}>
<ハッシュルーター>
<アプリ/>
</ハッシュルーター>
</プロバイダー>
document.getElementById('ルート')
);</pre>
<p><strong>package.json コンテンツの一部</strong></p>
<pre class="brush:php;toolbar:false;">{
「名前」: 「ロレミプサム」、
「バージョン」: 「0.1.0」、
「プライベート」: true、
「ホームページ」: 「/loremipsum/」
}</pre></p>
サブディレクトリに展開する必要がありますか?その場合は、
リーリーpackage.json
ファイルの内容を変更して、index.html
ファイルを基準にしてリソースが提供されるようにする必要があります。これにより、
http://www.foo
でホストされているアプリケーションをhttp://www.foo/relativepath
またはhttps に移動できるようになります。 //www.foo/bar1/bar2/
リビルドする必要はありません。また、
PUBLIC_URL
をオーバーライドして、ファイルをホストするドメインとサブディレクトリを含める必要があります。