web-dev-qa-db-ja.com

webpackによってビルドされた本番の反応bundle.jsを提供する正しい方法は何ですか？

シンプルなルートのアプリがあります。 Webpack開発サーバーを使用すると問題なく動作します。次に、それを運用サーバーに展開します。だから私はbundle.jsをビルドしました。しかし、サーバーでファイルを提供する正しい方法が何であるかはわかりません。

ほとんどのブログ投稿はbundle.jsのビルドで停止するか、それをherokuまたはnodejutsuにデプロイします。自分のサーバーでサービスを提供したい場合はどうすればよいですか？

エクスプレスサーバーでファイルを提供しようとしましたが、ブラウザーでこのエラーが発生しています（この同じルートは、webpack-dev-serverで正常に機能します）。
http：// localhost：3000/app
/appを取得できません

このような簡単なルートがあります。 /のランディングページは正常に機能しますが、/ appルートにアクセスできません

var Routes = () => (
    <Router history={browserHistory}>
        <Route path="/" component={Landing}>
        </Route>
        <Route path="/app" component={App}>
        </Route>
    </Router>
)

これが私のserver.jsです。 bundle.js、index.htmlを./publicに配置します

app.use(express.static('./public'));
app.listen(port, function () {
    console.log('Server running on port ' + port);
});
expressreactjswebpackreact-routerproduction
15
Komsit Prakobphol

すべてのページ要求をキャプチャしてクライアントに転送する「すべてをキャッチ」ルートを高速サーバーで宣言する必要があります。まず、サーバーにpathモジュールが含まれていることを確認します。

var path = require('path');

次に、これをapp.listenの前に置きます：

app.get('*', function(req, res) {
  res.sendFile(path.resolve(__dirname, 'public/index.html'));
});

これは、スクリプトタグを使用してbundle.jsをindex.htmlに挿入することを前提としています。

13
Rick Runyon