ServBay

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Создание и запуск React-проекта в локальной среде macOS с помощью ServBay ​

Что такое React? ​

React — это открытая JavaScript-библиотека, поддерживаемая компанией Meta (ранее Facebook) и сообществом, специально предназначенная для построения пользовательских интерфейсов (UI). React реализует компонентный подход для создания интерактивных UI, что позволяет разработчикам эффективно строить сложные и легко обслуживаемые одностраничные приложения (SPA) и крупные web-проекты. Основные преимущества React — декларативная парадигма программирования, эффективное обновление виртуального DOM и развитая экосистема сообщества.

Ключевые особенности и преимущества React ​

  • Компонентный подход: Позволяет разбивать сложный интерфейс на отдельные переиспользуемые компоненты, повышая модульность и поддержку кода.
  • Декларативное описание UI: UI описывается простым способом, а React самостоятельно следит за синхронизацией DOM в соответствии с текущим состоянием, что упрощает логику разработки.
  • Virtual DOM: Поддерживает виртуальное представление DOM в памяти и минимизирует реальные манипуляции благодаря сравнительному анализу изменений, что значительно ускоряет работу интерфейса.
  • Однонаправленный поток данных: Данные движутся сверху вниз, что облегчает отслеживание и понимание изменений состояния приложения.
  • JSX: Расширение синтаксиса JavaScript, позволяющее описывать HTML-подобную структуру прямо в JS-коде, что делает его более читаемым.
  • Развитая экосистема: Сотни сторонних библиотек и мощная поддержка сообщества (например, React Router, Redux/Zustand/MobX, Material UI и др.) покрывают различные аспекты: управление состоянием, маршрутизацию, UI-компоненты и пр.

Используя React, разработчики могут быстрее и эффективнее создавать современные и высокопроизводительные web-приложения.

Развертывание среды разработки и продакшн React в ServBay ​

ServBay — мощная локальная среда для web-разработки, предоставляющая macOS-пользователям удобный доступ к множеству пакетов, включая Node.js. В этом руководстве вы узнаете, как с помощью Node.js в ServBay и функции «Сайты» (Websites) пошагово создать, настроить и запустить React-проект — c настройкой обратного прокси для разработки и раздачей статических файлов в продакшене.

Требования ​

Перед началом убедитесь, что выполнены следующие условия:

  1. Установлен ServBay: Программа ServBay успешно установлена и работает на вашем macOS.
  2. Установлен пакет Node.js: Через графический интерфейс или CLI ServBay вы установили пакет Node.js. Подробные шаги приведены в документации по установке Node.js в ServBay. ServBay автоматически управляет версиями Node.js и переменными среды.

Создание нового React-проекта ​

Для быстрого создания React-приложения мы используем современный инструмент сборки Vite, обеспечивающий молниеносный старт и моментальное обновление модулей (HMR), что стало современным стандартом (вместо устаревшего create-react-app).

  1. Откройте терминал и перейдите в корневую папку для сайтов

    Откройте приложение Терминал. Рекомендуемая ServBay папка для сайтов — /Applications/ServBay/www. Перейдите в нее:

    bash
    cd /Applications/ServBay/www

  2. Создайте новый React-проект с помощью Vite

    Выполните команду для создания проекта servbay-react-demo с использованием шаблона React:

    bash
    npx create-vite servbay-react-demo --template react
    • npx — исполнитель npm-пакетов, позволяющий запускать инструменты с npm прямо из командной строки без предварительной глобальной установки. Гарантирует, что используется последняя версия create-vite.
    • create-vite — официальный генератор проектов Vite.
    • servbay-react-demo — имя новой папки с проектом.
    • --template react — инициализация структуры проекта с шаблоном React.

    Следуйте подсказкам в терминале для завершения создания проекта.

  3. Перейдите в каталог проекта и установите зависимости

    Зайдите в папку нового проекта и выполните установку npm-зависимостей:

    bash
    cd servbay-react-demo
npm install
    • При желании можно использовать yarn install или pnpm install, если вы предпочитаете менеджеры пакетов Yarn или pnpm.

Редактирование содержимого React-проекта (необязательно) ​

Для проверки работоспособности настройки отредактируем главную страницу.

  1. Откройте файл src/App.jsx или src/App.tsx

    В любимом редакторе кода откройте файл src/App.jsx (для JS-шаблона) или src/App.tsx (для TypeScript-шаблона).

  2. Измените содержимое

    Найдите код рендеринга основного содержимого и измените его, чтобы отображалась надпись "Hello ServBay!":

    javascript
    // ... другие импорты ...
import './App.css';

function App() {
  // ... другой код ...
  return (
    <>
      {/* ... другие элементы ... */}
      <h1>Hello ServBay!</h1>
      {/* ... другие элементы ... */}
    </>
  );
}

export default App;

    Сохраните файл.

Запуск в режиме разработки ​

В процессе разработки обычно запускается локальный сервер, поддерживающий горячую замену модулей (HMR) для более эффективной и приятной работы. ServBay с помощью обратного прокси (Reverse Proxy) позволяет перенаправлять внешние запросы к этому серверу.

  1. Запустите dev-сервер из терминала

    Находясь в папке servbay-react-demo, выполните:

    bash
    npm run dev -- --port 8585
    • npm run dev запускает скрипт dev из package.json проекта, который, как правило, запускает Vite dev-сервер.
    • -- --port 8585 передает номер порта в команду Vite.

    После запуска адрес локального сервера будет выведен в терминале (например, http://localhost:8585). Не закрывайте терминал, пока сервер работает!

  2. Настройте обратный прокси в ServBay

    Откройте интерфейс приложения ServBay и перейдите в раздел Сайты (Websites). Нажмите кнопку добавления нового сайта и заполните конфигурацию:

    • Имя (Name): ServBay React Dev (описательное название)
    • Домен (Domain): servbay-react-dev.servbay.demo (тестовый домен с брендом ServBay)
    • Тип сайта (Site Type): Обратный прокси (Reverse Proxy)
    • Proxy IP: 127.0.0.1 (локальный сервер)
    • Proxy Port: 8585 (тот же порт, что и у dev-сервера)

    Сохраните изменения. ServBay автоматически применит их и настроит встроенный web-сервер (Caddy или Nginx) для перенаправления запросов с servbay-react-dev.servbay.demo на http://127.0.0.1:8585.

    Подробнее см. документацию по управлению сайтами в ServBay.

  3. Откройте сайт разработки

    В вашем браузере перейдите по адресу: https://servbay-react-dev.servbay.demo.

    • Благодаря функционалу ServBay, SSL-сертификат для локального сайта будет выдан автоматически (CA ServBay User или ServBay Public), и вы сможете работать по защищённому HTTPS. Подробнее об SSL в ServBay читайте в разделе Защита вашего сайта с помощью SSL.
    • Теперь при сохранении файлов проекта в редакторе страница в браузере будет автоматически обновляться — это и есть горячая замена модулей (HMR).

Сборка продакшн-версии ​

По завершении разработки для публикации приложения требуется создать оптимизированную продакшн-сборку.

  1. Соберите продакшн-версию через терминал

    В каталоге проекта выполните:

    bash
    npm run build

    Эта команда запускет скрипт build из package.json. Для проектов React на базе Vite она скомпилирует, соберёт и оптимизирует исходный код в набор статических файлов (HTML, CSS, JS, ассеты и др.) в папке dist. После завершения увидите сообщение об успешной сборке.

  2. Настройте раздачу статики в ServBay

    Папка dist, полученная после сборки, содержит все необходимые статические файлы для размещения на web-сервере. В ServBay настройте новый статический сайт, который будет указывать на этот каталог.

    Откройте интерфейс ServBay, перейдите в раздел Сайты (Websites) и добавьте новую конфигурацию:

    • Имя (Name): ServBay React Prod (описательное название)
    • Домен (Domain): servbay-react.servbay.demo (отдельный домен для продакшн-варианта, отличающийся от dev-домена)
    • Тип сайта (Site Type): Статический (Static)
    • Корневая папка сайта (Website Root Directory): /Applications/ServBay/www/servbay-react-demo/dist (путь к папке dist после сборки)

    Сохраните изменения. ServBay автоматически настроит веб-сервер для раздачи статики из вашего dist.

  3. Откройте продакшн-сайт

    Перейдите в браузере на ваш новый домен: https://servbay-react.servbay.demo.

    Вы увидите оптимизированную версию своего проекта. Как и в dev-режиме, SSL поддерживается автоматически.

Итоги ​

Следуя этому руководству, вы научились создавать React-проект в локальной среде macOS с помощью ServBay и настраивать отдельные сайты для обратного прокси (режим разработки) и раздачи статики (продакшн). ServBay значительно упрощает локальную web-разработку благодаря встроенной поддержке Node.js, гибкой настройке сайтов (прокси и статика), а также автоматическому получению SSL-сертификатов. На этой базе вы можете быстро разрабатывать, тестировать и публиковать свои React-приложения.