Vue-cli、devServer + http-proxy + 测试服务 + easy-mock 实现开发环境接口“负载”

http-proxy 代理应用;测试服务404或500时转发到Mock服务;http-proxy POST 请求失败,浏览器 pending,终端报错 Err:socket hang up;devServer.proxy 高级配置;Vue-cli 终端日志特色打印

1.实际场景

1. 老系统平台重构,生产环境业务逻辑及接口数据大部分可复用
2. 后端重构较前端更困难,针对接口的开发相对滞后,导致前端交互操作的开发受到比较大的影响;
3. 由于历史原因导致的接口测试服务与生产环境接口服务不同步,无法调通测试环境的部分接口,同样导致前端受到影响;
4. 诸如菜单、权限等前端框架配置相对核心的数据结构,需要前端来定义接口数据结构提供到后端
5. 使用vue-cli脚手架进行开发或重构的项目;
6. 搭建了Mock服务(easy-mock)。

2.实际需求

1. 开发环境需要同时代理到测试服务Mock服务,在开发时最大限度的保证接口可调用;
2. 接口的代理链条是先到测试服务再到Mock服务最终成功或失败提示
3. 接口的代理逻辑是测试服务不可用时转到Mock服务Mock服务不可用时进行错误拦截给予客户端合理的错误响应
4. 根据需要在终端打印有效的代理日志
5. 根据实际需求维护Mock服务(easy-mock)。

3.配置代码(vue.config.js

'use strict'
const path = require('path')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const httpProxy = require('http-proxy')
const { info, warn, done } = require('@vue/cli-shared-utils')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const isProd = process.env.NODE_ENV === 'production'
const port = process.env.port || process.env.npm_config_port || 80 // 端口
const publicPath = isProd ? '/' : '/'

/* Mock Mapping */
const router = {
  'xxx-server': 'mockid'
}
function pathRewrite(path) {
  return path.replace(/(.*?)([^\/]+-server)/, function (_, $1, $2) {
    if (/-server/.test($2)) {
      return router[$2] + '/' + $2
    }
    return ''
  })
}
const proxy = httpProxy.createProxyServer()
/* Mock请求实例设置POST请求体 */
proxy.on('proxyReq', function (proxyReq, req, res, options) {
  const rb = req.bodybuffer
  if (req.bodybuffer) {
    proxyReq.setHeader('content-type', 'application/json; charset=utf-8')
    proxyReq.setHeader('content-length', Buffer.byteLength(rb))
    proxyReq.write(rb.toString('utf-8'))
    proxyReq.end()
  }
})
/* Mock响应打印 */
proxy.on('proxyRes', function (proxyRes, req, res, options) {
  let buffer = Buffer.from('', 'utf8')
  proxyRes.on('data', (chunk) => (buffer = Buffer.concat([buffer, chunk])))
  proxyRes.on('end', () => {
    done(`[MR - ${req.timestamp}]:${buffer.toString('utf8').replace(/(.{100})(.*)/, '$1...')}`/* MOCK响应 */)
  })
})
/* 代理服务错误拦截 */
proxy.on('error', function (err, req, res, targeterr) {
  res.setHeader('Content-Type', 'application/json; charset=utf-8')
  res.write(JSON.stringify({ code: 500, info: `Mock代理请求超时[${req.path}]` }))
  res.end()
})
/* 转递到Mock服务 */
function nextHPM(req, res) {
  req.url = pathRewrite(req.url)
  proxy.web(req, res, {
    target: 'http://xxx.xx.xxx.xx:7300/mock/',
    changeOrigin: true,
    xfwd: true,
    preserveHeaderKeyCase: true,
    proxyTimeout: 5 * 1000 /* 代理未收到目标(target)的响应时超时(毫秒)。 */
  })
}
module.exports = {
  publicPath,
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  transpileDependencies: [],
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: false
    },
    proxy: {
        '/web': {
        target: `http://xxx.xxx.xxx.xx:9080`,
        changeOrigin: true,
        // 设置为 true 则需要手动进行请求响应:res.end()
        selfHandleResponse: true,
        pathRewrite: {
          '^/': ''
        },
        onProxyReq(proxyReq, req) {
          const date = new Date()
          date.setMinutes(date.getMinutes() - date.getTimezoneOffset())
          req.timestamp = date.toJSON()
          info(`[NP - ${req.timestamp}]:${req.path}`/* 原始路径 */)
          info(`[PP - ${req.timestamp}]:${proxyReq.path}`/* 代理路径 */)
          /* 向原始请求中缓存请求体 */
          let bodybuffer = Buffer.from('', 'utf8')
          req.on('data', (chunk) => (bodybuffer = Buffer.concat([bodybuffer, chunk])))
          req.on('end', function () {
            req.bodybuffer = bodybuffer
          })
        },
        onProxyRes(proxyRes, req, res) {
          /* 校验测试服务接口是否可用,不可用将转递到Mock服务 */
          let buffer = Buffer.from('', 'utf8')
          proxyRes.on('data', (chunk) => (buffer = Buffer.concat([buffer, chunk])))
          proxyRes.on('end', () => {
            const result = JSON.parse(buffer.toString('utf8'))
            if (result.code === 500 || result.statusCode === 404 || result.status === 404) {
              warn(`[PR - ${req.timestamp}]:${buffer.toString('utf8')}`/* 代理响应 */)
              nextHPM(req, res, result)
            } else {
              done(`[PR - ${req.timestamp}]:${buffer.toString('utf8')}`/* 代理响应 */)
              res.write(buffer)
              res.end()
            }
          })
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: config => {
    return {
      resolve: {
        alias: {
          '@': resolve('src'),
          '@crud': resolve('src/components/Crud')
        }
      },
      plugins: [
        ...(process.env.npm_config_analysis ? [new BundleAnalyzerPlugin({ // 打包分析图
          analyzerMode: 'disabled',
          generateStatsFile: true,
          statsOptions: { source: false }
        })] : []),
        new ScriptExtHtmlWebpackPlugin({
          inline: /runtime\..*\.js$/
        })
      ]
    }
  },
  parallel: false,
  chainWebpack(config) {
    config.plugins.delete('preload-index')
    config.plugins.delete('prefetch-index')

    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // scss 全局变量
          resources: ['src/assets/styles/variables.scss', 'src/assets/styles/mixin.scss']
        })
        .end()
    })

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    /** *** worker-loader Start *****/
    config.module
      .rule('worker-loader')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .options({ filename: 'WorkerName.[hash].js' })
      .end()

    config.output.globalObject('this')
    /* worker 热更新 */
    config.module.rule('js').exclude.add(/\.worker\.js$/)
    /** *** worker-loader End *****/

    config
      .when(process.env.NODE_ENV !== 'development',
        config => { /* production */
          /* 代码分割缓存组 */
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial'
                  // enforce: true
                },
                elementUI: {
                  name: 'chunk-elementUI',
                  priority: 20,
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/
                },
                quillCSS: {
                  name: 'chunk-quillCSS',
                  priority: 20,
                  test: /[\\/]node_modules[\\/]_?quill(.*)(core|snow)\.css$/
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'),
                  minChunks: 3,
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}

4.问题点

1. 上述配置未处理devServer.proxy.target服务不可用的情况。

3. 以下报错是由于Mock服务不可用(服务宕机)导致的,它会直接使程序退出

/xxx/node_modules/http-proxy/lib/http-proxy/index.js:120
    throw err;
    ^

Error: connect ECONNREFUSED xxx.xx.xxx.xx:7300
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: 'xxx.xx.xxx.xx',
  port: 7301
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-admin-template@4.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
# 通过注册error事件: proxy.on('error', function (err, req, res, targeterr) { console.log(err) })
# 进行错误拦截,可将错误打印到控制台并且不会导致程序直接退出(参考上述 vue.config.js 配置)
Error: connect ECONNREFUSED xxx.xx.xxx.xx:7300
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: 'xxx.xx.xxx.xx',
  port: 7301
}

3. 以下报错是由于http-proxy转发POST请求时导致的,Mock服务处理请求体失败未给予http-proxy响应,导致响应超时http-proxy将错误直接抛出,要求开发者注册错误拦截 proxy.on('error', handler) 自行处理;
设置 proxyTimeout 缩短超时时间,避免客户端接口调用长时间处于 pending 状态。

/xxx/node_modules/http-proxy/lib/http-proxy/index.js:120
    throw err;
    ^

Error: socket hang up
    at connResetException (internal/errors.js:614:14)
    at Socket.socketOnEnd (_http_client.js:456:23)
    at Socket.emit (events.js:327:22)
    at endReadableNT (_stream_readable.js:1201:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'ECONNRESET'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin-template@4.4.0 dev: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-admin-template@4.4.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
/* 代理服务错误拦截,避免错误导致程序直接退出 */
proxy.on('error', function (err, req, res, targeterr) {
  /* 给予客户端友好提示 */
  res.setHeader('Content-Type', 'application/json; charset=utf-8')
  res.write(JSON.stringify({ code: 500, info: `Mock代理请求超时[${req.path}]` }))
  res.end()
})
function nextHPM(req, res) {
  req.url = pathRewrite(req.url)
  proxy.web(req, res, {
    target: 'http://xxx.xx.xxx.xx:7300/mock/',
    changeOrigin: true,
    xfwd: true,
    preserveHeaderKeyCase: true,
    /* nodejs Server 默认超时时间为2分钟,设置 proxyTimeout 缩短超时时间,避免客户端接口调用长时间处于 pending 状态 */
    proxyTimeout: 5 * 1000 /* 代理未收到目标(target)的响应时超时(毫秒)。 */
  })
}

4. devServer.proxy 转递到 easy-mock 时,POST 携带请求体请求失败(客户端现象就是接口 pending 状态直到代理失败 failed 状态;服务端则程序抛出错误:Error: socket hang up),GETPOST 不携带请求体可正常响应。

排查错误“原因”:

devServer.proxy 代理处理到 easy-mock 时,request的请求体被篡改(?)或数据包破损(?),导致代理到 easy-mock 服务端时,请求体不能被正确解析(不在常规的content-type 解析范围内(?)),因此报错导致响应超时,客户端代理服务报错Error: socket hang up

问题解决:

/* devServer.proxy.onProxyReq */
onProxyReq(proxyReq, req) {
  const date = new Date()
  date.setMinutes(date.getMinutes() - date.getTimezoneOffset())
  req.timestamp = date.toJSON()
  info(`[NP - ${req.timestamp}]:${req.path}`/* 原始路径 */)
  info(`[PP - ${req.timestamp}]:${proxyReq.path}`/* 代理路径 */)
  /* 向原始请求中缓存请求体 */
  /* 注意:req 注册的以下 data 和 end 事件,只会在这个阶段(onProxyReq)内生效 */
  let bodybuffer = Buffer.from('', 'utf8')
  req.on('data', (chunk) => (bodybuffer = Buffer.concat([bodybuffer, chunk])))
  req.on('end', function () {
    req.bodybuffer = bodybuffer
  })
},

/* httpProxy.createProxyServer().on('proxyReq', handler) */
proxy.on('proxyReq', function (proxyReq, req, res, options) {
  /* Mock请求实例设置POST请求体 */
  /* 注意:此处为针对请求体进行重新设置 */
  const rb = req.bodybuffer
  if (req.bodybuffer) {
    proxyReq.setHeader('content-type', 'application/json; charset=utf-8')
    proxyReq.setHeader('content-length', Buffer.byteLength(rb))
    proxyReq.write(rb.toString('utf-8'))
    proxyReq.end()
  }
})

5.相关文档

Vue-cli 官方文档
Github源码 Vue-cli
NPM vue-cli文档
Github源码 http-proxy-middleware
NPM http-proxy-middleware(devServer.proxy)文档
Github源码 http-proxy(node-http-proxy)
NPM http-proxy(http-proxy-middleware的基础依赖)文档
Github源码 easy-mock

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli是一个官方推出的Vue项目脚手架工具,用于快速搭建Vue项目。ts是TypeScript的简称,是一种由微软开发的开源编程语言,它是JavaScript的超集,可以为JavaScript代码添加静态类型检查和封装类、模块等面向对象编程的特性。antd是蚂蚁金服开源的一套基于React封装的UI组件库,提供了丰富的高质量的React组件。 将这三者结合在一起,意味着我们可以利用Vue-cli搭建一个基于Vue和TypeScript的项目,并使用antd组件库来构建界面。这样的项目结合了Vue的简洁、易用和高效性能,TypeScript的类型检查和面向对象编程特性,以及antd的高质量UI组件,可以提升开发效率和代码质量。 在使用Vue-cli创建项目时,可以选择使用TypeScript作为项目的开发语言,这样项目就会自动集成TypeScript的相关配置和支持。通过使用Vue-cli提供的命令和配置,我们可以快速搭建一个工程化的项目结构,并集成Webpack等构建工具。 在项目中使用antd组件库时,可以通过npm或者yarn安装antd包,然后在Vue的组件中引入所需的组件,并进行相关配置和使用。antd提供了丰富的UI组件,包括按钮、表单、弹窗、表格等常见的界面元素,可以根据项目需求进行选择和使用。 在使用TypeScript编写Vue项目时,可以利用TypeScript的静态类型检查、类型提示功能,提升代码的可读性和可维护性。同时,可以使用面向对象的编程方式来组织代码,更好地管理和封装组件、模块等。 综上所述,使用Vue-cli搭建一个基于Vue、TypeScript和antd的项目,可以充分发挥各自的优势,提升开发效率和代码质量,同时能够满足丰富的UI界面需求。这样的项目具备良好的可扩展性和可维护性,适合于中大型前端项目的开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值