WordPress и Nuxt на одном домене

В данной статье я расскажу, как подружить WordPress и Nuxt в пределах одного домена.

Введение

В последние годы я активно занимаюсь разработкой в экосистеме Vue.js. Получаю от этого такое же удовольствие, как когда-то при использовании jQuery (не даром на этом блоге столько статей о нем).

Данный сайт долгие годы работает на WordPress. Когда я набрался определенного опыта во фреймворке Nuxt, решил, что пора бы попробовать перенести фронтенд-часть блога на него, а WordPress использовать в качестве headless CMS. Это у меня успешно получилось, и результат вы наблюдаете сейчас.

Важно! Статья актуальна только для тех, у кого, как и у меня, изначально в корне сайта был WordPress, и вы решили добавить к нему Nuxt. При создании сайта с нуля я все сделал бы по-другому: приложение на Nuxt разместил бы в корне сайта, а WordPress в отдельной папке.

Исходные данные:

• Работающий сайт на WordPress.
• Веб-сервер Nginx.

Задача: не трогая файлы WordPress, перенести сайт на Nuxt. Это можно сделать, настроив соответствующим образом Nginx.

Предостережение

Настоятельно рекомендую перед критически важными изменениями делать резервные копии данных на сервере. Если после применения информации из этой статьи у вас что-то сломается, я за это ответственности не несу.

Запуск приложения Nuxt на сервере

Обозначу, что при разработке в качестве менеджера пакетов я использую Bun. Вы можете предпочесть, например, npm, pnpm или что-то еще.

Есть разные способы деплоя Nuxt-проекта на сервере. Я пока делаю следующим образом:

1. Собираю его локально на своем компьютере командой bun run build. В корне появляется папка .output.
2. Загружаю архив с этой папкой на хостинг.
3. Удаляю старую, распаковываю архив.

Чтобы запустить проект, на сервере должен быть установлен Node.js.

Для меня это был первый опыт запуска Node-приложения на сервере, поэтому изучил, как это делается. Узнал про очень полезную штуку – менеджер процессов PM2. Оставлю две ссылки про него на Хабре:

• PM2: подходим к вопросу процесс-менеджмента с умом
• Разворачиваем Node.js-проект (Nuxt.js) на базе VDS с ОС Ubuntu Server

В корне сайта я создал папку nuxt, в которую поместил папку .output и файл конфигурации PM2 ecosystem.config.cjs. Их можно разместить даже в корне сайта, среди файлов и папок WordPress (проверял, работает), но лучше не смешивать все в одну кучу.

Настройка Nginx

Это самая важная часть статьи, ради которой она, собственно, и написана.

Первоначально я сделал следующее (рекомендую поступить так же):

1. Зашел в панель хостинга и сохранил содержимое конфига Nginx в файл к себе на компьютер в качестве бэкапа, чтобы, если что, можно было быстро вернуться к исходному состоянию.
2. Создал второй файл конфига в виде копии первого файла, в котором настроил параметры под Nuxt-проект.

Наличие двух разных файлов позволяет (при необходимости) быстро переключаться между WordPress и Nuxt вариацией сайта. На моем хостинге изменение конфига Nginx не требует перезагрузки чего-либо, поэтому для меня это быстро и удобно.

Итак, необходимо сделать следующие настройки в конфиге Nginx:

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

   set $root_path /var/www/.../site.name/nuxt/.output/public;
   root $root_path;
   

2. Далее меняем блоки “location”. Важно разместить их именно в такой же последовательности, как в этом списке.

   # Проксирование запросов к WordPress
   location ~ ^/(wp-admin|wp-content|wp-includes|feed|index\.php|.*\.xml)(?:$|\/) {
     proxy_pass http://127.0.0.1:81;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Port $server_port;
     proxy_set_header X-Forwarded-Proto $scheme;
   }
   

   Данной настройкой мы составляем список папок и файлов WordPress от корня сайта, которые останутся доступными, в данном примере это:

   • /wp-admin/
   • /wp-content/
   • /wp-includes/
   • /feed/
   • /index.php
   • .*\.xml – маска для файлов типа sitemap.xml

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

3. Чтобы правильно отрабатывали ссылки, начинающиеся с /_nuxt/ от корня, добавляем следующее (путь, конечно же, тоже свой):

   # Раздача статических файлов Nuxt
   location /_nuxt/ {
     alias /var/www/.../site.name/nuxt/.output/public/_nuxt/;
     expires 30d;
   }
   

4. Настройка для всех остальных, кроме указанных выше, запросов:

   # Проксирование остальных запросов к Nuxt: /var/www/.../site.name/nuxt/
   location / {
     proxy_pass http://127.0.0.1:3000;
     proxy_redirect off;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Port $server_port;
     proxy_set_header X-Forwarded-Proto $scheme;
   }
   

5. И в последнюю очередь у меня идет обработка прочих статичных файлов c кэшем в 30 дней:

   location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpeg|avi|zip|gz|bz2|rar|swf|ico|7z|doc|docx|map|ogg|otf|pdf|tff|tif|txt|wav|webp|woff|woff2|xls|xlsx|xml)$ {
     try_files $uri $uri/ =404;
     expires 30d;
   }