Интерфейсная разработка (4): прокси-приложение http-proxy-middleware в нескольких средах.

Vue.js Webpack

Предположим, что во время разработки существуют следующие среды:

  • собственный местныйMOCKСреда (создайте произвольные данные самостоятельно)

  • RAPСреда платформы (формат данных согласован с серверной частью)

  • Локальное окружение бэкенд-разработчика (совместная отладка с бэкендом)

  • Тестовая среда Alibaba Cloud 1 (развернута в тестовой среде, протестирована тестировщиками)

  • Тестовая среда Alibaba Cloud 2 (среда напряженная и ее необходимо развернуть в других тестовых средах для тестирования)

  • Тестовая среда Alibaba Cloud 3 (компания неплохая, купили минимум 5 серверов)

  • Тестовая среда Alibaba Cloud 4

  • Тестовая среда Alibaba Cloud 5

    ......

Да, есть так много сред, ожидающих, когда вы посещаете их. Итак, как вы можете выполнить совместную отладку с каждой средой при запуске фронтального кода? Самый простой способ - модифицироватьproxyв опцияхtarget, а затем повторно выполните сценарий разработки. Этот метод можно терпеть, когда проект небольшой, а если проект большой, то долгое время компиляции сразу убьет энтузиазм в работе.

Итак, в этой статье предлагается решение, позволяющее беспрепятственно переключаться между разными средами во время совместной отладки. Если вы не используете прокси-сервер или не настраиваете совместное использование ресурсов между источниками на серверной части, вы можете прочитать эту статью. если вы использовалиhttp-proxy-middlewareЧтобы решить междоменные проблемы, вам нужно прочитать эту статью.

Первый шаг, настройка среды

Определите переменную для хранения нужной пары ключ-значение маршрутизации:

тестовая среда

let PROXY_ROUTER = {
  'dev-aliyun1.test.com': 'https://m-aliyun1.test.com:10454',
  'dev-aliyun2.test.com': 'https://m-aliyun2.test.com:10454',
  'dev-aliyun3.test.com': 'https://m-aliyun3.test.com:10454',
  'dev-aliyun4.test.com': 'https://m-aliyun4.test.com:10454',
  'dev-aliyun5.test.com': 'https://m-aliyun5.test.com:10454'
}

на домен разработкиdev-aliyunX.test.comКаждое доменное имя соответствует тестовой среде.

RAP-среда

let PROXY_ROUTER = {
  ...
  'dev-rap.test.com': 'http://192.168.4.102:9999/mockjsdata/400',
}

использовалRAPВсе студенты знают, что разные модули имеют разныеid(то есть 400 в 👆url), значит ли это, что требуемыйidвсе записать? фактическиRAPОбеспечивает функцию маршрутизации проекта, которая может соединять различные модулиidмаршрут к модулюidначальство:

Используйте запятые для разделения каждого модуля, поэтому вам нужно написать только основной идентификатор.

Локальная среда разработки бэкенда

// 填写后端开发的ip地址和端口号
const devHostName = '172.16.9.xx'
const devServerPort = '8085'

let PROXY_ROUTER = {
  ...
  'dev-debug.test.com': `http://${devHostName}:${devServerPort}`
}

Совместная отладка с back-end разработкой неизбежно приведет к перезапуску проекта, т.к. ip back-end разработки неизвестен и его нужно заполнять вручную.

локальная фиктивная среда

использоватьwebpack-dev-server + mocker-apiначать местныйmock-server.

Новое в корневом каталогеmockпапка, пишиindex.jsдокумент:

import Mock from 'mockjs' // 引入mock
import { mockMemberInfo } from './memberinfo'

const proxy = {
  'GET /cloud/ssc-server/model/authModels.do': {
    code: 200,
    msg: 'success',
    data: {
      userId: 5,
      userName: 'Option 5'
    }
  }
}
module.exports = proxy

существуетvue.config.jsНастроить:

const apiMocker = require('mocker-api')

module.exports = {
  devServer: {
    ...
    before (app) {
      apiMocker(app, path.resolve('./mock/index.js'))
    },
    disableHostCheck: true
  },
  ...
}

Пока интерфейс совпадает, он будет отображать локальныйmock-serverСреду нельзя сопоставить, а затем сопоставить с другими средами, поэтому для переключения среды необходимо изменить интерфейс.baseUrl:

let baseURL = ''
if (process.env.NODE_ENV === 'development') {
  if (window.location.hostname !== 'localhost') {
    baseURL = '/api'
  }
}

Примечание. Все имена доменов разработки должны быть настроены с хостом следующим образом: 127.0.0.1 dev-m-aliyun1.test.com ...

Второй шаг, настроить маршрутизацию

единый префикс

Единая обработка прокси для всех интерфейсов, если они используютсяaxiosБиблиотека запросов может быть настроена следующим образом:

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '' : '/api'

распределение маршрутов

http-proxy-middlewareпредоставилrouterОпции (получает объект или функцию): можно использоватьhostилиpathилиhost+pathСопоставьте определенный запрос, чтобы переписатьoption.target, то естьrouterударurlприоритет надtargetнастроенurl.

Префиксы обработки/apiИнтерфейс:

let proxyTable = {
  '/api': ''
}

Object.entries(proxyTable).forEach(([key, value], index) => {
  proxyObj[key] = {
    target: value || 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite (path, req) {
      return path.replace(/\/api/, '')
    },
    router (req) {
      let hostname = req.headers.host.split(':')[0]
      return value === '' ? PROXY_ROUTER[hostname] : value
    }
  }
})

запрашивается через интерфейсhost, чтобы соответствоватьPROXY_ROUTERв соответствующей среде. Если это совпадает,router functionВозвращает соответствующий адрес среды для перезаписиtarget. Если не совпадает,router functionвернутьundefined,targetВступить в силу, то есть проксировать локальную фиктивную среду.

В реальной разработке также может быть странное требование: вы отлаживаете в среде а, но некоторые интерфейсы все еще находятся в среде б. Чтобы решить эту проблему, вам просто нужноproxyTableДобавлять:

let proxyTable = {
  '/api/cms/renderData': 'https://m-aliyun2.test.com:10454',
  '/api': ''
}

Таким образом, независимо от того, как вы меняете доменные имена,/api/cms/renderDataвсегда будет проксироватьсяhttps://m-aliyun2.test.com:10454окружающая обстановка.

Порядок важен, первый совпадающий вступит в силу.

Суммировать

кvue-cli3Для скаффолдинга создайте новый в корневом каталогеproxy.config.jsдокумент:

let proxyObj = {}

// 与开发联调的时候由于未知 需手动填写
const devHostName = '172.16.9.xx'
const devServerPort = '8085'
// 代理路由表
let PROXY_ROUTER = {
  'dev-m-aliyun1.test.com': 'https://m-aliyun1.test.com:10454', // 代理到阿里云1测试环境
  'dev-m-aliyun2.test.com': 'https://m-aliyun2.test.com:10454', // 代理到阿里云2测试环境
  'dev-m-aliyun3.test.com': 'https://m-aliyun3.test.com:10454', // 代理到阿里云3测试环境
  'dev-m-aliyun4.test.com': 'https://m-aliyun4.test.com:10454', // 代理到阿里云4测试环境
  'dev-m-aliyun5.test.com': 'https://m-aliyun5.test.com:10454', // 代理到阿里云5测试环境
  'dev-rap.test.com': 'http://192.168.4.102:9999/mockjsdata/400', // 代理到rap环境
  'dev-debug.test.com': `http://${devHostName}:${devServerPort}` // 代理到后端开发人员的ip环境
}
// 代理接口
let proxyTable = {
  '/api/cms/renderData': 'https://m-aliyun2.test.com:10454',
  '/api': ''
}

Object.entries(proxyTable).forEach(([key, value], index) => {
  proxyObj[key] = {
    target: value || 'http://localhost:8080', // 代理到本地mock环境
    changeOrigin: true,
    pathRewrite (path, req) {
      return path.replace(/\/api/, '')
    },
    router (req) {
      let hostname = req.headers.host.split(':')[0]
      return value === '' ? PROXY_ROUTER[hostname] : value
    }
  }
})

module.exports = proxyObj

существуетvue.config.jsИзменено в файле:

const proxyBase = require('./proxy.config')

module.exports = {
  devServer: {
    proxy: proxyBase,
    disableHostCheck: true // 新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问
  },
  ...
}

После указанной выше настройки прокси,Просто переключитесь на доменное имя, и вы сможете беспрепятственно переключать соответствующую тестовую среду без перезапуска внешнего сервиса., что значительно повышает эффективность работы интерфейсных разработчиков в нескольких средах разработки.

На самом деле агент — это просто инструмент, помогающий нам в разработке, и если агент жестко запрограммирован в коде проекта, удобство сопровождения действительно будет немного хуже. Однако для разработки нашего программного обеспечения инструменты могут быть для нас лишь достаточным, а не необходимым элементом. Таким образом, эта моя схема имеет свои преимущества и недостатки, и каждый может использовать ее в соответствии с реальными потребностями своих собственных проектов.

Категории