Как настроить проксирование nginx.conf на фронтенд?
Добрый день!
Настраиваю Nginx для совместной работы backend и frontend приложений своего проекта, сервисы развернуты через Docker.
1. Подключил конфигурационный файл nginx.conf, задав проксирование на backend по location = /api/, указал необходимые параметры заголовков:
upstream backend { server backend:8000; } server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /app/workograd/static/; } location /media/ { alias /app/workograd/media/; } } |
upstream backend { server backend:8000; } server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /app/workograd/static/; } location /media/ { alias /app/workograd/media/; } }
В данной конфигурации все работает исправно, открываются реализованные страницы через 3000 порт (localhost:3000/account/, к примеру), все необходимые ручки backend-стороны отвечают, проксируясь сперва на 80-й порт nginx-a, а после на 8000-й backend приложения.
2. Далее, пытаюсь подключить location "/" для frontend-части:
upstream backend { server backend:8000; } upstream frontend { server frontend:3000; } server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location / { proxy_pass http://frontend; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /app/workograd/static/; } location /media/ { alias /app/workograd/media/; } } |
upstream backend { server backend:8000; } upstream frontend { server frontend:3000; } server { listen 80; server_name localhost; location /api/ { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location / { proxy_pass http://frontend; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /app/workograd/static/; } location /media/ { alias /app/workograd/media/; } }
В данной конфигурации, реализованные страницы front-приложения по пути localhost/account/ (и других) не открываются, при этом, доступность через 3000-й порт контейнера сохраняется.
В чем может быть проблема? Возможно что-то элементарное упускаю.
Nginx отрисовывает подобные логи (кэш пробовал чистить):
project-nginx-1 | 171.22.0.1 - - [14/Mar/2024:18:32:17 +0000] "GET /login/ HTTP/1.1" 304 0 "127.0.0.1/account" "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36" "-"
Буду благодарен за любой совет, благодарю!
Дополнительно:
Если оставить только бэк, то всё работает?
доступность через 3000-й порт контейнера сохраняется.
Покажи-ка свой compose
version: "3.3" services: db: restart: always image: postgres:14.6-alpine ports: - "15163:5432" env_file: - ./backend/.env backend: build: context: ./backend ports: - "8000:8000" command: > sh -c " cd ./workograd && python manage.py collectstatic --noinput && python manage.py migrate && gunicorn workograd.wsgi:application -b 0.0.0.0:8000 --max-requests 10000 --log-level info --access-logfile - --error-logfile - " env_file: - ./backend/.env volumes: - static_volume:/app/workograd/static - media_volume:/app/workograd/media depends_on: - db frontend: build: ./frontend restart: always ports: - "3000:3000" command: npm start depends_on: - backend nginx: build: context: ./nginx ports: - "80:80" volumes: - static_volume:/app/workograd/static - media_volume:/app/workograd/media depends_on: - backend volumes: static_volume: media_volume: |
version: "3.3" services: db: restart: always image: postgres:14.6-alpine ports: - "15163:5432" env_file: - ./backend/.env backend: build: context: ./backend ports: - "8000:8000" command: > sh -c " cd ./workograd && python manage.py collectstatic --noinput && python manage.py migrate && gunicorn workograd.wsgi:application -b 0.0.0.0:8000 --max-requests 10000 --log-level info --access-logfile - --error-logfile - " env_file: - ./backend/.env volumes: - static_volume:/app/workograd/static - media_volume:/app/workograd/media depends_on: - db frontend: build: ./frontend restart: always ports: - "3000:3000" command: npm start depends_on: - backend nginx: build: context: ./nginx ports: - "80:80" volumes: - static_volume:/app/workograd/static - media_volume:/app/workograd/media depends_on: - backend volumes: static_volume: media_volume:
Откройте в браузере консоль и посмотрите на ошибки.
Вангую ошибки CORS потому что фронт отдаёт html со ссылками на скрипты/стили на порту 3000.
Только такие, CORS сразу устранил:
server { listen 80; server_name localhost; root /app/workograd; location / { # proxy to frontend ... } location /api/ { # proxy to backend ... } location /static/ { # ничего не нужно, /static/ допишется к root выше и получится то что надо. } location /media/ { # ничего не нужно } } |
server { listen 80; server_name localhost; root /app/workograd; location / { # proxy to frontend ... } location /api/ { # proxy to backend ... } location /static/ { # ничего не нужно, /static/ допишется к root выше и получится то что надо. } location /media/ { # ничего не нужно } }
Выясняйте куда у вас пропал bundle.js
статику фронтенд-приложения дополнительно подключил, все получилось!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для настройки проксирования в Nginx вам потребуется отредактировать конфигурационный файл nginx.conf. Проксирование позволяет перенаправлять запросы с одного сервера на другой, что может быть полезно, например, при использовании балансировщика нагрузки или кэширования.
Вот пример того, как можно настроить проксирование в Nginx:
1. Откройте файл nginx.conf в вашем текстовом редакторе. Обычно файл находится в директории /etc/nginx/nginx.conf или /usr/local/nginx/conf/nginx.conf.
2. Найдите блок server {} для вашего сайта и добавьте следующий код:
server { listen 80; server_name example.com; location / { proxy_pass http://backend_server; # замените на адрес вашего бэкенд-сервера proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
3. Замените example.com на ваш домен, а backend_server на адрес вашего бэкенд-сервера.
4. После внесения изменений сохраните файл nginx.conf и перезапустите Nginx командой:
```
sudo systemctl restart nginx
```
Теперь все запросы, поступающие на ваш фронтенд-сервер по указанному домену, будут проксироваться на ваш бэкенд-сервер. Убедитесь, что бэкенд-сервер настроен правильно и готов принимать проксированные запросы.
Если у вас возникнут какие-либо проблемы или вопросы, не стесняйтесь задавать их здесь для получения более подробной помощи.