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

alexei23/04/2026 - 09:07

Установка и настройка headless Drupal + React-фронтенд на один домен в панели управления FASTPANEL® означает, что и бэкенд (Drupal), и фронтенд (React) будут размещены на одном домене — например, mysite.com, где:

Drupal работает в подпапке /api или на отдельном порту (но не отображается напрямую),
React — как основное приложение, доступное по корневому пути /,
Вся интеграция происходит через JSON:API, а CORS и маршрутизация настроены корректно.

Ниже — подробная инструкция по развёртыванию такой архитектуры на одном сервере и одном домене (mysite.com) с использованием возможностей FASTPANEL.

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

Домен: mysite.com
Drupal: работает в папке /var/www/mysite.com/api → доступен по https://mysite.com/api/jsonapi/...
React: запущен на localhost:3000, проксирован через Nginx → доступен по https://mysite.com
Nginx (через FASTPANEL) направляет:
- Все запросы к /jsonapi/* → в папку Drupal
- Остальные запросы → на React (через reverse proxy)

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

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

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

3. Создание сайта в FASTPANEL

Перейдите: Сайты → Создать сайт → Вручную.
Укажите:
- Домен: mysite.com
- Пользователь: создайте webuser
- Бэкенд: Обратный прокси (Reverse proxy) → http://localhost:3000
- Включите SSL (Let's Encrypt).
Сохраните.

Это настроит Nginx на проксирование всех запросов на React.

4. Размещение и настройка Drupal в подпапке `/api`

4.1. Создание папки для Drupal

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


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

4.2. Установка Drupal в папку `api`


cd api
composer create-project drupal/recommended-project .

4.3. Настройка веб-доступа

Drupal должен быть доступен через https://mysite.com/api/..., но FASTPANEL по умолчанию проксирует всё на :3000.

Решение — настроить исключения в Nginx через дополнительные правила.

5. Настройка Nginx: исключения для `/jsonapi` и `/api`

В FASTPANEL:

Перейдите: Сайты → mysite.com → Веб-сервер → Дополнительные правила Nginx.

Вставьте:


location /api/ {
    alias /home/webuser/www/mysite.com/api/web/;
    index index.php;
    try_files $uri $uri/ @drupal_api;
}

location @drupal_api {
    rewrite ^/api/(.*)$ /api/web/index.php?q=$1;
}

location ~ ^/api/.*\.php$ {
    alias /home/webuser/www/mysite.com/api/web;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $request_filename;
    fastcgi_pass unix:/var/run/php/php8.2-fpm-webuser.sock;
    fastcgi_index index.php;
}

Замените php8.2-fpm-webuser.sock на актуальный сокет (может быть php8.3, имя пользователя — ваш).

Это правило:

Позволяет обращаться к Drupal по https://mysite.com/api/...
Обрабатывает PHP-файлы через PHP-FPM
Оставляет React как основной сайт

6. Настройка Drupal как headless CMS

6.1. Установка через установщик

Перейдите по адресу https://mysite.com/api

Следуйте инструкциям. Используйте базу данных, созданную FASTPANEL.

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

В админке Drupal перейдите Расширения → Включить JSON:API.
Сохраните.

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

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


nano ~/www/mysite.com/api/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'],
  'maxAge' => 3600,
  'supportsCredentials' => FALSE,
];

7. Проверка API

Откройте https://mysite.com/jsonapi/node/article.

Обратите внимание: Drupal по умолчанию отдаёт API по /jsonapi, и если вы настроили алиас /api, то API будет доступен по корневому пути — /jsonapi, а не /api/jsonapi. Это нормально, так как /jsonapi — это маршрут, обрабатываемый Drupal через index.php.

8. Установка и настройка React-фронтенда

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


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

8.2. Настройка запросов к Drupal

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


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

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

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

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

export default App;

9. Запуск React с PM2

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


npm install -g pm2

9.2. Запуск


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

Выполните предложенную sudo команду для автозапуска.

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

Откройте: https://mysite.com — должен загрузиться React-фронтенд.
Откройте: https://mysite.com/jsonapi/node/article — должен вернуть JSON со статьями.
Убедитесь, что:
- React отображает данные.
- Нет ошибок CORS в консоли браузера.
- Drupal доступен по https://mysite.com/api (для администрирования).

11. Дополнительные советы

Безопасность: Ограничьте доступ к /admin только по IP или через .htaccess.
Производительность: Включите кэширование в Drupal.
Обновления: Обновляйте Drupal и React независимо.
Резервное копирование: Настройте бэкапы БД и папок /api и / в FASTPANEL.
Логи: Используйте pm2 logs и journalctl -u php8.2-fpm для диагностики.

Заключение

Теперь у вас работает headless Drupal + React на одном домене (mysite.com):

Drupal — в папке /api, API доступно по /jsonapi
React — как основной сайт, запущен через PM2
Всё защищено HTTPS, работает через единый Nginx (настроенный FASTPANEL)

Это оптимальное решение для небольших и средних проектов с единой инфраструктурой.

Семантический поиск vs Поиск по словам: В чем разница?