Как правилньно настроить nginx для отображения статики из бэка?

Question

[Александр Иванов]

бэк на nestjs, фронт на nextjs, все приложение я задеплоил на vps сервер. в моем приложении есть статические изображения которые успешно грузялся из фронта из папки /public, но так же есть аватары и логотипы пользователей которые успешно загружаются на бэк в директорию /static однакокогда на странице сайта выводится список пользователей то изображения пользователей, которые находятся на бэке при загрузке проходят с ошибкой 400, однако изображения есть, их формат webp.
как правильно настроить nginx? или если проблема не в этом то в чем может быть? может кто то сталкивался

Comments

[Adamos]

А тот неправильный конфиг nginx, который у вас сейчас, отвечающим предлагается угадать?

[Александр Иванов]

Adamos, а тут разве не ванги? ))

server {
    listen 80;
    server_name my_site;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name my_site www.my_site;

    ssl_certificate /fullchain.pem;
    ssl_certificate_key /privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
        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;
    }

    location /_next/image {
        proxy_pass http://localhost:3000;
        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 /api/ {
        proxy_pass http://127.0.0.1:4000/api/;
        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;
        add_header X-Debug "Request passed through Nginx";
    }
location /developers/ {
        proxy_pass http://localhost:4000/developers/;
        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/ {
    root /root/my_site/server/src; - ситуацию не спасло
    try_files $uri $uri/ =404;
}

    add_header X-Frame-Options DENY;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options nosniff;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

    client_max_body_size 50M;
}

[Everything_is_bad]

Александр Иванов, теперь показывай сам запрос который выдает 400, а так же запись в error log nginx. Ну и сразу, ну почему опять всё делается от юзера root и его каталога, из всех утюгов вещают, не делайте так.

[Александр Иванов]

запрос: https://my_site.ru/_next/image?url=/static/c9d9b0f...
ну почему опять всё делается от root - а от куда?
log:
207.180.240.203 - - [10/Mar/2025:18:55:39 +0100] "GET /static/e1cd23c7-5162-439c-9f69-65831c760496/7a9e8912-271d-43c1-a019-45559d1d0bfa.webp HTTP/1.1" 500 32 "https://my_site.ru/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0"
207.180.240.203 - - [10/Mar/2025:18:55:39 +0100] "GET /static/e1cd23c7-5162-439c-9f69-65831c760496/7a9e8912-271d-43c1-a019-45559d1d0bfa.webp HTTP/1.1" 500 32 "https://my_site.ru/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0"
93.35.6.25 - - [10/Mar/2025:18:55:39 +0100] "GET /static/e1cd23c7-5162-439c-9f69-65831c760496/7a9e8912-271d-43c1-a019-45559d1d0bfa.webp HTTP/1.1" 500 32 "https://my_site.ru/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0"
154.81.156.7 - - [10/Mar/2025:18:56:37 +0100] "GET / HTTP/1.1" 200 409 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36 Edg/90.0.818.46"

[Everything_is_bad]

Александр Иванов,

ну почему опять всё делается от root - а от куда?

/)_-)

и я написал про error log, там как раз будет причина статус кода 500

[Александр Иванов]

/)_-) - не понимаю что имеется ввиду

Everything_is_bad, 2025/03/10 19:26:05 [alert] 312685#312685: 768 worker_connections are not enough

[Everything_is_bad]

Александр Иванов, ну разбирайся тогда что такое error log

[Александр Иванов]

Everything_is_bad, sudo tail -f /var/log/nginx/error.log - разве не эта команда?

[Everything_is_bad]

Александр Иванов, да, только там должна быть причина 500 ошибки, либо ты показываешь не всё, либо у тебя error log в другом месте

[Александр Иванов]

2025/03/10 18:55:37 [alert] 312686#312686: 768 worker_connections are not enough
2025/03/10 19:26:05 [alert] 312685#312685: 768 worker_connections are not enough
2025/03/10 19:26:15 [alert] 312688#312688: 768 worker_connections are not enough
2025/03/10 19:28:45 [error] 317041#317041: *87036 connect() failed (111: Connection refused) while connecting to upstream, client: 93.35.6.25, server: my_site.ru, request: "GET /static/e1cd23c7-5162-439c-9f69-65831c760496/7a9e8912-271d-43c1-a019-45559d1d0bfa.webp HTTP/1.1", upstream: "[::1]:4000/e1cd23c7-5162-439c-9f69-65831c760496/7a...", host: "my_site.ru", referrer: "https://my_site.ru/"
2025/03/10 19:28:54 [error] 317040#317040: *87135 connect() failed (111: Connection refused) while connecting to upstream, client: 207.180.240.203, server: my_site.ru, request: "GET /static/c9d9b0f8-80ce-4687-8daa-35a7eab22bc4/6c946b81-46a1-4efc-bc04-6ee694572b1b.webp HTTP/1.1", upstream: "[::1]:4000/c9d9b0f8-80ce-4687-8daa-35a7eab22bc4/6c...", host: "my_site.ru", referrer: "https://my_site.ru/"

[Everything_is_bad]

Александр Иванов, еще бы нормально показывал логи, оберачивай их в тег code, ну вот тебе там пишут что запрос /static/ всё таки проксируется на 4000 порт локалхоста, а не в файлах ищется

[Александр Иванов]

Everything_is_bad, если я Вас верно понимаю то мне и это не помогло

location /static/ {
    proxy_pass http://localhost:4000/;
    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;
}

[Everything_is_bad]

Александр Иванов, ты разберись как у тебя доступен /static/ сначала ты пишешь, что через файлы, потом показываешь error log, где идет ошибка, потому что не через файлы сделаны, а через проксирование, теперь показываешь настройки именно этого ошибочного проксирования

[Александр Иванов]

Everything_is_bad, у меня весь проект находится на одном сервере, в одной директории, но бэк в каталоге server где и находятся все загружаемые пользователями файлы (в папку /static) а фронт в каталоге front бек проксируется на порт 4000, выше там видно в настройке но при загрузке изображений фронтом с бэка ошибка 400

[Александр Иванов]

Everything_is_bad, итак, я разобрался, нашел решение, большое спасибо за оперативные ответы! решение:

location /static/ {
    proxy_pass http://127.0.01:4000/static/;
    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;
}

[Петровский]

Александр Иванов, смысл статика в том, чтобы его подавал сам nginx, мимо веб-приложения

[Михаил Ливач]

Петровский, у топикстартера там ещё ресайз динамический, судя по параметрам. Но в целом я с Вами согласен.

[Михаил Ливач]

Александр Иванов, оффтопик:
сделайте ещё такое:

server {
    listen 80;
    server_name my_site;
    return 301 https://$host$request_uri;
}

server {
    listen 80;
    server_name www.my_site;
    return 301 https://my_site$request_uri;
}

server {
    listen 443 ssl;
    server_name www.my_site;

    ssl_certificate /fullchain.pem;
    ssl_certificate_key /privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
   return 301 https://my_site$request_uri;
}

server {
    listen 443 ssl;
    server_name my_site;

    ssl_certificate /fullchain.pem;
    ssl_certificate_key /privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
    # дальше как было

Answer 1

[Hichnick]

Попробуйте следующую конфигурацию nginx для статики, которая находится на бэкенде:

server {
    listen 80;
    server_name yourdomain.com;

    # Отдача статики, загруженной на бек
    location /static/ {
        alias /полный/путь/до/backend/static/;
        try_files $uri $uri/ =404;
    }

    # Проксирование остальных запросов (например, на фронтенд NextJS)
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Если после такой настройки проблема сохраняется, проверьте логи nginx и NestJS — возможно, ошибка 400 генерируется на уровне приложения из-за неверных URL или заголовков запроса.