5

オプションの情報:このプロジェクトをmarty.jsとwebpack dev サーバーでビルドして、 react-routerからのエントリ ポイントを許可し、\ パス以外でも機能するようにしようとしています。

したがって、私はこのスタックオーバーフローの回答を一日中勉強していますが、次のコードの背後にあるロジックと、この回答が機能する理由を理解できません。

レトジはこう答えました。

これを実現するためにプロキシを設定しました：

アセット ルートを除き、すべてのルートで index.html を提供する通常のエクスプレス Web サーバーがあります。アセットの場合、リクエストは web-dev-server にプロキシされます

反応するホット エントリポイントは引き続き webpack dev サーバーを直接指すため、ホット リロードは引き続き機能します。

8081 で webpack-dev-server を実行し、8080 でプロキシを実行すると仮定しましょう。

私のコードは今このように見えますが、それを機能させるために後でmarty-expressを実装する必要があります。それを実装するには、まず retonzis の回答を理解する必要があります。

express.js ファイル

要件

    'use strict';
    var express = require('express');
    var path = require('path');
    var logger = require('morgan');
    var bodyParser = require('body-parser');
    var config = require('../config.json');
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    var proxy = require('proxy-middleware');
    var url = require('url');

プロキシー

    var app = express(); //our express instance

    // -------- my proxy----------------------


    app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));//but why do we need a proxy? This line really confuses me.

マーティエクスプレス**

この例を理解したらすぐにそれを使用する予定です.react-routesをexpressに渡すことを願っています.**

    //app.use(require('marty-express')({
    //    routes: require('../routes'),
    //    application: require('../application').Application
    //}));

ものを表現する

    app.get('/*', function(req, res) {
        res.sendFile(__dirname + '/index.html');
    });//if I got this straight this line just tells express to server my index.html file to all routes. My guess is this will be removed when I implement [marty-express][4].

2 つのサーバー webpack-dev-server と express

        //----- my-webpack-dev-server------------------
    var webpackServer = new WebpackDevServer(webpack(require('../../webpack.config')), {
        contentBase: __dirname,
        hot: true,
        quiet: false,
        noInfo: false,
        publicPath: '/assets/',
        stats: { colors: true }
    });

    //run webpack hot reload server on port 8081
    webpackServer.listen(8081, 'localhost', function() {});

    //run express server on port 8080
    app.listen(8080);

私が昨日惑星火星から降りてきたように、誰かが私にこの概念を説明するのに十分親切でしょうか?

私は2つのことを理解できません：

  1. プロキシが必要な理由
  2. 反応ルートをエクスプレスに渡して、要求されたときに各ルートでそれらを提供する方法。 (おそらく marty -expressがその作業に役立ちますが、それがなくても手動で行うことができると思います)

ああ...このドキュメンテーションの不足地獄から抜け出すのを手伝ってください!!! そして、あなたの答えを寛大にしてください..覚えておいてください、私は昨日火星から来たばかりです。

ありがとうございました..！

4

1 に答える 1