Что такое static files в веб-приложениях?

Static Files: статические файлы в веб-приложениях

Static files - это файлы, которые не изменяются при каждом запросе и отправляются клиенту в исходном виде. Это CSS, JavaScript, изображения, иконки, шрифты и другие активы.

Что относится к Static Files

Статические файлы (не меняются на сервере):
├── CSS           - стили (style.css, bootstrap.css)
├── JavaScript    - скрипты (app.js, jquery.js)
├── Images        - изображения (logo.png, avatar.jpg)
├── Fonts         - шрифты (roboto.woff, opensans.ttf)
├── Icons         - иконки (favicon.ico, svg иконки)
└── Other         - PDF, документы, видео

Динамические файлы (меняются на сервере):
├── HTML templates (отрендериваются с контекстом)
├── User uploads (загруженные пользователем файлы)
└── Generated content (создаётся на лету)

Static vs Media Files в Django

# settings.py

# STATIC - статические файлы приложения (неизменяемые)
STATIC_URL = '/static/'  # URL в браузере: /static/style.css
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # Где собрать все static
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # Где лежат в разработке
]

# MEDIA - файлы, загруженные пользователями (изменяемые)
MEDIA_URL = '/media/'  # URL в браузере: /media/uploads/photo.jpg
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # Где хранить на сервере

Структура проекта Django

project/
├── myapp/
│   ├── static/
│   │   └── myapp/
│   │       ├── style.css
│   │       ├── script.js
│   │       └── images/
│   │           └── logo.png
│   ├── templates/
│   │   └── myapp/
│   │       └── index.html
│   └── views.py
├── static/  (глобальные static для всего проекта)
│   ├── css/
│   │   └── global.css
│   └── js/
│       └── global.js
├── media/  (загруженные пользователями файлы)
│   └── uploads/
│       └── user_avatar.jpg
└── manage.py

Использование Static Files в HTML Template

<!-- ПЛОХО: жёсткий путь -->
<link rel="stylesheet" href="/static/style.css">
<img src="/static/logo.png">

<!-- ХОРОШО: используй тег static -->
{% load static %}
<link rel="stylesheet" href="{% static 'style.css' %}">
<img src="{% static 'logo.png' %}" alt="Logo">

Почему правильно использовать {% static %}?

• Автоматически добавляет правильный URL
• Работает даже если изменится STATIC_URL
• В production может добавить хеш для кеширования

Сборка Static Files: collectstatic

В разработке Django автоматически подаёт static из папок, но в production нужно собрать все в одно место:

# Development (автоматически)
python manage.py runserver  # Django сам подаёт static

# Production (ручная сборка)
python manage.py collectstatic --noinput
# Результат: все файлы собираются в STATIC_ROOT

# settings.py для production
STATIC_URL = '/static/'
STATIC_ROOT = '/var/www/project/staticfiles/'

# После collectstatic:
# staticfiles/
# ├── admin/
# ├── myapp/
# │   ├── style.css
# │   ├── script.js
# │   └── images/
# └── ...

Nginx: подача Static Files

В production Nginx подаёт static файлы напрямую, без Django:

# nginx.conf
server {
    listen 80;
    server_name example.com;
    
    # Статические файлы подаёт Nginx (быстро)
    location /static/ {
        alias /var/www/project/staticfiles/;
        expires 30d;  # Кешируем на 30 дней
    }
    
    # Остальное идёт в Django (через gunicorn)
    location / {
        proxy_pass http://127.0.0.1:8000;
    }
}

Оптимизация Static Files

1. Кеширование в браузере

# settings.py
if not DEBUG:
    # Кеширование на 1 год
    STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

Манифест добавляет хеш в имя файла:

style.css → style.abc123def.css

Браузер кеширует, и если содержимое не изменилось, не загружает заново.

2. Минификация и сжатие

# Минификация CSS
pip install django-compressor

# settings.py
INSTALLED_APPS = [
    'compressor',
]

{% load compress %}

{% compress css %}
<link rel="stylesheet" href="{% static 'style.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap.css' %}">
{% endcompress %}
<!-- Результат: один минифицированный файл -->

3. CDN: раздача файлов из глобальной сети

# settings.py
if not DEBUG:
    # Раздача static с CDN (CloudFront, Cloudflare)
    STATIC_URL = 'https://cdn.example.com/static/'

Media Files: загруженные пользователем файлы

# models.py
from django.db import models

class UserProfile(models.Model):
    name = models.CharField(max_length=100)
    avatar = models.ImageField(upload_to='avatars/')  # Папка в MEDIA_ROOT
    bio = models.TextField()

# После сохранения: /media/avatars/user_123.jpg

<!-- Вывод загруженного файла в template -->
<img src="{{ user.avatar.url }}" alt="Avatar">
<!-- Генерирует: <img src="/media/avatars/user_123.jpg" alt="Avatar"> -->

Проблема: выкладка на production

В разработке:

# settings.py (development)
if DEBUG:
    urlpatterns += [
        path('media/<path:path>', serve, {'document_root': MEDIA_ROOT}),
    ]

В production: Никогда не используй Django для подачи static/media!

# nginx.conf
location /static/ {
    alias /var/www/project/staticfiles/;
}

location /media/ {
    alias /var/www/project/media/;
}

Практический пример: компиляция SCSS в CSS

# Установка
pip install django-sass-loader

# settings.py
INSTALLED_APPS = [
    'sass_loader',
]

SASS_PROCESSOR_INCLUDE_DIRS = [
    os.path.join(BASE_DIR, 'static/scss'),
]

<!-- template -->
{% load sass_tags %}
<link rel="stylesheet" href="{% sass 'scss/style.scss' %}">
<!-- SCSS компилируется в CSS автоматически -->

Версионирование Static Files

Проблема: браузер кеширует старые файлы, и обновления не видны.

Решение 1: Версия в URL

<link rel="stylesheet" href="{% static 'style.css' %}?v=1.2.3">
<!-- Браузер видит новый URL, загружает заново -->

Решение 2: Хеш в имени файла (рекомендуется)

# settings.py
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

# После collectstatic:
# style.css → style.d41d8cd98f00b204.css

Проверка в разработке

# Посмотри где лежат static файлы
python manage.py findstatic style.css
# Output: Found 'style.css' here: /path/to/project/myapp/static/style.css

# Собери static локально (как в production)
python manage.py collectstatic --noinput

# Проверь, что всё скопировалось
ls staticfiles/

Чеклист для production

• STATIC_ROOT и STATIC_URL конфигурируются правильно
• Запущен python manage.py collectstatic
• Nginx/Apache настроены для раздачи /static/ и /media/
• STATICFILES_STORAGE = ManifestStaticFilesStorage для кеширования
• DEBUG = False
• ALLOWED_HOSTS установлены
• Используется CDN для большого трафика
• Minifire/Compress для оптимизации размера

Вывод

Static Files:

1. Это неизменяемые активы (CSS, JS, изображения)
2. В разработке Django подаёт автоматически
3. В production собираются через collectstatic
4. Nginx/Apache подают их напрямую (без Django)
5. Кешируются в браузере через хеш-версионирование
6. Можно раздавать через CDN для производительности

Правильная работа со static files - это критично для performance и SEO веб-приложения!