В своей предыдущей статье я рассказывал о настройке серверного прокси с помощью 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 могут быть вызваны без каких-либо проблем.