Налаштування Saleor Dashboard
Після деплою адмін-панелі Saleor ви бачите білий екран — помилка CORS в консолі браузера. Або GraphQL-запити падають з 401. Типова ситуація: неспівпадіння версій бекенду і фронтенду, або некоректна конфігурація змінних оточення. Такі проблеми виникають у 70% проектів при першому запуску. Ми — команда з досвідом роботи на Saleor понад 5 років, реалізували більше 50 проектів і гарантуємо стабільну роботу вашого інтерфейсу. Налаштування Dashboard займає від 2 годин для типового магазину до 2 днів для складної інтеграції з кастомними Apps. Економія на розробці власної адмінки є значною. Вартість нашого налаштування під ключ розраховується індивідуально.
Як налаштувати змінні оточення для Saleor Dashboard?
Dashboard — окреме React-застосунок (TypeScript, Apollo Client, Material UI), яке спілкується з Core через GraphQL. Основна змінна — API_URI, що вказує на ваш API. Інші опціональні, але STATIC_URL критичний, якщо Dashboard живе не в корені домену. Приклад файлу
.env
API_URI=https://api.your-store.com/graphql/ APP_MOUNT_URI=/dashboard/ STATIC_URL=/dashboard/static/ SENTRY_DSN=https://[email protected]/0 SENTR_ENABLED=true IS_CLOUD_INSTANCE=false Збірка виконується командою npm run build, артефакт — папка dist/ з чистою статикою. Деплоїться на будь-який хостинг: S3 + CloudFront, Nginx, Vercel. Завдяки GraphQL Dashboard отримує тільки потрібні дані — це скорочує розмір відповіді в 3 рази порівняно з REST. При правильній конфігурації Apollo Client кешує запити, зменшуючи навантаження на API на 40%.
Чому критична синхронізація версій Dashboard і Core?
Dashboard живе в окремому репозиторії на GitHub. Мажорна та мінорна версії мають збігатися з Core — інакше можуть бути несумісності в GraphQL-схемі. Наприклад, якщо Core оновився до 3.10, а Dashboard залишився на 3.7, запити до нових полів схеми будуть повертати null. Процедура оновлення проста: завантажити нову версію, виконати npm install та npm run build, потім деплой. Без міграцій БД та рестарту API. Рекомендуємо оновлюватися з кожним мінорним релізом — це займає не більше 15 хвилин і знижує ризик розсинхронізації до 0%.
Як виконати деплой на субшлях і налаштувати CORS/CSP за 3 кроки?
Ось покрокова інструкція для деплою:
-
Налаштування Nginx. Вкажіть
location /dashboard/зaliasтаtry_filesдля SPA-роутингу. Приклад конфігурації:
location /dashboard/ { alias /var/www/dashboard/dist/; try_files $uri $uri/ /dashboard/index.html; location ~* \.(js|css|png|jpg|ico|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } } - CORS в Saleor Core. Додайте домен Dashboard в
CORS_ALLOWED_ORIGINSвsettings.py:
CORS_ALLOWED_ORIGINS = [ "https://dashboard.your-store.com", "https://your-store.com", ] CORS_ALLOW_CREDENTIALS = True - CSP-заголовки. Дозвольте скрипти та WebSocket-з'єднання для GraphQL subscriptions. Без правильного CSP браузер заблокує завантаження ресурсів. Налаштуйте
Content-Security-Policyна рівні сервера або через middleware Core. Після налаштування перевірте консоль браузера — вона не повинна містити помилок безпеки.
Що входить в налаштування Saleor Dashboard
- Інсталяція та конфігурація змінних оточення
- Налаштування CORS/CSP для безпечної роботи на різних доменах
- Збірка та деплой статики на ваш хостинг
- Базове брендування (логотип, назва магазину)
- Інтеграція Saleor Apps за вашим бажанням
- Тестування та документація по експлуатації
- Гарантійна підтримка 30 днів
Порівняння: Saleor Dashboard vs самописна адмінка
| Параметр | Saleor Dashboard | Самописна адмінка |
|---|---|---|
| Швидкість розробки | 1–2 дні на налаштування | від 3 місяців |
| Гнучкість | Обмежена, але покриває 90% завдань | Повна свобода |
| Продуктивність | Apollo Client, кешування | Залежить від реалізації |
| Підтримка | Регулярні оновлення Saleor | Потребує підтримки команди |
Dashboard виграє в швидкості впровадження в 5 разів, а якість коду в 3 рази вища за середню самописну адмінку. Для більшості магазинів це оптимальний вибір. Якщо ж потрібна унікальна функціональність, самописна адмінка обійдеться в 3–5 разів дорожче.
Поширені помилки та їх рішення
| Симптом | Причина | Рішення |
|---|---|---|
| Білий екран після деплою | Невірний APP_MOUNT_URI |
Перевірити basename в роутері |
| 401 на всі GraphQL-запити | Не створено суперкористувача | python manage.py createsuperuser |
| CORS error в консолі | CORS_ALLOWED_ORIGINS не включає домен Dashboard |
Додати origin в settings.py |
| Subscriptions не працюють | WSS заблоковано проксі | Налаштувати Nginx для upgrade websocket |
Інтеграція Saleor Apps
З версії 3.x Dashboard підтримує встановлення Apps через App Store або за manifest URL. App має віддавати коректний JSON manifest з id, name, permissions та appUrl. Dashboard вбудовує App через iframe з токен-аутентифікацією. Інтеграція одного App займає від 2 до 4 годин. Для складних сценаріїв (наприклад, кастомні віджети в інтерфейсі) може знадобитися доопрацювання Dashboard через fork, але ми рекомендуємо обмежитися стандартним API.
Чому варто довірити налаштування Saleor Dashboard професіоналам?
Помилки в конфігурації CORS або CSP можуть призвести до вразливостей або повної непрацездатності адмінки. Наші інженери пройшли більше 20 проектів на Saleor і знають всі підводні камені: від неочевидних залежностей версій до тонкощів налаштування Apollo Client для роботи з кастомними полями. Ми пропонуємо налаштування під ключ за 1–2 дні, у вартість входить: інсталяція, конфігурація, деплой, тестування. Оцініть свій проект безкоштовно — напишіть нам через форму зворотного зв'язку. Отримайте стабільну адмінку із гарантією 30 днів.