Вы можете запускать приложения React даже на виртуальном хостинге!

Когда я впервые начал разработку на React, я подумал, что для размещения приложения React мне необходимо иметь VPS для установки Node.js. Кроме того, я всегда ассоциировал Apache с PHP, полагая, что только приложения PHP могут быть развернуты на сервере Apache. Однако теперь я понимаю, что ни одно из этих утверждений не соответствует действительности. Фактически, вполне возможно развернуть и разместить приложение React на веб-сервере Apache; это возможно даже на виртуальном хостинге. Цель этой статьи - описать вам этот процесс, чтобы вы не впали в те же заблуждения, что и я!

Шаг 1. Создание приложения React

Прежде всего, вам нужно приложение React. Если он у вас уже есть, вы можете пропустить этот шаг.

Чтобы создать новое приложение React, я собираюсь использовать Создать приложение React.

Create React App - это удобная среда для изучения React, и это лучший способ начать создавать новое одностраничное приложение на React. - React-документация

Установите приложение Create React с помощью следующей команды:

npm install -g create-react-app

Выполните эту команду, чтобы создать новое приложение React с именем my-app:

npx create-react-app my-app

В папке my-app теперь должны быть те же файлы и папки, которые показаны на рисунке ниже:

Теперь вы можете приступить к программированию и разработке своего React-приложения!



Три лучших библиотеки пользовательского интерфейса React для начинающих
Плюсы и минусы моих любимых библиотек пользовательского интерфейса React betterprogramming.pub



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

Шаг 2. Настройка package.json

Чтобы разрешить Create React App создавать работающую сборку, добавьте следующее свойство в файл package.json:

"homepage": "https://yourdomain.com"

Как объясняется здесь, это позволит приложению Create React правильно определить, какой корневой путь использовать в сгенерированном HTML-файле.

Вот как выглядит мой файл package.json:

Шаг 3. Создание приложения React

Используйте эту команду, чтобы создать свое приложение React:

npm run build

Как только процесс сборки завершится, будет создана папка build, готовая к развертыванию на вашем веб-сервере Apache.



Как правильно создать приложение React в нескольких средах
Сохраняйте отдельную папку сборки для каждой среды betterprogramming.pub



Обратите внимание: если ваше приложение React использует внешнюю маршрутизацию, этого недостаточно, так как вам нужен файл .htaccess. Создайте файл .htaccess и поместите его в общедоступную папку. Таким образом, он будет автоматически реплицирован в папку build в конце процесса сборки.

Поместите следующую строку в свой файл .htaccess:

FallbackResource ./index.html

Если пользователи попытаются получить доступ к определенной странице напрямую без этой конфигурации (например, https://yourdomain.com/about), будет возвращена ошибка 404. Это связано с тем, что этот URL-адрес не сопоставляется ни с чем в файловой системе вашего сервера. FallbackResource гарантирует, что index.html загружен, вместо того, чтобы разрешить внешнюю маршрутизацию применяться должным образом.

Шаг 4. Развертывание приложения React

Теперь вы готовы развернуть свое приложение! Загрузите каждый файл из папки сборки в папку Document Root вашего домена. Подойдет любой FTP клиент, вроде Filezilla. И вуаля!

Бонус: строительство для относительных путей

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



Настройка субдомена в Apache2
Как настроить виртуальные хосты Apache на сервере Linux codeburst.io



Сначала обновите свойство homepage вашего файла package.json соответствующим образом. Предположим, вы хотите развернуть приложение React во вложенной папке test, тогда свойство вашей домашней страницы должно быть изменено следующим образом:

"homepage": "https://yourdomain.com/test"

Вот как будет выглядеть мой файл package.json:

Затем вам нужно передать "/test" в опору basename в <BrowserRouter>. Таким образом, ваше приложение будет обслуживаться из указанной подпапки.

Вот как будет выглядеть мой App.js:

Теперь вы можете выполнить шаги 3 и 4 (сделанные ранее в этом руководстве), и все будет работать, как ожидалось!

Заключение

Как я только что показал, серверы узлов не требуются для развертывания и размещения приложений React. Это может быть достигнуто без какой-либо деградации, а также поможет в поддержании внешней маршрутизации. Процедура проста и может быть воспроизведена даже на виртуальном хостинге (хотя это может быть немного сложно для относительных путей).

Спасибо за прочтение! Надеюсь, эта статья оказалась для вас полезной. Не стесняйтесь обращаться ко мне с любыми вопросами, комментариями или предложениями.