• 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'})
  • 相关阅读:
    吴恩达机器学习笔记 —— 3 线性回归回顾
    springboot整合pagehelper实现分页
    Spring 线程池实战
    Java web后台插入数据库中文乱码问题解决
    Cesium项目实战(5)-城市各类POI数据制作、加工、展示
    Cesium项目实战(2)-城市行政区划信息展示以及专题信息展示
    【mybatis】mybatis中避免where空条件后面添加1=1垃圾条件的 优化方法
    Java之Json转List实体
    Maven项目META-INF文件夹不存在的问题
    Maven打jar包把配置文件放在META-INF目录下
  • 原文地址:https://www.cnblogs.com/amiezhang/p/10618889.html
Copyright © 2020-2023  润新知