Цель этого поста — наметить структуру использования Wordpress в качестве инструмента редактирования бэкэнда для обеспечения быстрого интерфейса на основе React.

Примечание. Это еще не полностью реализовано, но это идея, над которой я работаю. Если кто-то хочет внести свой вклад, отправьте мне сообщение в твиттере (@jonstuebe).

Куча

Стек будет построен с использованием контейнеров Docker для быстрого развертывания как локально, так и в облачных сервисах.

Вордпресс сервер

Этот сервер будет работать с образа докера WordPress. Это запустит базовый бэкенд WordPress и API.

Узловой сервер

Этот сервер будет запускаться из образа Docker узла. Он будет запускать как серверную часть рендеринга, так и клиентскую часть реакции.

Node Server (Руководство по стилю)

Этот сервер также будет работать из образа Docker узла. Его цель — показать все компоненты с примерами, чтобы администратор сайта мог их увидеть/использовать. Его также можно использовать в целях разработки.

Жизненный цикл запроса приложения

С точки зрения клиента, первоначальный запрос на загрузку страницы будет исходить от сервера узла, который проверяет маршрут и запрашивает разметку для всех используемых компонентов React.

Внутри этого запроса находится набор запросов API к серверу Wordpress через плагин WP Rest API. Одна из важных вещей, которую следует отметить, заключается в том, что макет страницы с точки зрения того, какие компоненты находятся на конкретной странице, контролируется серверной частью Wordpress, а не кодом на стороне React. Это обеспечивает простое управление, к которому привыкли пользователи Wordpress.

Синхронизация Wordpress/React

Для этого необходим специальный плагин WP для создания маршрутов сайта (карты сайта). При сохранении сервер WordPress отправит веб-перехватчик на сервер узлов, чтобы сохранить изменения в маршрутах.

Чтобы убедиться, что компоненты Wordpress обновлены, существует команда bash, которая является частью процесса развертывания и отправляет список доступных компонентов вместе с их полями на сервер Wordpress через веб-перехватчик.

Примечание. Все запросы веб-перехватчиков следуют стандартным процедурам повтора в случае сбоя.

Местное развитие

Локально образы докеров будут работать на трех отдельных портах. Внутри package.json есть команды, которые локально будут имитировать команды развертывания сервера, позволяя вам запускать синхронизацию доступности компонентов с сервером WP.