React и Vue: хостинг и деплой на сервер, термины и чек-лист

Подробности, цифры, термины и чек-лист по теме «React и Vue: хостинг и деплой на сервер». Страница справочника целиком: React хостинг.

Коротко о теме

React хостинг для сборки Vite: платформа деплоя из Git от 1 ₽ или Nginx на VPS, правило try_files для маршрутов. Тот же порядок для Vue.

Подробности по разделам

Установка React на Vite: создание проекта и сборка

На сервер он не годится. Для выкладки выполняют npm run build: в каталоге dist появляются index.html и файлы с хэшами в именах (в папке assets). Проверить результат до загрузки можно командой npm run preview (порт 4173).

Где разместить React-приложение: платформа, VPS или Docker

Для проекта на Vite платформе нужен каталог dist; проверьте, что отдаётся именно он. Сайт на Next.js устроен иначе: ему нужен серверный процесс, как описано на странице Nuxt хостинг.

React на VPS: Nginx, try_files и кэширование

Файл index.html кэшировать нельзя, иначе посетитель не увидит новую версию. Выкладка сводится к копированию каталога: rsync -av --delete dist/ user@server:/var/www/app/dist/. Установка веб-сервера и сертификата: Nginx и Certbot.

Адрес API и переменные окружения в React и Vue

Запросы к бэкенду удобнее вести на тот же домен: Nginx направляет путь /api на приложение, и настраивать CORS не требуется. Если API на другом адресе, разрешить в нём домен фронтенда придётся самим. Размещение бэкенда на Python и Node.js: хостинг с поддержкой Python.

Ключевые цифры

Термины на странице

Nginx
Nginx это веб-сервер и обратный прокси. Его часто ставят перед приложением, чтобы раздавать статику и держать HTTPS.
Node.js
Node.js это среда для запуска JavaScript на сервере.
SSL-сертификат
SSL-сертификат подтверждает, что сайт принадлежит владельцу домена, и позволяет шифровать соединение.
Python
Python это язык программирования. На сервере на нём часто пишут ботов и скрипты.
Продление домена
Продление это оплата домена на следующий срок. Цена продления часто выше цены регистрации.
Certbot
Certbot это программа, которая получает и продлевает сертификаты Let's Encrypt на сервере.

Что проверить

  1. Выберите конфигурацию по памяти и диску под задачу, процессор обычно вторичен.
  2. Проверьте тип виртуализации: KVM даёт свою систему и гарантированные ресурсы.
  3. Уточните, входит ли IPv4 и сколько стоит трафик сверх пакета.
  4. Выпустите сертификат после того, как домен указывает на сервер.
  5. Проверьте, что установлена вся цепочка сертификатов.
  6. Включите перенаправление с HTTP на HTTPS.

Связанные страницы