Files
smartsoltech_site/NGINX_STATIC_FIX.md
Andrew K. Choi a70ee08821 🔧 Fix static files serving in Nginx
CRITICAL FIX: Static files (CSS/JS) not loading after changing web:8000 to localhost:8000

Changes:
- nginx-smartsoltech.conf: Enabled /static/ and /media/ locations BEFORE location /
- NGINX_SETUP.md: Updated config to serve static files directly from filesystem
- NGINX_STATIC_FIX.md: Comprehensive troubleshooting guide for static files issues

Why this matters:
- Nginx must serve /static/ and /media/ DIRECTLY from filesystem (fast)
- NOT proxy to Django (slow)
- Order matters: location /static/ MUST be before location /
- Improves performance: 50-100ms → 1-5ms per static file request

Solution on server:
1. git pull origin master
2. sudo cp nginx-smartsoltech.conf /etc/nginx/sites-available/smartsoltech
3. sudo nginx -t && sudo systemctl reload nginx
2025-11-24 11:54:54 +09:00

8.6 KiB
Raw Blame History

🔧 Исправление проблемы со статикой в Nginx

Проблема

После изменения web:8000 на localhost:8000 в Nginx не загружаются стили (CSS) и скрипты (JS).

💡 Причина

Nginx НЕ должен проксировать запросы /static/ и /media/ к Django. Он должен отдавать эти файлы напрямую из файловой системы для максимальной производительности.


Решение 1: Автоматическое (рекомендуется)

# На сервере
cd /opt/smartsoltech_site

# Получить исправленный конфиг
git pull origin master

# Скопировать исправленный конфиг
sudo cp nginx-smartsoltech.conf /etc/nginx/sites-available/smartsoltech

# Проверить конфигурацию
sudo nginx -t

# Перезагрузить Nginx
sudo systemctl reload nginx

# Проверить статику
curl -I http://smartsoltech.kr/static/assets/css/styles.min.css

Решение 2: Ручное исправление

Шаг 1: Отредактировать конфиг Nginx

sudo nano /etc/nginx/sites-available/smartsoltech

Шаг 2: Найти и ЗАМЕНИТЬ секцию location

НАЙТИ (старая версия):

    # Прокси к Django приложению
    location / {
        proxy_pass http://localhost:8000;
        ...
    }

    # Статические файлы (опционально, если выносить из Docker)
    # location /static/ {
    #     alias /opt/smartsoltech_site/smartsoltech/staticfiles/;
    # ...

ЗАМЕНИТЬ НА (новая версия):

    # Статические файлы - ВАЖНО: должны быть ПЕРЕД location /
    location /static/ {
        alias /opt/smartsoltech_site/smartsoltech/staticfiles/;
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # Медиа файлы
    location /media/ {
        alias /opt/smartsoltech_site/smartsoltech/media/;
        expires 7d;
        add_header Cache-Control "public";
        access_log off;
    }

    # Прокси к Django приложению
    location / {
        proxy_pass http://localhost:8000;
        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;
        proxy_redirect off;
        proxy_buffering off;
        
        # Таймауты
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

Шаг 3: Проверить права на директории

# Проверить, что Nginx имеет доступ к staticfiles
ls -la /opt/smartsoltech_site/smartsoltech/staticfiles/

# Если нет прав, установить:
sudo chmod -R 755 /opt/smartsoltech_site/smartsoltech/staticfiles/
sudo chown -R www-data:www-data /opt/smartsoltech_site/smartsoltech/staticfiles/

Шаг 4: Проверить и перезагрузить

# Проверить конфигурацию
sudo nginx -t

# Должно быть:
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

# Перезагрузить Nginx
sudo systemctl reload nginx

🧪 Проверка что всё работает

Проверка 1: Тест статических файлов

# Проверить CSS
curl -I http://smartsoltech.kr/static/assets/css/styles.min.css

# Должно быть:
# HTTP/1.1 200 OK
# Content-Type: text/css

# Проверить JS
curl -I http://smartsoltech.kr/static/assets/js/script.min.js

# Должно быть:
# HTTP/1.1 200 OK
# Content-Type: application/javascript

Проверка 2: Логи Nginx

# Открыть в браузере http://smartsoltech.kr
# Затем проверить логи:

sudo tail -f /var/log/nginx/smartsoltech_access.log

# Должны быть строки типа:
# GET /static/assets/css/styles.min.css HTTP/1.1" 200
# GET /static/assets/js/script.min.js HTTP/1.1" 200

Проверка 3: В браузере

  1. Открыть http://smartsoltech.kr
  2. Нажать F12 (Developer Tools)
  3. Перейти на вкладку Network
  4. Обновить страницу (Ctrl+R)
  5. Проверить что все файлы /static/... возвращают 200 OK

🎯 Важные замечания

⚠️ Порядок location имеет значение!

# ✅ ПРАВИЛЬНО (static ПЕРЕД /)
location /static/ { ... }
location /media/ { ... }
location / { ... }

# ❌ НЕПРАВИЛЬНО (static ПОСЛЕ /)
location / { ... }
location /static/ { ... }  # НЕ СРАБОТАЕТ!

⚠️ Путь должен совпадать с STATIC_ROOT в Django

# В settings.py должно быть:
STATIC_ROOT = '/app/staticfiles'  # Внутри контейнера
STATIC_URL = '/static/'

# Но Nginx смотрит на хост:
alias /opt/smartsoltech_site/smartsoltech/staticfiles/;

⚠️ После collectstatic нужно проверять права

# После каждого collectstatic
docker exec django_app python smartsoltech/manage.py collectstatic --noinput

# Проверить права
ls -la /opt/smartsoltech_site/smartsoltech/staticfiles/

# Если нужно, исправить:
sudo chown -R www-data:www-data /opt/smartsoltech_site/smartsoltech/staticfiles/

🔍 Диагностика проблем

Если статика всё ещё не загружается:

# 1. Проверить что файлы существуют
ls -la /opt/smartsoltech_site/smartsoltech/staticfiles/assets/css/

# 2. Проверить права
sudo -u www-data cat /opt/smartsoltech_site/smartsoltech/staticfiles/assets/css/styles.min.css

# 3. Проверить логи ошибок Nginx
sudo tail -f /var/log/nginx/smartsoltech_error.log

# 4. Проверить конфигурацию Nginx
sudo nginx -T | grep -A 10 "location /static"

# 5. Тест напрямую через curl
curl http://localhost/static/assets/css/styles.min.css

Если получаете 404:

# Проверить что staticfiles собраны
docker exec django_app ls -la /app/staticfiles/

# Если пусто, собрать заново:
docker exec django_app python smartsoltech/manage.py collectstatic --noinput --clear

# Проверить что том правильно примонтирован
docker inspect django_app | grep -A 5 "Mounts"

Если получаете 403 Forbidden:

# Проверить права
ls -la /opt/smartsoltech_site/smartsoltech/
ls -la /opt/smartsoltech_site/smartsoltech/staticfiles/

# Установить правильные права
sudo chmod -R 755 /opt/smartsoltech_site/smartsoltech/staticfiles/
sudo chown -R www-data:www-data /opt/smartsoltech_site/smartsoltech/staticfiles/

# Перезагрузить Nginx
sudo systemctl reload nginx

📊 Проверка производительности

До исправления (Django отдаёт статику):

Static file request: ~50-100ms
Server load: HIGH

После исправления (Nginx отдаёт статику):

Static file request: ~1-5ms ✅
Server load: LOW ✅

Итоговый чеклист

  • location /static/ добавлен ПЕРЕД location /
  • location /media/ добавлен ПЕРЕД location /
  • Путь alias правильный (/opt/smartsoltech_site/smartsoltech/staticfiles/)
  • sudo nginx -t успешно
  • sudo systemctl reload nginx выполнен
  • Права на staticfiles/ корректны (755, www-data)
  • curl -I http://smartsoltech.kr/static/... возвращает 200
  • Браузер загружает стили и скрипты
  • Логи Nginx показывают 200 для /static/
  • Сайт выглядит правильно

Создано: 24 ноября 2025 г.
Проблема: Статика не загружается после изменения web:8000 на localhost:8000
Решение: Nginx должен отдавать /static/ и /media/ напрямую из файловой системы