为啥我们需要在 express.js 服务器上使用代理才能获得 webpack 热重载服务器功能与 react-routing 相结合

Posted 2023-02-21

【中文标题】为啥我们需要在 express.js 服务器上使用代理才能获得 webpack 热重载服务器功能与 react-routing 相结合

【英文标题】：Why do we need a proxy on an express.js server in order to get webpack hot reloading server functionality combined with react-routing为什么我们需要在 express.js 服务器上使用代理才能获得 webpack 热重载服务器功能与 react-routing 相结合

【发布时间】：2015-09-14 12:01:28

【问题描述】：

可选信息：我正在尝试使用marty.js 和webpack dev server 构建this project 允许来自react-router 的入口点，以便它不仅仅在\ 路径中工作。

因此，我整天都在研究THIS 堆栈溢出的答案，但我无法理解以下代码背后的逻辑以及为什么这个答案有效。

retozi 回答：

我设置了一个代理来实现这个：

您有一个常规的快速网络服务器，它在任何 > 路由上为 index.html 提供服务，除非它是资产路由。如果它是资产，则请求被代理到 web-dev-server

您的 react hot 入口点仍将直接指向 webpack 开发服务器，因此热重载仍然有效。

假设您在 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.

marty-express **

我打算在理解这个例子后立即使用它，我只是希望它将 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].

两个服务器 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);

谁能像我昨天从火星下来一样向我解释这个概念？

我不明白两件事：

为什么我们需要代理 如何将 react-routes 传递给 express，以便在被询问时在每条路由上为它们提供服务。 （也许marty-express 可以帮助我们完成这项任务，但我猜如果没有它我们可以手动完成）

呸...帮我摆脱这种文档稀缺的地狱！并请慷慨地回答.. 记住，我昨天刚从火星回来。

谢谢你..！

【参考方案1】：

你不知道，但这很棘手。所以第一个要求是你有一个可配置的资产根。如果您将来需要 CDN，这也会带来回报。假设这是在运行 webpack 开发服务器和 express 服务器时都可用的 envvar ASSET_URL 中。

您需要通常的 webpack 开发服务器，以及 CORS 标头。这让你的主快递服务器只指向脚本/链接标签中的 webpack 开发服务器。

ASSET_URL 就像：http://localhost:8081

网页包

var config = require('./webpack.config');

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) 
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;


new WebpackDevServer(webpack(serverConfig), 
  publicPath: serverConfig.output.publicPath,
  hot: true,
  headers:  "Access-Control-Allow-Origin": "*" 
).listen(port, 'localhost', function (err, result) 
  if (err) 
    console.log(err);
    process.exit(1);
  

  console.log('Listening at ' + url.format(port: port, hostname: hostname, protocol: 'http:'));
);

然后在你的 webpack 配置文件中你有大部分相同的垃圾。

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) 
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;


...

  entry: [
    'webpack-dev-server/client?' + url.format(port: port, hostname: hostname, protocol: 'http:'),
    'webpack/hot/only-dev-server',
    ...

  output: 
    path: __dirname + '/public/',
    filename: 'bundle.js',
    publicPath: process.env.ASSETS_URL || '/public/'

快递服务器

这里唯一的特别之处是您需要以某种方式将process.env.ASSETS_URL 放入模板的本地变量中。

<head>
    <link rel="stylesheet" href=" assetsUrl /main.css">
</head>
<body>
    ...
    <script type="text/javascript" src=" assetsUrl /bundle.js"></script
</body>