Інтеграція CMS Directus для управління контентом

Інтеграція CMS Directus для управління контентом

Directus — це headless CMS і платформа даних з відкритим вихідним кодом. Ключова відмінність від Strapi та інших: Directus працює поверх існуючих баз даних без зміни схеми. Якщо у вас уже є PostgreSQL з таблицями, Directus підключиться до неї і відразу надаватиме API та панель адміністратора.

Принцип роботи

Directus не створює власні таблиці для користувацького контенту — він читає структуру існуючих таблиць через information_schema та будує поверх них:

• Адміністративний інтерфейс для операцій CRUD
• REST API (/items/{collection})
• GraphQL API (/graphql)
• Систему контролю доступу
• Систему вебхуків та автоматизацій (Flows)

Власні таблиці Directus (з префіксом directus_) — лише для метаданих системи: користувачі, ролі, дозволи, файли, вебхуки.

Встановлення через Docker

# docker-compose.yml
services:
  directus:
    image: directus/directus:latest
    ports:
      - "8055:8055"
    environment:
      SECRET: "replace-with-random-string"
      DB_CLIENT: "pg"
      DB_HOST: "postgres"
      DB_PORT: "5432"
      DB_DATABASE: "directus"
      DB_USER: "directus"
      DB_PASSWORD: "directus"
      ADMIN_EMAIL: "[email protected]"
      ADMIN_PASSWORD: "strongpassword"
      STORAGE_LOCATIONS: "local"
      STORAGE_LOCAL_DRIVER: "local"
      STORAGE_LOCAL_ROOT: "/directus/uploads"
    volumes:
      - directus-uploads:/directus/uploads
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: directus
      POSTGRES_USER: directus
      POSTGRES_PASSWORD: directus
    volumes:
      - pgdata:/var/lib/postgresql/data

docker compose up -d
# Панель адміністратора: http://localhost:8055

Створення колекцій

Через UI: Settings → Data Model → Create Collection. Directus створює відповідну таблицю в БД.

Або програмно через API:

# Створити колекцію через API
curl -X POST http://localhost:8055/collections \
    -H "Authorization: Bearer $ADMIN_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{
        "collection": "articles",
        "fields": [
            { "field": "id", "type": "integer", "meta": { "hidden": true }, "schema": { "is_primary_key": true, "has_auto_increment": true } },
            { "field": "title", "type": "string", "meta": { "required": true } },
            { "field": "slug", "type": "string", "meta": { "unique": true } },
            { "field": "content", "type": "text", "meta": { "interface": "input-rich-text-html" } },
            { "field": "status", "type": "string", "meta": { "interface": "select-dropdown", "options": { "choices": [{"text":"Draft","value":"draft"},{"text":"Published","value":"published"}] } } },
            { "field": "date_published", "type": "timestamp" }
        ]
    }'

REST API

# Отримати список статей (тільки опубліковані)
GET /items/articles?filter[status][_eq]=published&sort[]=-date_published&limit=10

# З заповненими пов'язаними полями
GET /items/articles?fields=*,author.name,cover.filename_disk

# Конкретна стаття за slug
GET /items/articles?filter[slug][_eq]=my-article&fields=*,tags.*

Відповідь є послідовною для всіх колекцій:

{
  "data": [
    {
      "id": 1,
      "title": "My Article",
      "slug": "my-article",
      "status": "published",
      "author": { "name": "Ivan Petrov" }
    }
  ]
}

GraphQL

query Articles($status: String!) {
  articles(filter: { status: { _eq: $status } }, sort: ["-date_published"], limit: 10) {
    id
    title
    slug
    content
    cover {
      id
      filename_disk
    }
    author {
      first_name
      last_name
    }
  }
}

Система контролю доступу

Directus працює з публічною роллю (анонімні запити) та користувальницькими ролями:

Settings → Access Control → Public role
→ articles: Read (filter: status=published)
→ articles: No Create/Update/Delete

Settings → Access Control → Create role "Editor"
→ articles: Full CRUD
→ directus_users: Read (only own profile)

Політики на рівні рядків встановлюються через фільтри в налаштуваннях ролі: редактори бачать лише свої статті (user_created = $CURRENT_USER).

Flows (Автоматизація)

Flows — вбудований інструмент автоматизації без коду. Тригери: створення/оновлення елемента, вебхук, cron, ручний запуск. Дії: HTTP-запит, email, скрипт, операції з БД.

Trigger: Items Created (articles)
→ Condition: status == "published"
→ Action: Webhook POST https://vercel.com/api/deploy-hook/xxx
           (перебудова Next.js при публікації статті)

Користувальницькі розширення

// extensions/hooks/article-slug/index.js
export default ({ action }) => {
    action('items.create', ({ collection, payload }, { schema }) => {
        if (collection === 'articles' && !payload.slug) {
            payload.slug = slugify(payload.title);
        }
    });
};

Типи розширень: hooks, endpoints, modules (додають сторінки в адмін), displays (користувальницькі дисплеї полів), interfaces (користувальницькі редактори полів).

Інтеграція з фронтендом

Directus SDK:

import { createDirectus, rest, readItems } from '@directus/sdk';

const client = createDirectus('https://cms.example.com').with(rest());

const articles = await client.request(
    readItems('articles', {
        filter: { status: { _eq: 'published' } },
        sort: ['-date_published'],
        fields: ['id', 'title', 'slug', 'cover.*'],
        limit: 10,
    })
);

Терміни

Встановлення, підключення до БД, налаштування колекцій, API, контроль доступу, розгортання — 3–5 робочих днів. Користувальницькі розширення, Flows, інтеграція з зовнішніми сервісами — +3–5 днів.