Встановлення та налаштування Payload CMS

Встановлення та налаштування Payload CMS

Payload CMS встановлюється як npm-пакет в проекті Next.js. З версії 2.x рекомендується монорепо-підхід — CMS і фронтенд в одному додатку.

Вимоги

• Node.js 18.20.2+ або 20.9.0+
• PostgreSQL 11+ або MongoDB 4.2+
• npm 9+ / yarn 3+ / pnpm 8+

Встановлення через create-payload-app

npx create-payload-app@latest my-project

Інтерактивний майстер запитатиме:

• Template: blank, website, ecommerce, blog — вибрати відповідний
• Database: MongoDB або PostgreSQL

cd my-project
cp .env.example .env

.env:

DATABASE_URI=postgresql://user:password@localhost:5432/payload_db
PAYLOAD_SECRET=super-secret-key-min-32-chars
NEXT_PUBLIC_SERVER_URL=http://localhost:3000

npm run dev
# CMS admin: http://localhost:3000/admin
# При першому запуску створити адміністратора

Структура проекту (Next.js монолітна)

my-project/
├── app/
│   ├── (frontend)/          # Публічний фронтенд
│   └── (payload)/           # Admin panel
│       └── admin/[[...segments]]/page.tsx
├── collections/             # Типи контенту
├── globals/                 # Глобальні налаштування
├── payload.config.ts        # Головна конфігурація
├── payload-types.ts         # Автогенеровані типи
└── next.config.js

Базова конфігурація

// payload.config.ts
import { buildConfig } from 'payload/config'
import { postgresAdapter } from '@payloadcms/db-postgres'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import { s3Storage } from '@payloadcms/storage-s3'
import path from 'path'

export default buildConfig({
  serverURL: process.env.NEXT_PUBLIC_SERVER_URL || '',
  admin: {
    user: 'users',
  },
  editor: lexicalEditor({}),
  collections: [
    // Імпортувати колекції
  ],
  db: postgresAdapter({
    pool: { connectionString: process.env.DATABASE_URI || '' },
  }),
  plugins: [
    s3Storage({
      collections: { media: true },
      bucket: process.env.S3_BUCKET!,
      config: {
        region: process.env.S3_REGION,
        credentials: {
          accessKeyId: process.env.S3_ACCESS_KEY!,
          secretAccessKey: process.env.S3_SECRET_KEY!,
        },
      },
    }),
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
})

Виробничий розгортання

# Build
npm run build

# Start
npm start

# Docker
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Часові рамки

Базове встановлення з PostgreSQL і S3 для медіа — 2–4 години. Налаштування під конкретний проект з першими колекціями — 1 день.