Как правильно развернуть React-приложение, состоящее из клиентской и серверной части, и как получить хостинг и домен для него?

У меня есть стандартное React приложение, состоящее из папок client и server, и я хотел бы развернуть его на Рег.ру, получив при этом домен. Я впервые сталкиваюсь с этой задачей. Каковы основные шаги?
  • 27 августа 2024 г. 6:54
Ответы на вопрос 1
Развертывание React-приложения, состоящего из клиентской и серверной части, может быть выполнено с помощью различных способов, но предположим, что мы будем использовать Рег.ру для получения домена и хостинга. Вот основные шаги, которые вам нужно выполнить:

### 1. Подготовка приложения

#### Клиентская часть (React)
- Убедитесь, что ваше React-приложение корректно собрано. Для этого выполните команду:
  ```bash
  cd client
  npm run build
  ```
  Это создаст оптимизированную версию вашего приложения в папке `client/build`.

#### Серверная часть
- Убедитесь, что ваша серверная часть настроена для обслуживания статических файлов. Если вы используете Express, то можете сделать это следующим образом:
  ```javascript
  const express = require('express');
  const path = require('path');
  const app = express();

  // Обслуживаем статические файлы из папки build
  app.use(express.static(path.join(__dirname, 'client/build')));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });

  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
  });
  ```

### 2. Получение домена и хостинга

1. **Регистрация домена**:
   - Зайдите на сайт Рег.ру и зарегистрируйте домен, который вам нужен. Следуйте инструкциям на сайте.

2. **Выбор хостинга**:
   - В Рег.ру выберите подходящий тарифный план хостинга, который поддерживает Node.js (например, облачный хостинг). Убедитесь, что он подходит для ваших нужд.

### 3. Загрузка файлов на хостинг

1. **Подготовка к загрузке**:
   - Убедитесь, что у вас есть все необходимые файлы сервера и собранное приложение клиента на локальном компьютере.

2. **Загрузка файлов**:
   - Подключитесь к хостингу через SSH или FTP (например, с помощью FileZilla) и загрузите содержимое папки `server` и собранную папку `client/build` на сервер.
   - Общая структура может выглядеть так:
     ```
     /home/username
       ├── server
       └── client
           └── build
     ```

### 4. Настройка серверного приложения

- Если вы используете `pm2` для управления приложением, установите его на сервере:
  ```bash
  npm install pm2 -g
  ```
- Перейдите в директорию с сервером (`cd server`) и запустите серверное приложение:
  ```bash
  pm2 start index.js --name my-app
  ```

### 5. Настройка домена

1. **Привязка домена к вашему хостингу**:
   - В настройках домена в Рег.ру укажите DNS-серверы вашего хостинга или создайте запись A, указывающую на IP-адрес вашего сервера.

2. **Проверка работоспособности**:
   - После того как записи распространены (обычно это занимает от нескольких минут до 24 часов), вы сможете зайти на свой домен и увидеть ваше приложение.

### 6. Дополнительные настройки

- Убедитесь, что ваше приложение работает корректно в продакшене и настройки окружения (например, переменные окружения) выставлены правильно.
- Рассмотрите возможность использования HTTPS, для этого вам может понадобиться сертификат SSL (в Рег.ру эти сертификаты могут быть доступны).

### Заключение

После выполнения всех указанных шагов, вы сможете успешно развернуть своё React-приложение на Рег.ру с доменом. Если у вас возникнут дополнительные вопросы, не стесняйтесь искать руководство по управлению вашим конкретным типом хостинга или обратитесь в поддержку Рег.ру.
Похожие вопросы