web-dev-qa-db-ja.com

ExpressJSでReactJS静的ファイルを提供する方法

問題

Reactアプリのindex.htmlファイルを正常に配信しましたが、htmlファイルの_index.js_を最初のReactコンポーネントに置き換える_<root>_は_ReactDOM.render_でトリガーされません。 _index.js_ファイルを開始するにはどうすればよいですか？ Reactアプリの提供に関する私の理解が特定の方法で歪んでいる場合、明確にしていただければ幸いです。

フォルダ構造

  • /-_server.js_を含むすべてのサーバー側ファイルが含まれます
  • / client /-すべてのReactファイルが含まれます
  • / client/build /-すべての本番環境対応のクライアントファイルが含まれています
    • / client/build/_index.html_
    • / client/build/static/js/_main.[hash].js_-Reactアプリの_index.js_を含む_ReactDOM.render_の縮小バージョンのようです

現在の展開

  • / client/build /にFacebookのcreate-react-appを使用しています。npmrun buildを使用して、/ client/build /に自動的に入力します。

ファイルスニペット

_// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));
_

これにより、create-react-appによって提供されるデフォルトのindex.htmlが正常にロードされます

_// index.html
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>
_

上記のコードのセクションは役立つ場合とそうでない場合がありますが、create-react-appに付属するデフォルトのhtmlファイルです。 noscriptタグを、縮小された_index.js_ファイルを参照するスクリプトタグに置き換える必要がありますか？私はそれを試みました、そして何も変化しませんでした、しかしおそらくそれは不正確な相対パス作成のためです。

reactjsexpressstaticservercreate-react-app
10
gpsugy

試行錯誤によってさまざまなことを試した後の解決策は非常に簡単です。

次のように、静的呼び出しで/ client/buildフォルダーを提供します。

app.use(express.static(path.join(__dirname, '../client/build')));
17
gpsugy