Nginx не обслуживает CSS

На чтение 3 мин Опубликовано 22.09.2024

Вопрос или проблема

это моя текущая конфигурация Nginx, и моя проблема в том, что страница 404 не отображает CSS. Она отображает CSS, если я помещаю файлы CSS в /var/www/testdoamincom, но в любом другом случае не загружает их. Есть ли способ держать мою страницу 404error и её CSS файлы отдельно от остальных файлов сайта, но при этом получить доступ к CSS?

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl http2;
    listen [::]:443 ssl http2; 
    server_name test.domain.com;
    root /var/www/testdoamincom;
    index index.php index.html index.htm;

    # Начало конфигурации SSL
    ssl_certificate /etc/ssl/certs/cloudflare_mydomain.com.pem;
    ssl_certificate_key /etc/ssl/private/cloudflare_mydomain.com.pem;
    ssl_client_certificate /etc/ssl/certs/origin-pull-ca.pem;
    ssl_verify_client on;
    client_max_body_size 100M;
    # Конец конфигурации SSL  

    # Начало страниц ошибок
    location / {
        try_files $uri $uri/ =404;
    }

    error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 421 422 423 424 425 426 428 429 431 451 500 501 502 503 504 505 506 507 508 510 511 /404.html;

    location = /404.html {
        root /var/www/html;
    } 
    # Конец страниц ошибок

    location ~ \.php$ {
         include /etc/nginx/mime.types;
         include snippets/fastcgi-php.conf;
         fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         include fastcgi_params;
    }
}

Вот исправление;

location ~* \.(js|jpg|png|css)$ {
    root /path/to/your/css/files;
    expires 30d;
}

Ответ или решение

Чтобы корректно обслуживать CSS-файлы на вашей странице ошибок 404, вам необходимо внести изменения в вашу конфигурацию Nginx. В текущем варианте конфигурации, когда запрашивается файл CSS, сервер не может его найти, если он не находится в директории /var/www/testdoamincom.

Вы можете настроить отдельное местоположение для обработки файлов CSS (а также других статических файлов, таких как JavaScript и изображения), указывая на нужную директорию. Предлагаю следующий вариант конфигурации:

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl http2;
    listen [::]:443 ssl http2; 
    server_name test.domain.com;
    root /var/www/testdoamincom;
    index index.php index.html index.htm;

    # SSL Configuration Start
    ssl_certificate /etc/ssl/certs/cloudflare_mydomain.com.pem;
    ssl_certificate_key /etc/ssl/private/cloudflare_mydomain.com.pem;
    ssl_client_certificate /etc/ssl/certs/origin-pull-ca.pem;
    ssl_verify_client on;
    client_max_body_size 100M;
    # SSL Configuration End  

    # Настройка для статических файлов
    location ~* \.(css|js|jpg|png)$ {
        root /path/to/your/static/files;  # Укажите путь к вашей директории со статическими файлами
        expires 30d;  # Кэширование на 30 дней
    }

    # Обработчик ошибок
    error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 421 422 423 424 425 426 428 429 431 451 500 501 502 503 504 505 506 507 508 510 511 /404.html;

    location = /404.html {
        root /var/www/html;  # Здесь находится ваш HTML файл для ошибки 404
    }

    # Основное место для обработки запросов
    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
         include /etc/nginx/mime.types;
         include snippets/fastcgi-php.conf;
         fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         include fastcgi_params;
    }
}

Внесённые изменения:

Добавлено новое местоположение для статических файлов, которое обрабатывает .css, .js, .jpg, .png и указывает на директорию с вашими CSS и другими статическими файлами. Убедитесь, что путь /path/to/your/static/files ведёт на нужное место, где располагаются ваши стили.
Опция expires 30d; позволит установить кэширование для этих файлов на 30 дней, что ускорит загрузку вашего сайта.

После внесения изменений не забудьте проверить конфигурацию на наличие ошибок командой:

sudo nginx -t

Если всё в порядке, перезагрузите Nginx для применения изменений:

sudo systemctl reload nginx

Теперь ваш сервер Nginx должен корректно обрабатывать CSS-файлы даже при отображении страницы ошибки 404, что позволит сохранить изоляцию ваших статических файлов от других частей сайта.