Вопрос или проблема
Разработка отсоединенного фронтенда, использующего REST API…
Я использую create-react-app, поэтому могу ввести поле proxy, соответствующее WP, в моем package.json, и писать свои вызовы как fetch('/wp-json/v2/pages/...'), если я запускаю yarn start из директории фронтенда…
Хотелось бы на самом деле иметь эту тему в директории wp-content/themes/my-theme
Я не бог в .htaccess
Как мне сделать так, чтобы:
- Общие запросы, такие как
mysite.com/jibble/jabble, обрабатывались моим маршрутизацией SPA - Защищенные маршруты, такие как
mysite.com/wp-admin/*иmysite.com/wp-content/uploads/*, по-прежнему обрабатывались Apache
Хорошо, это, вероятно, немного лишнего, но это работает для меня:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^static/(.*)$ /wp-content/themes/MYTHEME/static/$1 [R=301,NC,L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
Ответ или решение
Настройки .htaccess и прокси для маршрутизации декомпозированного REST API в вашей теме WordPress
Введение
Использование создания фронтенда с помощью create-react-app в контексте декомпозированной архитектуры — это идеальный способ добиться гибкости и производительности в разработке приложений. Однако, действия требуют корректной настройки .htaccess и прокси, чтобы обеспечить правильную маршрутизацию как для клиентских запросов, так и для ресурсов WordPress. В этом руководстве мы разберем, как сделать так, чтобы ваши запросы к API корректно обрабатывались, одновременно позволяя вашему одностраничному приложению (SPA) управлять маршрутизацией на стороне клиента.
Настройки .htaccess
Ваш файл .htaccess является важным инструментом для настройки правил маршрутизации в Apache. Ваша цель заключается в том, чтобы перенаправить определенные запросы на ваше приложение React, а также оставить в силе возможности работы WordPress. Приведенный ниже код .htaccess будет служить основой для вашей настройки:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Перенаправление статических ресурсов на директорию темы
RewriteRule ^static/(.*)$ /wp-content/themes/my-theme/static/$1 [R=301,NC,L]
# Исключение для index.php
RewriteRule ^index\.php$ - [L]
# Условия для проверки существования файла или директории
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Перенаправление всех остальных запросов на index.php
RewriteRule . /index.php [L]
</IfModule>Объяснение правил
-
Включение модуля mod_rewrite:
RewriteEngine Onвключает систему перенаправлений Apache, которая позволяет изменять URL в зависимости от заданных правил. -
Правило для статических ресурсов:
RewriteRule ^static/(.*)$ /wp-content/themes/my-theme/static/$1 [R=301,NC,L]перенаправляет запросы к статическим файлам, хранящимся в вашей теме, что позволяет удобно организовать ресурсы вашего SPA. -
Исключение для index.php:
RewriteRule ^index\.php$ - [L]обеспечивает работу стандартного механизма маршрутизации WordPress, позволяя ему обрабатывать запросы к страницам и постам. -
Проверка существования файла или директории: Условия
RewriteCondидентифицируют, не являются ли запрашиваемые ресурсы фактическими файлами или директориями. Если ни один из этих условий не соответствует, запрос будет перенаправлен. -
Перенаправление на index.php:
RewriteRule . /index.php [L]устанавливает маршрут для всех остальных запросов, направляя их на ваше React-приложение, что позволяет вашему SPA обрабатывать их на клиентской стороне.
Настройки прокси в create-react-app
Вы упомянули, что планируете использовать поле proxy в вашем файле package.json. Отметим, что это критически важно для корректной работы API, вызываемых из вашего React-приложения:
{
"proxy": "http://mysite.com"
}С помощью этого простого добавления вы сможете запускать ваш локальный сервер с возможностью отправлять запросы к WordPress, без необходимости вручную прописывать полный путь.
Защита административных маршрутов
Чтобы ваши защищенные маршруты, такие как mysite.com/wp-admin/* и mysite.com/wp-content/uploads/*, оставались доступными только для Apache, убедитесь, что у вас нет конфликтов с написанными правилами в .htaccess. Данный шаблон гарантирует, что эти маршруты будут обработаны сервером Apache, а не вашим SPA.
Заключение
С этими настройками ваш проект будет готов к работе с декомпозированной архитектурой содержимого, обеспечивая эффективность и защиту. Подобная маршрутизация создает отличные условия для разработки с использованием React и WordPress, что позволяет достичь целей современного веб-разработчика. Убедитесь, что вы тестируете все настройки на локальном окружении перед развертыванием на продакшене, чтобы избежать непредвиденных ошибок.