Розробка сайту на CMS Cockpit CMS

Розробка вебсайту на CMS Cockpit CMS

Cockpit CMS - це self-hosted headless CMS на PHP, яка за замовчуванням не потребує бази даних (використовує SQLite або MongoDB). Добре підходить для невеликих проектів, де потрібен гнучкий API без складної інфраструктури.

Архітектура та можливості

Cockpit надає:

• Collections — списки записів (статті, товари, новини)
• Singletons — одиночні набори полів (параметри сайту, сторінка about)
• Assets — управління медіафайлами із трансформаціями
• REST та GraphQL API — для фронтенду
• Custom Roles — керування доступом

Немає вбудованого фронтенду - лише API. Підходить для проектів, де фронтенд на Next.js, Nuxt, Astro або мобільний додаток.

Встановлення

# Docker (рекомендується)
docker run -d \
  --name cockpit \
  -p 8080:80 \
  -v $(pwd)/cockpit-data:/var/www/html/storage \
  -e COCKPIT_SESSION_NAME=cockpit \
  -e COCKPIT_SECRET_KEY=$(openssl rand -hex 32) \
  agentejo/cockpit:latest

# Або через PHP на Apache/Nginx
git clone https://github.com/Cockpit-HQ/Cockpit.git /var/www/cockpit
# Налаштувати Nginx vhost, надати права на storage/

Робота з Collections API

const COCKPIT_URL = process.env.COCKPIT_URL;
const COCKPIT_TOKEN = process.env.COCKPIT_API_TOKEN;

// Отримання записів колекції
async function getCollectionItems(collection: string, options = {}) {
  const params = new URLSearchParams({
    token: COCKPIT_TOKEN!,
    ...options,
  });

  const res = await fetch(`${COCKPIT_URL}/api/collections/get/${collection}?${params}`);
  return res.json();
}

// Використання
const { entries, total } = await getCollectionItems('posts', {
  limit: 10,
  skip: 0,
  sort: JSON.stringify({ _created: -1 }),
  filter: JSON.stringify({ published: true }),
  populate: 1, // розгортає пов'язані записи
});

Інтеграція з Next.js

// lib/cockpit.ts
export async function getPosts() {
  const data = await getCollectionItems('posts', {
    filter: JSON.stringify({ status: 'published' }),
    sort: JSON.stringify({ date: -1 }),
    fields: JSON.stringify({ title: 1, slug: 1, excerpt: 1, image: 1, date: 1 }),
  });
  return data.entries;
}

// Singleton (параметри сайту)
export async function getSiteSettings() {
  const res = await fetch(
    `${COCKPIT_URL}/api/singletons/get/settings?token=${COCKPIT_TOKEN}`
  );
  return res.json();
}

Трансформація зображень

Cockpit вбудовано підтримує зміну розміру:

// URL-параметри для трансформації
const thumbnailUrl = `${COCKPIT_URL}/api/cockpit/image?token=${token}&src=${encodeURIComponent(imagePath)}&w=800&h=400&m=crop&q=80&o=true`;

Типовий проект на Cockpit CMS (невеликий корпоративний сайт з блогом, 3–5 колекцій) - 5–10 днів, включаючи фронтенд.