Ъглова - Как да прокси към сървъра Backend

Обяснение как да конфигурирате прокси за бекенд API повиквания с пример.

Снимка на Йенс Херндорф на Unsplash

В приложението Angular, Ние често разговаряме със сървъри за задния ред във фазата на разработка, ще проучим всички сценарии в тази статия. Ето и темите, които обхващаме.

  • Какво е прокси
  • Примерен проект
  • опции proxy.config.json
  • Прокси настройка с ъглова CLI
  • Различни начини за конфигуриране
  • Пренапишете URL адреса на пътя
  • Множество записи в приложението към една крайна точка на API
  • Множество записи в приложението с множество крайни точки
  • резюме

Какво е прокси

По принцип прокси или прокси сървърът служи като шлюз между вашето приложение и интернет. Това е междинен сървър между клиент и сървъри чрез препращане на клиентски заявки към ресурси.

В Angular често използваме това прокси в средата за разработка. Angular използва webpack dev сървър, за да обслужва приложението в режим на разработка. Ако разгледаме следната диаграма, потребителският интерфейс на приложението работи на порт 4200, а задния сървър работи на порт 3700. Всички обаждания започват с / api ще бъдат пренасочени към задния сървър и всички останали ще се върнат обратно към същия порт.

В следващите раздели ще видим как можем да постигнем и тази и други опции.

достъп до всички URL адреси започва с / api

Примерен проект

Нека следваме тези команди за примерния проект и сте готови за ъглова настройка на CLI прокси.

// клониране на проекта
git клониране https://github.com/bbachi/angular-proxy-example
// инсталирайте зависимости за сървър на възел
npm инсталиране
// cd to ui
cd appui
// инсталирайте зависимости на потребителското приложение
np инсталиране

След като инсталирате всички зависимости, можете да стартирате както Angular приложение, така и възел js сървър на 4200 и 3070 съответно.

Можете да стартирате приложението Angular с тези команди npm start или ng serve и ето Angular приложението работи на 4200.

Ъгловото приложение работи на 4200

Нека започнем сървъра с тази команда npm start и тестваме този API на порт 3070.

API работи на порт 3070

опции proxy.config.json

цел: Тук трябва да определим резервния URL адрес.

pathRewrite: Трябва да използваме тази опция за редактиране или пренаписване на пътя

changeOrigin: Ако вашият резервен API не работи на localhost, трябва да направим този флаг истина.

logLevel: Ако искате да проверите дали прокси конфигурацията работи правилно или не, този флаг трябва да бъде отстранен.

байпас: Понякога трябва да заобиколим прокси, можем да определим функция с това. Но той трябва да дефинира в proxy.config.js вместо proxy.config.json.

Прокси настройка с ъглова CLI

Сега приложението и сървърът работят на различни портове. Нека да настроим прокси за комуникация между тях.

Първото нещо, от което се нуждаете, е този proxy.config.json. Определяме целта за всички URL адреси, започващи с / api тук.

Второ нещо е да уведомите Angular, че имаме този proxy.config.json на място. Можем да го направим, като добавим прокси-конфигурационния флаг, докато стартираме приложението по-долу. След като стартираме, можем да видим съобщението, показващо, че всички URL адреси, започващи с / api, ще бъдат пренасочвани към nodejs сървър, работещ на порт 3070.

npm start script

Сега можем да тестваме приложението и да видим настройките от сървъра

настройки, идващи от сървъра

Различни начини за конфигуриране

Друг начин за конфигуриране на прокси конфигурация в проекта Angular е дефинирането в angular.json.

proxyConfig в angular.json

Нека обобщим начините тук

  • Добавете тази услуга - proxy-config proxy.conf.json към стартовия скрипт в package.json
  • Определете в angular.json под секция за обслужване като по-горе.

Пренапишете URL адреса на пътя

Всеки път, когато има промяна в URL адресите, ние често пренаписваме пътя на крайните точки на сървърите на задните сървъри. Можем да направим това с pathRewrite.

Нека разберем опцията pathRewrite. Например, нашият резервен URL / api / настройки е променен на / api / app / settings и искаме да тестваме в разработката, преди да премине към производството. Можем да постигнем това с опцията pathRewrite като по-долу.

Така че, ние пренаписваме / api / настройка на / api / app / настройки и / api / потребителите към / потребители.

Ето изхода на конзолата, докато стартирате приложението.

ъглови прокси пътища за пренаписване на URL адреси

Множество записи в приложението към една крайна точка на API

Понякога имаме множество модули с услуги в нашето приложение. Може да имаме сценарий, при който множество записи или услуги ще извикат една и съща крайна точка на API.

В този случай трябва да определим proxy.config.js вместо proxy.config.json. Не забравяйте да добавите това към angular.json.

angular.json

Множество записи в приложението с множество крайни точки

Видяхме как да дефинираме няколко записа към една и съща крайна точка. Нека разгледаме няколко записа към сценария с множество крайни точки.

прокси за множество API

Например имаме три API, работещи на портове 3700, 3800 и 3900 и вашето приложение трябва да говори с тези API.

Всичко, което трябва да добавим множество записи към proxy.config.json. Ето конфигурацията за тази настройка и трябва да се уверим, че всички API-и работят на тези портове за успешна комуникация.

резюме

  • В Angular проксито се използва най-вече в средата за разработка, за да се улесни комуникацията между сървъра и потребителския интерфейс.
  • Трябва да имаме задния сървър и потребителски интерфейс, работещ на различни портове.
  • Proxy.config.json е файлът, който съхранява цялата информация относно резервните API URL адреси.
  • Трябва да се уверим, че Angular App и Backends работят на различни портове за успешна комуникация.
  • Има два начина да конфигурирате един е да добавите в angular.json, а друг е да добавите прокси-конфигурационен флаг към стартовия скрипт.
  • Можем да пренапишем пътя с опцията pathRewrite.
  • Можем да проксираме множество записи в един API за резервни копия с proxy.config.js.
  • Можем също да проксираме множество записи към множество пакети.

Вижте моделите на комуникация в Angular и разберете колко начини можете да комуникирате в Angular.

Можете да добавите персонализирани матчери в тестване на единици Angular. Разберете тук как

Благодаря ви за четенето.