Как установить Headless Drupal+React-фронтенд на двух доменах в Fastpanel

alexei20/05/2026 - 08:45
Как установить Headless Drupal+React-фронтенд на двух доменах в Fastpanel

Установка и настройка headless Drupal + React-фронтенд на сервере с панелью управления FASTPANEL® предполагает разделение серверной части/бэкенда (Drupal) и клиентской части/фронтенда (React) на одном или двух доменах.

Ниже — подробная инструкция по развёртыванию головного (headless) Drupal 10 в качестве API и React-приложения, которое получает данные через JSON:API. Решение подходит для современных SPA-сайтов, административных панелей, блогов и т.д.

1. Архитектура решения

  • Drupal (на api.mysite.com) — бэкенд, отдающий данные через JSON:API.
  • React (на mysite.com) — фронтенд, получающий и отображающий данные.
  • Оба сайта размещены на одном сервере под управлением FASTPANEL.
  • Используется HTTPS, CORS, PM2 для React, Nginx как обратный прокси-сервер.

2. Подготовка

Убедитесь, что:

  • У вас есть сервер с FASTPANEL®.
  • Домены: mysite.com и api.mysite.com направлены на IP сервера.
  • Установлены: PHP 8.2+, Node.js 20+, Composer, NPM.
  • У вас есть SSH-доступ.

3. Создание сайта на Drupal (API-бэкенд)

3.1. Создание сайта api.mysite.com

  1. В FASTPANEL: Сайты → Создать сайт → Вручную.
  2. Укажите:
    • Домен: api.mysite.com
    • Пользователь: создайте нового, например, drupalapi.
    • База данных: drupal_api_db.
  3. Нажмите Создать.

3.2. Установка Drupal через Composer

Подключитесь по SSH:


ssh drupalapi@ваш-сервер-ip
cd ~/www/api.mysite.com

Установите Drupal:


composer create-project drupal/recommended-project .

Установите права:


chmod -R 755 web/sites/default
chmod 644 web/sites/default/settings.php

3.3. Установка через веб-интерфейс

Откройте в браузере https://api.mysite.com.

Следуйте инструкциям установщика, используя:

  • База данных: drupal_api_db
  • Пользователь: drupalapi
  • Пароль: ваш

4. Настройка Drupal как безголовый/headless CMS

4.1. Включение JSON:API

После установки зайдите в административную панель Drupal:

  • Перейдите: Расширения (Extend).
  • Включите модуль JSON:API.

Он входит в ядро Drupal 10 — просто активируйте.

4.2. Настройка CORS

Отредактируйте файл settings.php:


nano ~/www/api.mysite.com/web/sites/default/settings.php

Либо в другом текстовом редакторе.

Добавьте в конец:


$settings['cors.config'] = [
  'enabled' => TRUE,
  'allowedOrigins' => ['https://mysite.com'],
  'allowedMethods' => ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  'allowedHeaders' => ['Authorization', 'Content-Type', 'X-Requested-With'],
  'exposedHeaders' => [],
  'maxAge' => 3600,
  'supportsCredentials' => FALSE,
];

Замените https://mysite.com на ваш фронтенд-домен. Для разработки можно указать *, но не используйте это на рабочем сайте.

4.3. Создание контента для теста

  1. В административной панели Drupal: Контент → Добавить контент → Статья.
  2. Добавьте заголовок и текст.
  3. Опубликуйте.

4.4. Проверка API

Откройте ссылку https://api.mysite.com/jsonapi/node/article.

Должен вернуться JSON со списком статей.

5. Создание сайта для React (фронтенд)

5.1. Создание сайта mysite.com

  1. В FASTPANEL: Сайты → Создать сайт → Вручную.
  2. Укажите:
    • Домен: mysite.com
    • Пользователь: reactuser
    • Бэкенд: Обратный прокси (Reverse proxy).
    • Адрес: http://localhost:3000
  3. Сохраните.

FASTPANEL автоматически выдаст SSL-сертификат.

6. Установка и настройка React-приложения

6.1. Подключение по SSH


ssh reactuser@ваш-сервер-ip

6.2. Установка Node.js (если ещё не установлен)


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

6.3. Создание React-приложения


cd ~/www/mysite.com
npx create-react-app .
npm install axios

6.4. Настройка получения данных из Drupal

Отредактируйте файл src/App.js:


import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    axios.get('https://api.mysite.com/jsonapi/node/article')
      .then(response => {
        setArticles(response.data.data);
      })
      .catch(error => {
        console.error('Ошибка загрузки статей:', error);
      });
  }, []);

  return (
    <div>
      <h1>Статьи из Drupal</h1>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <h2>{article.attributes.title}</h2>
            <p>{article.attributes.body?.value}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

7. Запуск React-приложения с PM2

7.1. Установка PM2


npm install -g pm2

7.2. Запуск приложения


pm2 start "npm start" --name "react-frontend"

7.3. Автозапуск после перезагрузки


pm2 save
pm2 startup

Следуйте инструкциям в выводе — выполните предложенную sudo команду.

8. Настройка Nginx (если нужен пользовательский прокси-сервер)

FASTPANEL уже настроил прокси-сервер на localhost:3000, но если возникают ошибки, проверьте конфигурацию:


location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
}

Эти настройки автоматически применяются FASTPANEL при выборе типа «Обратный прокси».

9. Проверка работы

  1. Откройте ссылку https://mysite.com — должен загрузиться React-фронтенд.
  2. Откройте ссылку https://api.mysite.com/jsonapi/node/article — должен вернуть JSON.
  3. Убедитесь, что:
    • React отображает статьи.
    • В консоли браузера нет CORS-ошибок.

10. Дополнительные рекомендации

  • Безопасность: Не используйте allowedOrigins: ['*'] на рабочем сайте.
  • Кэширование: Включите кэш в Drupal (JSON:API кэширует ответы).
  • Аутентификация: Для приватного контента используйте OAuth 2.0 или JWT.
  • CI/CD: Настройте автоматическую сборку React через GitHub Actions.
  • Мониторинг: Используйте pm2 monit для отслеживания нагрузки.

Теперь у вас работает полноценная headless-архитектура:

  • Drupal как API-бэкенд на api.mysite.com
  • React как динамический фронтенд на mysite.com
    — всё на одном сервере под управлением FASTPANEL® с HTTPS, CORS и автозапуском.
Drupal как Headless CMS с Vue.js: Полное руководство