Как настроить проксирование nginx.conf на фронтенд?

Question

[Ilya_00]

Добрый день!
Настраиваю 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/;
    }
}

В данной конфигурации все работает исправно, открываются реализованные страницы через 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/;
    }
}

В данной конфигурации, реализованные страницы 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" "-"

Буду благодарен за любой совет, благодарю!

Comments

[Drno]

Если оставить только бэк, то всё работает?

[Ilya_00]

Drno, да, в п.1 описано

[Valentin Barbolin]

доступность через 3000-й порт контейнера сохраняется.

Покажи-ка свой compose

[Ilya_00]

Valentin Barbolin,

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:

[Lynn «Кофеман»]

Сильно подозреваю что надо настраивать ваш фронтенд.
Откройте в браузере консоль и посмотрите на ошибки.
Вангую ошибки CORS потому что фронт отдаёт html со ссылками на скрипты/стили на порту 3000.

[Ilya_00]

Lynn «Кофеман»,
Только такие, CORS сразу устранил:

[Lynn «Кофеман»]

P.S. вместо alias лучше использовать root если последняя часть alias совпадает с location

server {
    listen 80;
    server_name localhost;
    root /app/workograd;

    location / {
        # proxy to frontend
        ...
    }
    location /api/ {
        # proxy to backend
        ...
    }

    location /static/ {
        # ничего не нужно, /static/ допишется к root выше и получится то что надо.
    }
    location /media/ {
        # ничего не нужно
    }
}

[Lynn «Кофеман»]

Ilya_00, ну так 304 это не ошибка
Выясняйте куда у вас пропал bundle.js

[Valentin Barbolin]

Ilya_00, При запросе на 127.0.0.1/account в логе npm ничего нет?

[Ilya_00]

Lynn «Кофеман», благодарю!
статику фронтенд-приложения дополнительно подключил, все получилось!