Налаштування статичних і медіа-файлів

Коли ми розробляємо веб-додаток, він рідко обходиться лише серверною логікою і базою даних. Нам потрібні стилі (CSS), зображення, JavaScript та інші ресурси, які користувач бачить або завантажує з клієнтської сторони. Ці ресурси називаються статичними файлами.

Крім того, якщо ваш додаток дозволяє користувачам завантажувати файли (наприклад, зображення профілю, документи), нам потрібно місце для їх зберігання. Такі файли називаються медіа-файлами.

Чим статичні файли відрізняються від медіа?

1. Обробка статичних файлів у Django

Django надає зручні механізми для роботи зі статичними файлами. Давай поетапно розберемося, як їх налаштувати.

1.1 Що таке STATIC_URL?

Це базовий URL, за яким твій проєкт буде надавати статичні файли. Наприклад, якщо ти встановиш STATIC_URL = '/static/', то файл example.css, який лежить у статичній папці твого застосунку, буде доступний за адресою http://127.0.0.1:8000/static/example.css.

1.2 Основні параметри в settings.py

Відкрий свій settings.py і додай такі налаштування:

STATIC_URL = '/static/'  # Шлях для доступу до статичних файлів

STATICFILES_DIRS = [
    BASE_DIR / "static",  # Локальна папка для статичних файлів
]

• STATIC_URL визначає URL, з якого статичні файли будуть доступні.
• STATICFILES_DIRS вказує Django, де шукати додаткові статичні файли.

1.3 Команда collectstatic

Коли ти відправляєш застосунок на продакшн, Django збирає всі статичні файли в одну папку. Це робиться командою:

python manage.py collectstatic

Django скопіює всі файли з директорій, вказаних у STATICFILES_DIRS, і застосунків (наприклад, app_name/static/) в єдину папку.

Щоб вказати кінцеве місце для цих файлів, додамо в settings.py:

STATIC_ROOT = BASE_DIR / "staticfiles"  # Папка, куди збираються файли

1.4 Best Practices для статичних файлів

1. Зберігайте структурованість. Наприклад, створіть підкаталоги для css, js і images.
2. Не зберігайте величезні файли у статичних. Для відео та інших великих файлів краще використовувати спеціалізовані сховища.
3. Використовуйте hash-назви для файлів на продакшені. Це зменшує можливість отримання застарілих версій файлів клієнтами.

2. Робота з медіа-файлами

Тепер переключимося на медіа-файли. Якщо ваш проєкт дозволяє користувачам завантажувати файли, вам потрібно організувати їх зберігання та обробку.

2.1 Налаштування медіа-файлів у settings.py

Для початку додамо налаштування у settings.py:

MEDIA_URL = '/media/'  # URL для медіа-файлів
MEDIA_ROOT = BASE_DIR / "media"  # Фізична папка для зберігання файлів

• MEDIA_URL — шлях для доступу до завантажених (медіа) файлів.
• MEDIA_ROOT — локальна папка, де файли будуть фізично зберігатися.

2.2 Налаштування URL для медіа-файлів

Додамо спеціальну конфігурацію для розробки, щоб отримувати доступ до медіа-файлів. Відкрийте ваш urls.py (зазвичай у корені проєкту) і змініть його наступним чином:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # Ваші інші маршрути
]

if settings.DEBUG:  # Тільки для режиму розробки
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2.3 Використання медіа-файлів у моделях

Ймовірно, ви захочете створити моделі для обробки завантажених файлів. Наприклад:

from django.db import models

class Profile(models.Model):
    name = models.CharField(max_length=100)
    avatar = models.ImageField(upload_to='avatars/')  # Завантаження в папку avatars/

 

• Поле upload_to дозволяє налаштувати, в яку піддиректорію будуть зберігатися файли. У цьому випадку завантажені аватари зберігатимуться в media/avatars/.

Під час завантаження файлів не забудьте встановити бібліотеку Pillow! Вона потрібна для роботи із зображеннями:

pip install pillow

3. Інструменти і команди для роботи з файлами

3.1 Команда collectstatic

Ми вже згадували команду collectstatic, але на всяк випадок, використовуйте її тільки на етапі продакшена.

3.2 Що робити, якщо файли не завантажуються?

Якщо ви працюєте в режимі продакшена, але статика або медіа з якоїсь причини недоступні, причина може бути в неправильній конфігурації веб-сервера (наприклад, Nginx або Apache). У такому випадку потрібно переконатися, що сервер веб-додатка віддає файли з папок STATIC_ROOT і MEDIA_ROOT.

4. Практичне завдання: зв'язка статичних і медіа-файлів

Ми зробимо міні-проєкт, у якому користувач може завантажувати зображення профілю, а інтерфейс сайту буде оформлений за допомогою CSS.

1. У вашому settings.py додайте:

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

2. У папці проєкту створіть структуру для статики:

my_project/
    static/
        css/
            styles.css
    media/
    templates/
        profile.html

3. Додайте CSS файл static/css/styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}

.profile {
    max-width: 300px;
    margin: 50px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

 

4. Створіть модель і форму в models.py:

from django.db import models

class UserProfile(models.Model):
    username = models.CharField(max_length=50)
    profile_picture = models.ImageField(upload_to='profiles/')

5. Використовуйте форму для завантаження аватара в forms.py:

from django import forms
from .models import UserProfile

class ProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['username', 'profile_picture']

6. Додайте представлення і шаблон для профілю:

from django.shortcuts import render
from .forms import ProfileForm

def profile_view(request):
    form = ProfileForm(request.POST or None, request.FILES or None)
    if request.method == 'POST' and form.is_valid():
        form.save()
    return render(request, 'profile.html', {'form': form})

І додайте profile.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    <div class="profile">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Завантажити профіль</button>
        </form>
    </div>
</body>
</html>

Тепер можна запустити сервер, завантажити аватар і насолоджуватися стилями!

На цьому етапі ви розумієте, як налаштовувати статику і медіа у Django. Уміння працювати з файлами робить ваш додаток повноцінним і готовим до використання користувачами.