Если ты читаешь эту статью, значит, уже освоил базовую настройку Nginx и знаешь, как обслуживать статические сайты. А теперь представь: у тебя есть не просто статический сайт, а полноценное веб-приложение с фронтендом и бекендом. Например, Vue.js на клиенте и FastAPI на сервере. Как соединить это всё вместе?

Ответ – использовать Nginx как обратный прокси-сервер (reverse proxy). Сегодня мы разберём, как это работает, и настроим Nginx для проксирования запросов от клиента к серверу.

Что такое обратный прокси?

Обратный прокси – это посредник между клиентом (браузером пользователя) и бекенд-сервером (например, FastAPI или Node.js). Когда клиент отправляет запрос, он сначала попадает в Nginx, который:

• Проверяет запрос.
• Перенаправляет его на нужный бекенд.
• Возвращает ответ клиенту.

Преимущества такой схемы:

• Безопасность. Клиент не знает, где находится твой бекенд.
• Балансировка нагрузки. Nginx может распределять запросы между несколькими серверами.
• Кэширование. Nginx может кэшировать ответы от бекенда для ускорения работы.

Схема работы

Допустим, у тебя есть фронтенд на Vue.js, раздаваемый через Nginx, и бекенд на FastAPI, работающий на локальном сервере http://localhost:8000.

Поток запроса:

1. Пользователь открывает страницу.
2. Браузер делает запрос, например, GET /api/data.
3. Nginx перенаправляет этот запрос на http://localhost:8000/api/data.
4. Ответ от FastAPI возвращается клиенту.

Шаг 1: Настраиваем бекенд

Для примера давай настроим сервер на FastAPI. Создай файл main.py:

from fastapi import FastAPI  

app = FastAPI()  

@app.get("/api/data")  
def get_data():  
    return {"message": "Hello from FastAPI!"}

Запусти сервер:

uvicorn main:app --host 0.0.0.0 --port 8000

Теперь бекенд работает на http://localhost:8000. Попробуй открыть в браузере http://localhost:8000/api/data – ты должен увидеть JSON с сообщением.

Шаг 2: Настраиваем Nginx

Теперь займёмся проксированием. Открой файл конфигурации Nginx (например, /etc/nginx/sites-available/default) и добавь следующий блок:

server {  
    listen 80;  
    server_name mysite.local;  

    root /var/www/mysite;  
    index index.html;  

    location / {  
        try_files $uri $uri/ =404;  
    }  

    location /api/ {  
        proxy_pass http://localhost:8000;  
        proxy_set_header Host $host;  
        proxy_set_header X-Real-IP $remote_addr;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    }  
}

Разбор:

• location /api/ – определяет, что все запросы, начинающиеся с /api/, будут проксироваться.
• proxy_pass http://localhost:8000 – указывает, куда перенаправлять запросы.
• proxy_set_header – передаёт заголовки, такие как Host и X-Real-IP, для корректной обработки запросов.

Перезапусти Nginx:

sudo systemctl restart nginx

Шаг 3: Тестируем

Теперь открой в браузере http://mysite.local/api/data. Если всё настроено правильно, ты должен увидеть ответ от FastAPI:

{"message": "Hello from FastAPI!"}

Шаг 4: Защищаем бекенд

Чтобы защитить сервер, ограничим доступ к FastAPI только для Nginx:

uvicorn main:app --host 127.0.0.1 --port 8000

Изменим конфигурацию Nginx:

proxy_pass http://127.0.0.1:8000;

Дополнительные настройки

Балансировка нагрузки

upstream backend {  
    server 127.0.0.1:8000;  
    server 127.0.0.1:8001;  
}  

location /api/ {  
    proxy_pass http://backend;  
}

Кэширование ответов

location /api/ {  
    proxy_pass http://localhost:8000;  
    proxy_cache my_cache;  
    proxy_cache_valid 200 10m;  
}

Зона кэша:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;

Задание для самостоятельной практики

• Настрой Nginx как обратный прокси для своего бекенда.
• Проверь работу прокси через браузер или Postman.
• Настрой балансировку нагрузки между двумя серверами.
• Попробуй включить кэширование и оцени влияние на скорость.

В следующей статье мы поговорим о настройке HTTPS в Nginx.