Nginx, Charles и Webpack настраивают руководство по внешнему прокси-серверу API (очень подробное)

внешний интерфейс Nginx Charles Webpack
Nginx, Charles и Webpack настраивают руководство по внешнему прокси-серверу API (очень подробное)

Зачем внешнему интерфейсу необходимо настраивать API-прокси?

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

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

Как мы все знаем, браузеры имеют междоменные ограничения.По соображениям безопасности сервер ABC не может быть настроен так, чтобы разрешить доступ к любому запросу.Итак,Целью настройки прокси интерфейсного API является решение междоменной проблемы, после того как фронтенд настроит агент по установленным правилам, он сможет обеспечить согласованность стадии разработки и службы онлайн-развертывания.

Три способа настройки внешнего API-прокси

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

Пример адреса:Github.com/ окрашенная марля / поставить о ...

После загрузки кода и установки зависимостей зайдите на http://localhost:8000 (по умолчанию порт 8000, если он занят, то будет на другом порту), и вы увидите страницу приветствия Welcome to dva. В проекте .roadhogrc.mock.js — это файл конфигурации Mock-данных, который теперь

Введите в браузереhttp://localhost:8000/users/1Вы можете видеть, что возвращаются данные, которые вы настроили в .roadhogrc.mock.js.

Наша конечная цель:

  1. Используйте www.frontproxy.com для доступа к среде разработки, то есть ввод www.frontproxy.com в браузере эквивалентен вводу localhost:8000.
  2. Проксируйте модули пользователей, задач и сообщений, то есть интерфейсы запросов, начинающиеся с /users/, /todos/ и /posts/ в пути запроса, на разные серверы.
  3. Окончательный запрос на реализацию выглядит какwww.frontproxy.com/users/1Возвращаемые данные являются запросомjsonplaceholder.typicode.com/users/1данные возвращены

Примечание. В этой статье запросы трех модулей проксируются наjsonplaceholder.typicode.comДля удобства тестирования используется запрос Get, а остальные методы запроса аналогичны методу Get, описанный ниже метод настройки берется за пример Mac, а принцип такой же и на Windows, а конкретный метод нужен чтобы googled самостоятельно.

Настройка реализации Nginx и хостов

Настроить хосты

Введите терминал Macsudo vi /etc/hosts, Отредактируйте файл Hosts и добавьте следующую конфигурацию127.0.0.1 www.frontendproxy.com

Затем сохраните. Если вы не знаете команд Vim, нажмитеПодробное объяснение команд VimУчить.

Теперь заходим на www.frontproxy.com:8000 и на localhost:8000, эффект тот же,

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

Настроить Nginx

После установки Nginx введите терминал Maccd /usr/local/etc/nginxНайдите файл nginx.conf, вы можете использовать программное обеспечение, чтобы открыть или продолжить вводvi nginx.confДобавьте следующую конфигурацию

server {
        listen 80;
        server_name www.frontendproxy.com;
        index index.html;
        location / {
            proxy_pass http://127.0.0.1:8000/;
        }
    }

Введите в терминалеsudo nginx, запустите Nginx, в это время введите в браузереwww.frontendproxy.comОн может отображаться нормально, но когда вы измените содержимое страницы, вы обнаружите,http://localhost:8000Он может быть автоматически обновлен для обновления содержимого, которое вы только что изменили,www.frontendproxy.comСтраница не обновляется автоматически, измененный контент отображается после ручного обновления, и на странице есть ошибка

Есть проблема со связью через webSocket, нам нужно добавить следующую конфигурацию

location /sockjs-node/ {
    proxy_pass http://127.0.0.1:8000/sockjs-node/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";	
 }

Введите в терминалеsudo nginx -s reloadПерезапустите nginx, а затем обнаружите, что ошибка исчезла.После изменения содержимого страницы страница может быть автоматически обновлена.

На этом этапе мы можем использовать доменное имя для доступа к локальному проекту и успешно развиваться, но данные, запрашиваемые для модуля пользователей, по-прежнему являются данными в Mock,

Мы добавляем следующую конфигурацию в Nginx для прокси-запросов из модуля пользователей,

location /users/ {
    proxy_pass http://jsonplaceholder.typicode.com/users/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Введите в терминалеsudo nginx -s reloadПерезапустите Nginx и повторите запросwww.frontendproxy.com/users/1Вы обнаружите, что возвращаемые данные больше не являются данными, настроенными Mock, аjsonplaceholder.typicode.com/users/1Возвращенные данные указывают на то, что прокси вступил в силу

Аналогичным образом настройте модули todos и posts.Полная конфигурация выглядит следующим образом.

server {
    listen 80;
    server_name www.frontendproxy.com;
    index index.html;
    location / {
        proxy_pass http://127.0.0.1:8000/;
    }
    location /sockjs-node/ {
        proxy_pass http://127.0.0.1:8000/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";	
     }
    location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/users/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /todos/ {
        proxy_pass http://jsonplaceholder.typicode.com/todos/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /posts/ {
        proxy_pass http://jsonplaceholder.typicode.com/posts/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

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

Чарльз настроить прокси

Чарльз — супер-используемое программное обеспечение капитана на Mac, особенно для отладки мобильного интерфейса, просто не будьте слишком круты, не расширяйте это, последующие действия будут специально написаны, адрес загрузки: Связь:disk.baidu.com/yes/1u CJ U9kab…Код извлечения: shfp.

Если вы настроили Hosts и Nginx в соответствии с приведенным выше руководством, очистите соответствующую конфигурацию, а затем мы начнем настройку Charles.

Чарльз не может напрямую перехватывать пакеты в Chrome, и ему необходимо настроить прокси-сервер для Chrome. Я использую подключаемый модуль Chrome SwitchyOmega, настройте прокси в SwitchOmega, 8888 — это порт Charles по умолчанию, если вы изменили его, укажите измененный порт.

После того, как конфигурация вступит в силу, проверьте настройки прокси в браузере Chrome,

На этом этапе запрос, сделанный через браузер Chrome, будет перехвачен Чарльзом.

Теперь приступаем к настройке правил прокси Чарльза, как показано ниже, открываем Map Remote в инструментах Чарльза

Нажмите кнопку добавления, чтобы добавить

Как показано на рисункеwww.frontendproxy.comПрокси на 127.0.0.1:8000.После настройки эффект доступа к доменному имени и IP одинаков.Если выше настроен эффект Hosts и Nginx, то прокси /sockjs-node/ также необходимо настроить, поэтому после изменение файла. Он может быть сохранен автоматически, добавьте прокси модуля пользователей ниже

Приоритет правил прокси Чарльза сверху вниз, то есть правила выше имеют приоритет над правилами ниже.Это необходимо отметить.

OK, настройка запроса интерфейсного API-интерфейса прокси-сервера Charles завершена.

Конфигурация Wepack + Host Switch Plus

В настоящее время веб-пакет в основном используется во внешней среде разработки. Пакет webpack-dev-server также необходим для создания среды разработки с помощью веб-пакета. Он обеспечивает наши часто используемые функции автоматического обновления и горячего обновления. О чем мы поговорим о сегодняшнем дне То же самое верно и для прокси-функции.

Host Switch Plus, как следует из названия, представляет собой инструмент управления для хостов.Это подключаемый модуль Chrome, который необходимо загрузить из Chrome App Store.

Во-первых, мы настраиваем прокси для доменного имени, который поддерживает одиночное добавление и пакетное добавление.

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

В этот момент посетитеwww.frontendproxy.com был проксирован на http://localhost:8000Выше мы открываем файл .webpackrc в проекте и добавляем следующую конфигурацию

{
  "proxy": {
  "/sockjs-node/": {
    "target": "http://127.0.0.1:8000/",
    "changeOrigin": true
  },
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  },
  "/todos/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true
  }
}
}

Ну и про работу прокси конфигурации webpack, тут тоже закончено, проwebpack-dev-serverПодробные правила настройки прокси в , пожалуйста, нажмите для просмотра, я не буду описывать их здесь по одному.

Уведомление:Если вы в настоящее время используете прокси-сервер, настроенный Nginx, и теперь хотите переключиться на прокси-сервер конфигурации веб-пакета, если модуль для проксирования/users/, адрес интерфейса ожидаемого проксиhttp://localhost:8000/login, Конфигурации Nginx и Webpack следующие, а окончательный запрос от прокси-сервераhttp://jsonplaceholder.typicode.com/login, элемент конфигурации Webpack должен добавить еще одну конфигурациюpathRewrite, переписать путь прокси-сервера,/users/заменить/, Иногда бэкенду нужны какие-то значения в заголовке запроса, в этом случае нужно добавить пользовательский заголовок запроса (версия webpack-dev-server@3.1.7), как показано ниже:

 Nginx配置：
 location /users/ {
        proxy_pass http://jsonplaceholder.typicode.com/;
        proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 Webpack配置：
 {
  "proxy": {
  "/users/": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true，
    "pathRewrite": { "^/users/": "/" }，
    "headers":{
       // 你需要定义的请求头
       Host: "localhost:8000"
    }
  },
}
}

Суммировать

Ключевым моментом является следующее: Давайте сравним эти три метода настройки с трех аспектов: область применения, простота настройки и стоимость совместной работы группы.

День Национального дня только что прошел, и если вы найдете это полезным, пожалуйста, закажите 👍 лет!

Категории