Как настроить nginx на отдачу статичных файлов из разных папок?

Question

[Boris007]

Есть сервер, который отдает index.html
Но есть еще куча css и картинок в разных директориях
Как настроить отдачу любых типов изображений из папок src/images/slider, src/images/svg, src/images/all
И статичных css и js в src/style/common/file.css, src/style/components/file.css, src/js/loader/index.js
В общем автоматический искал пути по папкам, которые приходят от html

Comments

[Wexter]

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

try_files

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

Но что мешает указывать правильные пути?

Answer 1

[Максим Федоров]

listen 80;
server_name site.local;
root /src;

location / {
        try_files $uri /index.html$is_args$args;
    }

Отдает src/index.html, если по запросу не найден файл в /src папке

например:
/images/foo.jpg -> картинку (если лежит в src/images/foo.jpg )
/maks/foo.jpg -> картинку (если лежит в src/maks/foo.jpg )
/blablabla/foo.jpg -> /index.html (если НЕ лежит в src/blablabla/foo.jpg или даже нет папки src/blablabla)
/index.html -> /index.html

Comments

[Boris007]

спасибо!

[Boris007]

Подскажи пожалуйста, как расшифровывается try_files $uri /index.html$is_args$args?

[Максим Федоров]

Boris007,

try(пробуем) files(отдать файлы) по урлу $uri,
и дефолтное значение, если файла нет
в данном случае /index.html$is_args$args (то есть index.html отдаем, но не забываем по аргументы)

[Boris007]

Максим Федоров, а для чего нам возвращать что-то, если нет файла?
Можно просто ничего не отправлять в таком случае?

[Максим Федоров]

Boris007, это нужно, чтобы роутинг серверный был или фронтовый
почти всегда нужно или то или другое или оба сразу

пример:

domain.com/imgs/foo.jpg — отдается файл, тк есть такой и нжинкс нашел его
domain.com/pages/123 — такого файла нет, но отркывается страница с id = 123, сами данные обрабатываеются на пхп, джава, пайтон или го сервером (или бог весть каком еще), просто запрос не прошел try_files и был проксирован на сервер (в примере ниже на index.php), а там приложение разрулило все, что /pages/ и что id=123 и отработала вся логика приложения

в таком случае настрйока сервера была бы такой примерно

location / {
        try_files $uri /index.php$is_args$args;
    }

    location ~ ^/index\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;

        # тут всякие настройки проксирвоания запроса в пхп

        internal;
    }

[Максим Федоров]

если нжинкс у нас только для фронтенда, для SPA, то отдается на все запросы index.html (кроме файлов) и там уже роутинг реакта или вью или ангуляра отрабатывает (js руотинг, который и подключен в этом index.html)

[Boris007]

Максим Федоров, понял, т.е. для статики я вообще могу указать try_files $uri и всё?
А если у меня появится страница, где нет такого файла с 123, но у нас страница должна обработаться, то тут уже

location /user {
        try_files $uri /user.php$is_args$args;
}

Верно?

location ~ ^/user-list\.js(/|$) {
        и здесь уже делать запрос на node js сервер для обработки по апи loselhost/user-list
}

Так?

[Максим Федоров]

нет, так не делают, есть такой паттерн фронт-конроллер, и он в 100% случаях

location / {
        try_files $uri /index.php$is_args$args;
    }

    location ~ ^/index\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;

        # тут всякие настройки проксирвоания запроса в пхп, настройки посомтрите в интернетах

        internal;
    }

отправляете на index.php — это одна точка входа, не надо делать большей одной точки выхода в приложение
то есть на этом заканчивается настройка сервера, далее работаете в пхп приложении

вход в приложение в index.php, там разбираете урл (через роутер фреймворка или сампоисом) и согласно урлу и логики обрабатываете запрос

если у вас больше одного приложения и надо на node.js часть урлов разбирать, то да — прописываете точки входа в nginx как вы выше сделали

[Максим Федоров]

Вот почти готовый конфиг (полностью готовый для дев разработки)

server {
    listen 443 ssl;

    index index.html;
    root /app;

    ssl on;
    ssl_certificate /etc/nginx/ssl/ssl.pem;
    ssl_certificate_key /etc/nginx/ssl/ssl.key;

    server_name site.local;

    # golang api приложение 
    location ~ ^/api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://api:8001;
    }


    # golang приложение для работы с файлми в AWS хранилище
    location ~ ^/files {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://media:8002;
    }

    # node js приложение для вебсокетов
    location ~ ^/ws {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Real-IP $remote_addr;

        proxy_pass http://ws:8003;
    }

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

Вот эти запросы пойдут в приложение на голанге для все /api роутов
GET site.local/api/users
GET site.local/api/users/124
POST site.local/api/users/124

Вот эти запросы пойдут в приложение на ноде для websocket
site.local/ws/dsbh43-fd54e-45dg-54

Вот эти запросы пойдут в приложение на го для работы с файлами
site.local/files/1111

Вот эти запросы получат index.html с фронтендом (у меня ангуляр, но тут не важно, что там в JS)
site.local/pages/11
site.local/pages
site.local/admin/settings
site.local/assets/styles.main.css — реальный файл в сервисе, где вертится nginx, там index.html и собранный фронтенд с файлами js/css
....

api:8001 — это хост в докере c названием сервиса api с открытым портом 8001 внутри докер-сети

[Boris007]

Максим Федоров, спасибо огрмоное!