headless wp starter

Postlight WordPress + React Starter Kit - это автоматизированный набор инструментов, который развернет три вещи:

1. Бэкэнд WordPress, который обслуживает свои данные через WP REST API и GraphQL.
2. Образец реагирования Frontend, работающий на API WP GraphQL, который поддерживает посты, страницы, категории, меню, поиск и вход пользователя.
3. Еще один образец серверной визуализации REACT Frontend с использованием следующего.

Вы можете прочитать все об этом в этом удобном введении.

Что внутри:

• Автоматизированный установщик, который загружает основную установку WordPress, которая обеспечивает установленную стабильную API REST.
• Плагин, который разоблачает более новый, в прогнозировании API GraphQL для WordPress.
• Плагины WordPress, необходимые для настройки пользовательских типов публикаций и пользовательских полей (расширенные пользовательские поля и пользовательский интерфейс post type).
• Плагины, которые разоблачают эти пользовательские поля и меню WordPress в WP REST API (ACF для WP API и WP-REST-API V2).
• Плагины аутентификации JWT: JWT WP REST и JWT WP GRAPHQL.
• Весь код и настройки темы Starter WordPress требуется без головы, включая красивые постоянные ссылки, заголовки CORS, Allow-Origin и полезные функции журнала для легкой отладки.
• Механизм для легкого импорта данных из существующей установки WordPress в любом месте в Интернете с использованием WP Migrate DB Pro и сопровождающих плагинов (требуется лицензия).
• Образец, стартовый фронт, приложение React, питаемое на GraphQL.
• Еще один образец, приложение React Frontend Starter Frontend, на стороне сервера, отображаемое через next.js, питаемое на API WP REST.
• Контейнеры Docker и сценарии для управления ими, для легкости запуска приложений Frontend React и бэкэнда локально или развертывания любого хостингового поставщика с поддержкой Docker.

Давайте начнем.

Установить

Условие: Прежде чем начать, вам нужен установлен Docker. На Linux вам может потребоваться установить Docker-Compose отдельно.

Docker Compose строит и запускает четыре контейнера по умолчанию: db-headless , wp-headless , frontend & frontend-graphql :

 docker-compose up -d

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

Вы можете следовать выходу Docker, чтобы увидеть прогресс и журналы сборки:

 docker-compose logs -f

В качестве альтернативы, вы можете использовать некоторые полезные инструменты Docker, такие как Kitematic и / или плагин Vscode Docker, чтобы следовать журналам, запуска / остановки / удаления контейнеров и изображений.

Необязательно: вы можете запустить фронт локально, пока WordPress все еще работает на Docker:

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

После того, как контейнеры работают, вы можете посетить Frontends React и бэкэнд -администратор WordPress в вашем браузере.

Внешний интерфейс

Этот стартовый комплект предоставляет два контейнера для фронта:

• Контейнер frontend , работающий на API WP REST, представляет собой серверную сторону с использованием next.js, и выставлен на порту 3000 : http: // localhost: 3000
• Контейнер frontend-graphql , работающий на графике, открывается на порту 3001 : http: // localhost: 3001

Вот как выглядит Frontend:

Вы можете следовать выходу yarn start , запустив команду logs Docker-Compose, за которой следует имя контейнера. Например:

 docker-compose logs -f frontend

Если вам нужно перезапустить этот процесс, перезапустите контейнер:

 docker-compose restart frontend

PS: Просмотр Frontend Next.js в режиме разработки является относительно медленным из -за того, что страницы строятся по требованию. В производственной среде будет значительное улучшение нагрузки страницы.

Бэкэнд

Контейнер wp-headless обнажает Apache на хосте порта 8080 :

• Панель инструментов: http: // localhost: 8080/wp-admin (учетные данные по умолчанию postlight / postlight )
• REST API: http: // localhost: 8080/wp-json
• GraphQL API: http: // localhost: 8080/graphql

Этот контейнер включает в себя некоторые инструменты разработки:

 docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Журналы Apache/PHP доступны через docker-compose logs -f wp-headless .

База данных

Контейнер db-headless разоблачает MySQL на хосте 3307 :

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

Вы также можете запустить оболочку MySQL на контейнере:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

Переустановление/импорт

Чтобы переустановить WordPress с нуля, запустите:

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

Чтобы импортировать данные из mysqldump с mysql , запустите:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

Импорт данных из другой установки WordPress

Вы можете использовать плагин под названием WP Migrate DB Pro для подключения к другой установке WordPress и импортируется данные. (Потребуется профессиональная лицензия.)

Для этого сначала SET MIGRATEDB_LICENSE & MIGRATEDB_FROM IN .env и воссоздайте контейнеры для принятия изменений.

 docker-compose up -d

Затем запустите сценарий импорта:

 docker exec wp-headless migratedb_import

Если вам нужно больше расширенных функциональных возможностей, посмотрите доступные команды WP-CLI:

 docker exec wp-headless wp help migratedb

Расширить все остальные и API GraphQL

На этом этапе вы можете начать настройку пользовательских полей в администраторе WordPress, и, если необходимо, создавая пользовательские конечные точки API REST в теме стартового слова WordPress Postlight.

Основной код темы расположен в wordpress/wp-content/themes/postlight-headless-wp .

Вы также можете изменить и расширить API GraphQL, пример создания пользовательского типа и регистрации резольвера, расположен в: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

Authentication Rest & GraphQL JWT

Чтобы дать пользователям WordPress возможность войти через приложение Frontend, используйте что-то вроде генератора соли WordPress для генерации секрета для JWT, а затем определите его в wp-config.php

Для остальных API:

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

Для API GraphQL:

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

Обязательно прочитайте документацию JWT Rest и JWT GraphQL для получения дополнительной информации.

Лининг

Не забудьте прокинуть свой код по ходу дела.

Чтобы провести модификации темы WordPress, вы можете использовать PHP_Codesniffer, как это:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

Вы также можете попытаться автофикс ошибок PHPCS:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

Чтобы оборвать и отформатировать приложения JavaScript, включены как более красивые файлы, так и файлы конфигурации Eslint.

Хостинг

Большинство хостов WordPress также не размещают приложения узлов, поэтому, когда придет время выйти в жизнь, вам нужно будет найти услугу хостинга для фронта.

Вот почему мы упаковали приложение Frontend в контейнере Docker, который можно развернуть для хостинга с поддержкой Docker, такой как Amazon Web Services или Google Cloud Platform. Для быстрой, более легкой альтернативы, проверьте сейчас.

Устранение неполадок общих ошибок

Оповещение о нарушении изменений - Docker

Если у вас уже была установлена проект, а затем обновился на коммитировку более новым, чем 99b4d7b , вам нужно будет снова пройти процесс установки, потому что проект был перенесен в Docker. Вам также нужно также перенести данные MySQL в новый контейнер DB MySQL.

Докер кэширование

В некоторых случаях вам необходимо удалить изображение wp-headless (не только контейнер) и восстановить его.

Ошибки CORS

Если вы развернули свою установку WordPress и у вас возникли проблемы с CORS, обязательно обновите /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php /themes/postlight-boelless-wp/inc/frontend-origin.php с вашим URL Frontend Origin.

Видишь что -нибудь еще, что вы хотели бы добавить здесь? Пожалуйста, отправьте запрос на привлечение!

---

? Проект лабораторий от ваших друзей на Postlight. Счастливого кодирования!