Кеширование статики через контейнер Docker с использованием Nginx

Django

26 февраля 2025 г.

Статические файлы, такие как изображения, CSS, JavaScript и шрифты, часто не изменяются в течение длительного времени. Без кеширования браузер будет каждый раз запрашивать эти файлы с сервера, что увеличивает сетевой трафик и замедляет загрузку страниц. Кеширование позволяет браузеру сохранять копии этих файлов локально, что значительно ускоряет повторные посещения сайта.

Nginx — это мощный веб-сервер, который отлично подходит для обслуживания статических файлов и настройки кеширования. Использование Docker позволяет легко развернуть и масштабировать Nginx в контейнеризованной среде.

Шаг 1: Подготовка проекта

Для начала создадим простую структуру проекта:

nginx-static-cache/
├── docker-compose.yml
├── nginx.conf
└── static/
    ├── index.html
    ├── style.css
    └── image.jpg

Пример содержимого index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Cache Example</title>
</head>
<body>
    <h1>Welcome to the Static Cache Example!</h1>
</body>
</html>

Шаг 2: Настройка Nginx

Создайте файл nginx.conf со следующим содержимым:

server {
    listen 80;

    # Корневая директория для статических файлов
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    # Настройка кеширования статики
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|woff|woff2|ttf|svg)$ {
        expires 30d; # Кешировать файлы на 30 дней
        add_header Cache-Control "public, must-revalidate";
    }
}

Шаг 3: Создание Docker Compose

Создайте файл docker-compose.yml:

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    container_name: nginx-static-cache
    ports:
      - "8080:80"
    volumes:
      - ./static:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    restart: always

Шаг 4: Запуск контейнера

Теперь выполните команду для запуска контейнера:

docker-compose up -d

После этого Nginx будет доступен по адресу http://localhost:8080.

Шаг 5: Проверка кеширования

Чтобы убедиться, что кеширование работает, откройте сайт в браузере и проверьте заголовки ответа. Для этого можно использовать инструменты разработчика (F12) или команду curl:

curl -I http://localhost:8080/style.css

В выводе вы должны увидеть заголовки, подтверждающие кеширование:

HTTP/1.1 200 OK
Server: nginx/1.23.4
Date: Mon, 01 Jan 2024 12:00:00 GMT
Content-Type: text/css
Content-Length: 1234
Last-Modified: Mon, 01 Jan 2024 10:00:00 GMT
Connection: keep-alive
ETag: "1234567890abcdef"
Expires: Tue, 31 Jan 2024 12:00:00 GMT
Cache-Control: public, must-revalidate
Accept-Ranges: bytes

Дополнительные советы

Очистка кеша: Если вы обновили статические файлы, но браузер продолжает использовать старые версии, добавьте уникальный параметр к URL (например, style.css?v=2) или измените имя файла.
Минификация файлов: Перед размещением статики минифицируйте CSS и JavaScript, чтобы уменьшить их размер.
CDN: Для крупных проектов рекомендуется использовать CDN (например, Cloudflare или AWS CloudFront) для дальнейшей оптимизации доставки статики.
SSL/TLS: Настройте HTTPS для вашего Nginx-сервера, чтобы обеспечить безопасность передачи данных.

Заключение

Настройка кеширования статики через Nginx в контейнере Docker — это простой и эффективный способ улучшить производительность вашего веб-приложения. С помощью описанного подхода вы можете легко развернуть Nginx, настроить кеширование и обслуживать статические файлы с минимальными затратами ресурсов.