Развертывание реагирования приложений с помощью Apache2, Как и почему?

В этой статье мы вместе пройдемся через процесс развертывания приложений переднего конечного доступа к производственным условиям (в частности React Приложения).

Как работает веб?

Перед тем, как мы копаем фактические шаги, необходимые для развертывания приложений RACT, давайте сначала подумаем о том, как работает веб в целом.

Когда вы посещаете URL, как это: http://my-domain.com/user/profile , вы в основном отправляете запрос на поиск сети, чтобы найти, если есть Рекорд Для этого домена связаны с любым IP-адресом, AKA Server, и если он найдет один, он отправляет этот запрос на этот сервер. Но для этого сервера сможет справиться с этим запросом, необходимо быть каким-то программным обеспечением, откуда давайте назовем это Веб-сервер Чтобы обработать этот запрос и получить ответ, чтобы отправить его обратно вам!

Существует много веб-серверов, которые вы можете использовать. Для этой статьи мы сосредоточимся на конфигурациях для Apache2 Отказ Еще один популярный вариант, который можно использовать, это Nginx Но идея точно такая же.

Когда этот запрос достигает веб-сервера, что произойдет, это то, что веб-сервер проверяет, если это доменное имя (в нашем случае http://my-domain.com ) сконфигурирован в любой каталог/папку на этом сервере (в случае apache2, корневой каталог по умолчанию — /var/www/html ), и если это так, он в основном обслуживает/отображает файлы/размещенные файлы Путь, который вы передали в URL, /Профиль пользователя . Это означает, что этот запрос перейдет в файлы (по умолчанию файл index.html) в /var/www/html/user/profile каталог.

Виртуальные хосты

Как вы настраиваете доменные имена/каталоги каталогов в Apache2, настроить то, что мы называем Виртуальный хост в этом пути /etc/apache2/Доступные сайты/по умолчанию , в котором в основном позволяет размещать несколько веб-приложений на одной и той же машине, каждый в отдельном каталоге.

Базовый виртуальный хост будет выглядеть так:


  ServerName www.my-domain.com
  ServerAlias my-domain.com
  DocumentRoot "/var/www/html"
  AllowOverride All

Эта конфигурация в основном означает, что любой входящий запрос на Your_ip_address , на порту 80 (Какой порт по умолчанию для Apache2) будет служить файлам, хранящимся в /var/www/html Справочник, следующий за URL, который запрашивал пользователь, отныне давайте назовем это Маршрут .

Обратите внимание, что мы должны были добавить AutoVerride все и это необходимо, потому что нам нужно добавить .htaccess Файл позже, и это должно быть там для него работать.
Вы можете найти это свойство в ваших конфигурациях по умолчанию с AutoVerride None вам просто нужно изменить его на Все И не забудьте перезапустить конфигурации Apache2, запустив эту команду Sudo Systemctl Apache2 Перезагрузите или эквивалентное командование для вашего веб-сервера, чтобы перезапустить свои конфигурации.

HTTPS конфигурации

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

Я мог бы опубликовать другую статью позже о том, как вы можете создавать и поддерживать подписанный сертификат, используя Давайте шифровать Отказ

Ради этой статьи мы предположим, что ваше приложение будет размещено на корневой папке сервера, ака конфигурации по умолчанию.

Хостинг файлов

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

Один из способов ответить на пользователя, который отправляет /пользователь/профиль Запрос — создать каталог /пользователь/профиль В корневом каталоге этого домена, а затем создать index.html Файл в этом каталоге. В этом случае содержание этого файла будет подано пользователю.

Но это не так, как мы здесь! Итак, давайте поговорим о потоке развертывания реагирования.

Реакция развертывания потока

Создайте свое приложение

Чтобы развернуть приложение React, вам сначала необходимо создать приложение, это может отличаться в зависимости от того, как вы структурировали ваше приложение. Но независимо от того, как настроено ваше приложение, вы должны иметь возможность запускать аналогичную команду NPM запустить сборку Команда для создания вашего приложения, которое даст вам окончательные файлы сборки в папке, называемой построить И это файлы, которые нам нужно развернуть/загружать на путь веб-приложения на сервере (в нашем случае /var/www/html/ ).

Два важных пункта, чтобы заметить здесь:

в root Папка вашей папки сборки вы найдете index.html файл;
Если вы откроете этот файл, вы найдете в раздел один или несколько

Оригинал: «https://dev.to/amrhalim/deploy-react-apps-using-apache2-how-and-why-2890»