React Js: Как развернуть приложение React на cPanel в подкаталоге

Развернуть любое приложение на cPanel несложно. Но это зависит от типа среды приложения и зависимостей. Самой утомительной работой является конфигурация внутри любого сервера на основе зависимостей, будь то виртуальный хостинг, VPS или AWS. Мы можем разместить React App на любом сервере. Как мы знаем, для запуска приложений React нам нужны Node JS и NPM для управления зависимостями приложения. Когда мы создаем сборку, она генерирует скрипты, которые будут выполняться на сервере. Как правило, после создания сборки она принимает путь к корневой папке каталога проекта. Когда мы развертываем ее на сервере, она пытается найти этот путь. Поэтому, в основном, если у нас есть основной домен, на котором мы хотим развернуть приложение React, то оно будет развернуто легко. Но в случае, если вы хотите развернуть React-приложение внутри подкаталога домена, то сделать это будет непросто. Сегодня, в этой статье, вы узнаете, как развернуть React приложение в поддиректории на cPanel.

Предпосылки

Эта статья о том, как развернуть приложение React в подкаталоге на cPanel. Итак, для этого вам понадобится установленное приложение React и cPanel, готовая к развертыванию. Вы можете разместить React app на Firebase или на любом бесплатном хостинге.

• React App
• cPanel/WHM

Деплой приложения React в подкаталоге в корневом домене cPanel

На первом этапе мы создадим поддиректорию в каталоге корневого домена. Итак, по умолчанию у нас есть каталог public_html для домена, который отображается в cPanel. Предположим, у вас есть домен example.com с корневым каталогом public_html. Но мы хотим разместить приложение React в подкаталоге app внутри public_html.

Следовательно, мы создадим подкаталог с именем app внутри public_html (корневого каталога домена). Таким образом, URL для React-приложения станет example.com/app.

После создания подкаталога мы перейдем к приложению React для некоторой настройки на уровне приложения.

Настройка React App для размещения в подкаталоге cPanel

На уровне приложения нам необходимо настроить поддиректорию, которую мы создали в cPanel.

На начальном этапе откройте проект в любом редакторе (рекомендуется VS Code) и перейдите к файлу package.json, находящемуся в корне каталога проекта.

Затем добавьте атрибут с именем homepage, как показано ниже.

"homepage: "/sub-directory"

Итак, в нашем случае, после добавления имени каталога (app), это будет выглядеть следующим образом.

package.json

{
  "name": "react-blog-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/app",
  "dependencies": {
    ....
    ....
    ....
  },

Мы указали имя папки как атрибут homepage с именем каталога в объекте package.json.

Обновление DOM React Router для базового маршрутизатора

На следующем этапе нам нужно будет обновить BrowserRouter. Поскольку у нас уже есть DOM React Router для управления маршрутизацией для приложения React.

Теперь мы добавим атрибут basename в компонент <Router>. В атрибуте basename мы передадим имя нашего подкаталога (app), как показано ниже.

App.jsx

import React from 'react';
import { BrowserRouter as Router } from "react-router-dom";
import { AppRouter } from './components/AppRouter';
import './App.scss';

export const App = () => {
  return (
    <Router basename={"/app"}>
      <AppRouter />
    </Router>
  );
};

Реквизит basename будет помогать запросу искать в указанном каталоге, как мы добавили app.

Сборка приложения React для развертывания на Production

На следующем этапе нам необходимо создать сборку приложения, чтобы мы могли развернуть его на продакшене (production). Для создания сборки выполните в терминале следующую команду.

npm run build

Создание файла .htaccess для подкаталога

Как только мы развернем приложение React на сервере, мы сможем получить к нему доступ. Если вы попытаетесь получить доступ к приложению через корневой домен с последующей директорией (example.com/app), вы получите ответ 404. Каталог не будет доступен через URL. Поэтому, чтобы управлять перенаправлением, вам нужно добавить простой файл .htaccess, чтобы указать серверу возвращаться к нашему файлу index.html. Это та же конфигурация, которую мы бы использовали, если бы приложение находилось в корне сервера, только с другим абсолютным путем к нашему индексному файлу.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /app/index.html [L]
</IfModule>

Вот и все. Теперь вы можете обновить страницу и попытаться получить доступ к URL приложения (example.com/app).