Кто сказал, что фронтенд должен знать Nginx?

Node.js внешний интерфейс Nginx Webpack

--читать"Кто сказал, что интерфейсу не нужно понимать — обратный прокси Nginx и балансировка нагрузки"Чувство

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

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

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

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

Move 1, использовать модуль http-сервера для прокси

Друзья, знакомые с nodejs, должны знать, что есть очень хороший и мощный инструментальный модуль.http-serverВот маленькая ракета, которая поможет вам взлететь в небо, используйте ее так:

Прежде всего, вам нужно установить nodejs (должен быть установлен интерфейс, подходящий для nodejs, верно? Я не буду повторяться здесь).

Установить глобальные модули

 npm install http-server -g

Затем перейдите в каталог ресурсов html, где вам нужно запустить отображение и выполнить

http-server -P http://www.your-backend.com/api

http://www.your-backend.com/apiЭто адрес интерфейса вашего обратного прокси-сервера, вам нужно изменить его на свой собственный.

Затем вы можете использовать http://localhost:8080 для доступа (если порт 8080 не занят, если он занят, вы можете указать другие порты с помощью -p ), это очень просто? Дополнительные параметры можно найти в официальной документации.http-server.

Изюминкой этого инструмента является отсутствие настройки, запуск в любое время и в любом месте.Разве не легко обойти и отладить мобильный терминал за три секунды для своих друзей, неужели так сложно написать конфигурацию nginx?

Второй трюк — использовать webpack для настройки прокси.

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

Самый простой способ:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

Приведенная выше конфигурация автоматически перенаправит запрос доступа с адреса /api на http://localhost:3000, действуя таким образом как прокси.

Если ваше правило требует удаления префикса API, вы можете использовать адрес перезаписи.

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

Вы также можете столкнуться с проблемами безопасности https, вызывающими ошибку непроверенного сертификата, тогда вы можете просто добавить secure: false, чтобы справиться с этим.

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

Иногда вы не хотите проксировать все запросы. Прокси можно обойти на основе возвращаемого значения функции. Внутри функции вы можете получить доступ к телу запроса, телу ответа и параметрам прокси. Должен возвращать false или путь для пропуска запросов проксирования. Например: вы хотите обслуживать HTML-страницу для запросов браузера, но оставить прокси-сервер для запросов API. Ты можешь это сделать:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

Прокси для нескольких путей

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

Короче говоря, webpack предоставляет множество гибких методов, и я считаю, что в большинстве случаев он может удовлетворить ваши требования.

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

Третий шаг — использовать модуль node-http-proxy nodejs для обработки

node-http-proxyпредоставляет банкурежим программированияЕсли у вас есть очень особые требования, такие как сеанс, обработка домена, привязанного к файлам cookie, в другие домены или контент, который необходимо преобразовать, вы можете использовать этот метод для борьбы со сложным хакером.

Например, добавление специальных заголовков запросов;

var http = require('http'),
    httpProxy = require('http-proxy');
 
var proxy = httpProxy.createProxyServer({});

 
proxy.on('proxyReq', function(proxyReq, req, res, options) {
  proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
});

var server = http.createServer(function(req, res) {
  // You can define here your custom logic to handle the request
  // and then proxy the request.
  proxy.web(req, res, {
    target: 'http://127.0.0.1:5060'
  });
});

console.log("listening on port 5050")
server.listen(5050);

Для получения дополнительной информации см. официальную документацию веб-сайта

Четвертый шаг — использовать собственный прокси-метод фреймворка, такой как прокси-сервер angular.

Прокси-сервер Angular в основном такой же, как и веб-пакет, вам нужен файл конфигурации proxy.conf.json следующим образом. мой проект с открытым исходным кодомtyperxЭто способ

{
    "/api": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/user": {
        "target": "http://localhost:5400/",
        "secure": false
    },
    "/uploads": {
        "target": "http://localhost:5400/",
        "secure": false
    }
}

После завершения настройки используйте параметр proxy-config, чтобы указать proxy.conf.json для вызова конфигурации прокси.

 ng serve --proxy-config proxy.conf.json

больше способов, если почитать больше способов, как вы думаете, это то же самое, что и вебпак, на самом деле это и есть вебпак?

Этот метод является правильной позой использования после разработки

Ход 5. На самом деле это не прокси, но тоже может решить вашу междоменную проблему.

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your/path/

Другой способ, конечно, nginx

ты можешь продолжить знакомство с нимКто сказал, что интерфейсу не нужно понимать — обратный прокси Nginx и балансировка нагрузки

Категории