Цель этого поста — наметить структуру использования 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.