news
Serverspace запустил услугу Managed Kubernetes
VB
Vyacheslav Breus
18 августа 2022
Обновлено 2 сентября 2022

Развертывание приложения React на Nginx под Ubuntu

Nginx Ubuntu

О чем эта статья

В этой статье вы узнаете, как подготовить сервер на Ubuntu 20.04 и затем развернуть на нем приложение ReactOS совместно с веб-сервером Nginx.

В Serverspace вы можете создать сервер с уже установленным приложением Nginx.

Что важно знать перед установкой

Чтобы вы могли установить приложение React на свой сервер, должны быть выполнены следующие требования:

  • Ваш сервер должен работать под управлением современной операционной системы семейства Linux, например Ubuntu 20.04
  • У вас должен быть root-доступ или ваш пользователь должен входить в группу sudo
  • Также понадобится доменное имя с корректными настройками DNS. A-записи домена должны быть "направлены" на "внешний" IP-адрес вашего сервера.

Процесс установки

  • Первый этап - авторизация от имени привилегированной учетной записи и установка NodeJS:
sudo -s
apt install nodejs npm -y
  • Следующий шаг — установка пакета npx. Выполните команду:
npm i -g npx -y
  • Для "промежуточной" проверки того, что все установилось корректно, дайте следующие команды:
node -v
npm -v
npx -v

Об успехе свидетельствует картина наподобие изображенной ниже:

рис.1

  • Первое react-приложение создается очень просто, буквально одной строкой:
npx create-react-app <ИМЯ_ПРИЛОЖЕНИЯ>

Процесс может занять некоторое время, будьте терпеливы. В итоге вы увидите что-то вроде изображения ниже и можно будет перейти к следующему разделу:

рис.2

Установка веб-сервера

  • Для удобной работы с только что созданным приложением понадобится любой современный веб-сервер, проиллюстрирую на примере Nginx. Чтобы установить его, выполните команду:
apt install -y nginx
  • Создайте минимально необходимое описание конфигурации вашего веб-сайта:
cat <<EOF > /etc/nginx/sites-enabled/<ДОМЕННОЕ_ИМЯ>
server {
listen 80;
root /var/www/<ДОМЕННОЕ_ИМЯ>;
index index.php index.html;
server_name <ДОМЕННОЕ_ИМЯ> www.<ДОМЕННОЕ_ИМЯ>;
location / {
}
}
EOF

Первый запуск приложения

  • Для инициализации вашего приложения потребуется дать команды:
cd /home/<ИМЯ_ПОЛЬЗОВАТЕЛЯ>/<КАТАЛОГ_ПРИЛОЖЕНИЯ>
npm start

В идеале вы должны увидеть что-то похожее на картинку ниже:

рис.4

  • Откройте в браузере адрес http://<IP_ВАШЕГО_СЕРВЕРА>:3000:

рис.5

Если вы увидели в браузере страницу наподобие показанной выше, можете остановить работу приложения, нажав CTRL+C в SSH-консоли и переходите к следующему шагу.

  • Перейдите в каталог с файлами вашего приложения и запустите процесс компиляции:
cd /home/<ИМЯ_ПОЛЬЗОВАТЕЛЯ>/<КАТАЛОГ_ПРИЛОЖЕНИЯ>
npm run build

Немного подождите. Об успехе процедуры свидетельствует картина наподобие изображенной на скриншоте:

рис.6

  • Теперь можно поместить скомпилированные файлы в директорию вашего сайта и перезапустить веб-сервер:
mkdir /var/www/<ДОМЕННОЕ_ИМЯ> && cp /home/<ИМЯ_ПОЛЬЗОВАТЕЛЯ>/<КАТАЛОГ_ПРИЛОЖЕНИЯ>/build/* /var/www/<ДОМЕННОЕ_ИМЯ>
systemctl enable nginx && service nginx restart

рис.7

Финальная проверка

Чтобы проверить результат, просто откройте свой сайт в браузере. Об успехе свидетельствует такая страница:

рис.8

Заключение

В этой статье мы описали, как установить NodeJS, создать свое первое приложение и развернуть его на своем веб-сайте с помощью веб-сервера Nginx.

Оценка:
5 из 5
Аverage rating : 5
Оценок: 1
191028 Санкт-Петербург Литейный пр., д. 26, Лит. А
+7 (812) 403-06-99
700 300
ООО «ИТГЛОБАЛКОМ ЛАБС»
700 300