В своей предыдущей статье я рассказывал о настройке серверного прокси с помощью webpack dev-server для angular CLI-приложения в среде разработки. На этот раз я расскажу о настройке обратного прокси для вызовов API для приложения angular с серверной частью Node.js на сервере Nginx.

В среде разработки базовый URL-адрес приложения Angular - http: // localhost: 4200, а URL-адрес серверной части Node.js - http: // localhost: 3000. и URL-адреса API-интерфейсов начинаются с http: // localhost: 3000 / api. С прокси на стороне сервера, который мы настроили с помощью webpack dev-server, мы можем вызывать эти API с URL-адресами, начинающимися с http: // localhost: 4200 / api .

Когда мы перемещаем приложение на производственный сервер Nginx, базовый URL-адрес приложения Angular будет https://yourdomain.com, и мы хотим вызывать серверные API через URL-адреса, начинающиеся с Https://vashdomen.com/api. Но как мы можем это сделать, ведь использовать webpack dev-server на производственном сервере - не лучшая идея. К счастью, мы можем добиться этого, настроив Nginx в качестве обратного прокси-сервера.

Но что такое обратный прокси-сервер? Обратный прокси-сервер - это тип прокси-сервера, который обычно направляет клиентские запросы на соответствующий внутренний сервер. В нашем случае обратный прокси-сервер должен направлять клиентские запросы, начиная с URL: https://yourdomain.com/api до http: // localhost: 3000 / api .

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

Хорошо, я полагаю, у вас есть интерфейсное приложение Angular, работающее на сервере Nginx. Пришло время настроить обратный прокси.

Давайте откроем файл / etc / ngix / sites-available / default, чтобы обновить конфигурацию Nginx.

В блоке server в этом файле нам нужно добавить еще один блок location со следующим кодом:

location /api/ {
  proxy_pass http://localhost:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
}

С этим изменением конфигурации доступ к URL-адресам, начинающимся с https://yourdomains.com/api через веб-браузер, отправит запрос на server.js (файл сервера Node.js), прослушивая порт 3000 на локальном хосте, и наши API могут быть вызваны без каких-либо проблем.