为啥我们需要在 express.js 服务器上使用代理才能获得与 react-routing 相结合的 webpack 热重载服务器功能
Posted
技术标签:
【中文标题】为啥我们需要在 express.js 服务器上使用代理才能获得与 react-routing 相结合的 webpack 热重载服务器功能【英文标题】: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 服务器上使用代理才能获得与 react-routing 相结合的 webpack 热重载服务器功能 【发布时间】: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>
【讨论】:
以上是关于为啥我们需要在 express.js 服务器上使用代理才能获得与 react-routing 相结合的 webpack 热重载服务器功能的主要内容,如果未能解决你的问题,请参考以下文章
为啥我不能在 Socket.io http 服务器上使用 express.js 获取方法
Express.js- 为啥是 localhost '::'
需要在节点js,socket.io,express js,ionic 3的实时聊天应用程序中提供建议
如何在 Express.js 服务器上执行 JWT API 请求? (edX API)