Ви запустили Strapi на продакшені, а через місяць файли губляться при деплої? Або бекенд падає під навантаженням при віддачі статики? Знайома ситуація: стандартна медіа-бібліотека Strapi зберігає все в public/uploads — зручно для розробки, але для продакшену критично. У цій статті розберемо налаштування сховища Strapi для продакшену. За 10 років ми налаштували медіа-бібліотеки для 50+ проектів на Strapi і знаємо, як уникнути цих проблем. Налаштовуємо хмарне сховище на основі S3, Cloudinary або R2, додаємо автоматичну оптимізацію зображень і контроль типів файлів. Розберемо грамотну конфігурацію, яка позбавить головного болю.
Локальне зберігання не вирішує три ключові проблеми. По-перше, файли не реплікуються між інстансами: при горизонтальному масштабуванні кожен сервер бачить лише свої файли. По-друге, локальні файли губляться при перескладанні контейнера (Docker перестворює шар). І нарешті, продуктивність: віддача статики через Node.js повільніша, ніж через CDN хмарного провайдера. Правильна конфігурація медіа-бібліотеки скорочує час завантаження сторінок на 30–40% і позбавляє від бекапних ризиків. За місяць локальне сховище може призвести до значних втрат через простої, а оптимізація зображень у одного клієнта зекономила суттєву суму на трафіку.
Чому не варто використовувати локальне сховище в продакшені?
Локальне сховище в public/uploads підходить тільки для розробки. На продакшені воно створює вузькі місця: відмовостійкість відсутня, масштабування ускладнене, а при кожному деплої файли можуть бути втрачені. Хмарне сховище вирішує всі ці проблеми: файли зберігаються централізовано, доступні з будь-якої точки світу через CDN, і не губляться при перезапуску контейнерів.
Якого провайдера обрати для медіа-бібліотеки Strapi?
| Провайдер | Пакет | Особливості |
|---|---|---|
| AWS S3 | @strapi/provider-upload-aws-s3 |
Гнучкі налаштування, інтеграція з CloudFront, зрілий SDK |
| Cloudinary | @strapi/provider-upload-cloudinary |
Вбудована оптимізація зображень, автоматичні формати (WebP, AVIF) |
| DigitalOcean Spaces | через aws-s3 |
S3-сумісний, фіксована ціна за 250 ГБ |
| Cloudflare R2 | через aws-s3 |
Нульова плата за egress, глобальна мережа доставки |
Cloudinary обробляє зображення в 2–3 рази швидше, ніж S3 з лямбда-функціями. R2 виграє за вартістю при великому обсязі трафіку — немає плати за вихідний канал.
Налаштування AWS S3
Встановіть пакет: npm install @strapi/provider-upload-aws-s3. Конфігурація в config/plugins.js:
module.exports = ({ env }) => ({
upload: {
config: {
provider: 'aws-s3',
providerOptions: {
s3Options: {
credentials: {
accessKeyId: env('AWS_ACCESS_KEY_ID'),
secretAccessKey: env('AWS_ACCESS_KEY_SECRET'),
},
region: env('AWS_REGION', 'eu-central-1'),
endpoint: env('AWS_ENDPOINT', undefined), // для S3-сумісних
params: {
ACL: env('AWS_ACL', 'public-read'),
Bucket: env('AWS_BUCKET'),
},
},
},
actionOptions: {
upload: {},
uploadStream: {},
delete: {},
},
},
},
});
Amazon S3 — об'єктне сховище від AWS, широко використовуване для зберігання файлів.
Налаштування Cloudflare R2
R2 сумісний з S3 API, безкоштовна egress смуга:
module.exports = ({ env }) => ({
upload: {
config: {
provider: 'aws-s3',
providerOptions: {
s3Options: {
credentials: {
accessKeyId: env('R2_ACCESS_KEY_ID'),
secretAccessKey: env('R2_SECRET_ACCESS_KEY'),
},
region: 'auto',
endpoint: `https://${env('CF_ACCOUNT_ID')}.r2.cloudflarestorage.com`,
params: {
Bucket: env('R2_BUCKET'),
},
},
},
},
},
});
Для публічного доступу до файлів потрібен кастомний домен R2 або Cloudflare Worker.
Налаштування Cloudinary
Встановіть пакет: npm install @strapi/provider-upload-cloudinary. Конфігурація:
module.exports = ({ env }) => ({
upload: {
config: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
actionOptions: {
upload: {
folder: env('CLOUDINARY_FOLDER', 'strapi'),
transformation: [{ quality: 'auto', fetch_format: 'auto' }],
},
uploadStream: {},
delete: {},
},
},
},
});
В одному проекті з 500 000 зображень ми перенесли медіатеку на Cloudinary за 2 дні, скоротивши час завантаження сторінки з 4.2 с до 1.1 с. Це стало можливим завдяки автоматичній оптимізації та CDN.
Формати зображень та брейкпоїнти
Strapi автоматично створює кілька розмірів при завантаженні. Налаштування в config/plugins.js:
breakpoints: {
xlarge: 1920,
large: 1000,
medium: 750,
small: 500,
xsmall: 64,
},
У відповіді API поле formats містить URL кожного варіанту. Розміри та типове використання:
| Розмір | Ширина (px) | Типове використання |
|---|---|---|
| xlarge | 1920 | Десктопні банери |
| large | 1000 | Статті, контент на десктопі |
| medium | 750 | Зображення в картках |
| small | 500 | Мініатюри в списках |
| xsmall | 64 | Іконки, аватари |
Фільтрація типів і обмеження розміру
Обмеження розміру завантаження та MIME-типів:
// config/plugins.js
module.exports = {
upload: {
config: {
sizeLimit: 20 * 1024 * 1024, // 20 МБ
},
},
};
// src/extensions/upload/strapi-server.js
module.exports = (plugin) => {
const originalUpload = plugin.controllers.upload.upload;
plugin.controllers.upload.upload = async (ctx) => {
const { files } = ctx.request;
const allowed = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];
const invalid = Object.values(files).flat()
.filter(f => !allowed.includes(f.type));
if (invalid.length) {
return ctx.badRequest('Непідтримуваний тип файлу');
}
return originalUpload(ctx);
};
return plugin;
};
Процес налаштування
- Аналіз вимог: визначаємо об'єм файлів, бюджет, вимоги до продуктивності.
- Вибір провайдера: на основі вартості, географії користувачів, необхідності трансформацій.
- Налаштування провайдера: встановлення пакету, конфігурація змінних середовища, тестове підключення.
- Конфігурація брейкпоїнтів: підгонка розмірів під дизайн сайту (зазвичай 640, 1024, 1920).
- Фільтрація та ліміти: налаштування допустимих MIME-типів та максимального розміру.
- Міграція даних: перенесення існуючих файлів з локального диска та оновлення посилань в БД.
- Тестування: перевірка завантаження, відображення, продуктивності.
- Документування та навчання: передача інструкцій команді клієнта.
Деталі міграції
Міграція виконується за допомогою скрипта, який копіює файли з `public/uploads` в S3-кошик та оновлює записи в базі даних Strapi. Для кількох гігабайт процес займає 1-2 дні. Перед міграцією обов'язково створюється бекап бази даних і файлів. Після перенесення всі посилання в медіа-об'єктах вказують на хмарне сховище.Терміни
- Налаштування S3/R2/Cloudinary провайдера — кілька годин.
- Перенесення існуючих файлів з локального сховища — 1 день (залежить від об'єму).
- Кастомна фільтрація типів + обмеження — кілька годин.
Що входить в роботу
- Налаштування провайдера сховища (S3, Cloudinary, R2).
- Конфігурація брейкпоїнтів та оптимізація зображень.
- Реалізація фільтрації типів та розміру файлів.
- Міграція існуючих файлів на хмарне сховище.
- Написання документації та інструкцій для команди.
- Гарантія коректної роботи та підтримка протягом місяця після налаштування.
Отримайте консультацію з налаштування медіа-бібліотеки Strapi — допоможемо обрати оптимальне рішення та впровадимо без простоїв. Зв'яжіться з нами для обговорення вашого проекту. Замовте аудит поточної конфігурації — ми перевіримо, чи є вузькі місця.