express起一个代理服务器,webpack-dev-server同时起多个
由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpack config可以定制。
Nginx在前端项目中安装比较麻烦,所以考虑用nodejs来代理,社区比较成熟的node代理显然就是express的http-proxy-middleware了:
var express = require('express')
var proxy = require('http-proxy-middleware')
var rewrite = require('express-urlrewrite')
var app = express()
let options = {
'/report/template': {
target: 'http://www.wenming.cn',
pathRewrite: {
'^/report/template': '',
},
headers: {
"Host": "www.wenming.cn",
"Connection": "keep-alive",
"Cache-Control": "max-age=0",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "zh-CN,zh;q=0.9",
"Cookie": "wdcid=118bf0416992ec45; wdlast=1553783233; Hm_lvt_3bdce7455c04dfb8cf1a26c3ac808bea=1553783233; Hm_lpvt_3bdce7455c04dfb8cf1a26c3ac808bea=1553783233",
}
},
'/report':{
target: 'http://localhost:8090',
pathRewrite: {
'^/report': '',
},
}
}
app.use('/app/home', (req,res,next) => {
req.originalUrl = req.originalUrl.replace(/^\/app\/home/, '')
next()
});
app.use(rewrite('/app/home/*', '/$1'))
function proxyFactory(source, option) {
app.use(source, proxy(option))
}
for (let key in options) {
proxyFactory(key, options[key])
}
app.use('/', (req, res) => {
res.send('not found!!')
})
app.listen(3000)
webpack-dev-server同时起多个:
const execa = require('execa')
execa('webpack-dev-server', ['--entry', './apps/alarm.js', '--port', '8044', '--config', './webpack.js'], {stdio: 'inherit'})
execa('webpack-dev-server', ['--entry', './apps/report.js', '--port', '8045', '--config', './webpack.js'], {stdio: 'inherit'})
express起一个代理服务器,webpack-dev-server同时起多个的更多相关文章
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 4 & dev server
webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...
- 利用express启一个server服务
安装express $ npm install express --save 在node.js中,我们最常用的框架就是express Express 是一个基于 Node.js 平台的极简.灵活的 w ...
- Vue.js如何搭建本地dev server和json-server 模拟请求服务器
前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...
随机推荐
- cisco 下CEF(简介)[转载]
cisco 下CEF(简介) 转自:http://blog.51cto.com/chengmingshu/803358 cms_cmd1人评论2570人阅读2012-03-12 00:09:29 ...
- K3日志定时备份
K3日志超过5万条以后,每次用户登陆后,系统都会提示日志太多.但是日志又不能随意删除,所以需要做个数据库定时任务,定时把日志转移到备份表. declare @dt datetime;; SELECT ...
- 浏览器与android移动端视频互播技术实现
手机端与平台之间的视频直播功能,主要通过集成多种开源视频框架以及采购第三方视频直播服务器产品来实现预定业务需求.视频直播对话功能的实现,主要经历了三个阶段:利用开源视频框架实现视频直播.采购第三方视频 ...
- js坚持不懈之15:修改html内容和属性的方法
1. 修改 HTML 内容 <!DOCTYPE html> <html> <body> <p id = "change">原始内容& ...
- C# -- 使用Ping检查网络是否正常
C# -- 使用Ping检查网络是否正常 需引用命名空间: using System.Net.NetworkInformation; 1. 代码实现 try { List<string> ...
- 机器翻译评价指标 — BLEU算法
1,概述 机器翻译中常用的自动评价指标是 $BLEU$ 算法,除了在机器翻译中的应用,在其他的 $seq2seq$ 任务中也会使用,例如对话系统. 2 $BLEU$算法详解 假定人工给出的译文为$re ...
- 【题解】P2922 [USACO08DEC]秘密消息Secret Message
\(\text{Tags}\) 字典树,统计 题意: 给出两组\(\text{0/1}\)串\(\text{A,B}\),求解\(\text{A}\)中某串是\(\text{B}\)中某串的前缀,和\ ...
- python 提取pdf文字
安装pdfminer 库 windows 下安装pdfminer3k pip install pdfminer3k Liunx 下安装pdfminer pip install pdfminer 代码 ...
- 大神教你如何解决Linux系统80端口被占用
有Linux在centos下面安装webmail服务遇到80端口被占用的问题,导致无法继续安装,下面详细介绍下Linux如何查看.查找.关闭监听80端口服务以更好的的解决80端口被占用的问题. 一.查 ...
- ThinkPad T400 键帽下面的X支架的安装方法
有一台古老的T400,清理键盘的时候,X支架老化断了,淘宝买了几个支架,研究一下安装方法: 1.注意支架方向:上面是横向的细支架,下面是两个小孔2.用小螺丝刀把下面的两个小孔推进键盘下面的两个金属钩里 ...