Деплой React-приложения

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

    Что такое React

    React — это библиотека JavaScript, которая используется при создании пользовательских интерфейсов приложений. С помощью набора функций и классов React можно настроить реактивность: процесс, когда на одно изменение откликается вся система.

    Для чего еще можно использовать React.js:

    • для быстрого создания отдельных элементов и целых страниц — это возможно благодаря тому, что в React можно использовать компоненты повторно;
    • для работы со сложной программной структурой — подход, который реализован в React, помогает упростить некоторые процедуры;
    • для внедрения нового функционала в приложении, созданном на другом стеке технологий — React не зависит от других инструментов;
    • для создания SPA и PWA приложений — они выполняют функции программ и веб-сервисов;
    • для работы с серверной частью сайта, сочетая React с другими инструментами;
    • для разработки мобильных приложений (Mobile Apps) и сервисов.

    Библиотека React обладает рядом преимуществ:

    • Популярность. React входит в тройку самых популярных инструментов фронтенд-разработки.
    • Декларативность. Это означает, что все элементы коды при доработке обновляются автоматически. Задача разработчика — корректно их описать.
    • Удобная отладка. React реализует многие элементы автоматически: благодаря этому можно минимизировать ошибки в коде. Однако если программист все-таки ошибся, недочет можно быстро скорректировать.
    • Высокая скорость. React позволяет не прописывать логику с нуля, а доверить это автоматизированной системе. Это ускоряет разработку приложения.
    • Обновление компонентов DOM-дерева по частям. Любая веб-страница состоит из кода HTML, стилей CSS и подключенного к ним кода на JavaScript — это называется DOM-деревом. React хранит в кэше виртуальную копию этого дерева, которая изменяется быстрее оригинала. Помимо этого, Реакт позволяет обновлять копию по частям — это ускоряет обновление страниц.
    • Большое сообщество. React имеет открытый исходный код — это значит, что в него можно вносить собственные доработки. Существует большое количество IT-форумов, на которых разработчики делятся опытом работы с продуктом.

    Как подготовить сервер к установке React

    Для работы с React вам потребуется поддержка Gitlab. Ее наличие можно проверить с помощью команды:

    git help hooks

    В ответе вы получите справочную информацию о хуках Git (Deploy).

    Подготовка сервера к установке React включает в себя три этапа:

    • 1.
      Установка дополнительных пакетов.
    • 2.
      Установка Nginx и настройка виртуальных хостов.
    • 3.
      Установка Node.js.

    Каждый из них мы подробно опишем ниже.

    Этап 1: Установка дополнительных пакетов

    • 1
      Подключитесь к серверу по SSH.
    • 2

      Обновите репозиторий. Для этого поочередно выполните команды:

      sudo apt update
sudo apt upgrade
    • 3

      Установите пакеты, которые необходимы для работы:

      sudo apt install curl gnupg2 -y
    • 4

      Установите диспетчер пакетов Yarn — он понадобится при работе с React-проектом:

      sudo apt install yarn

    Этап 2: Установка Nginx и настройка виртуальных хостов

    • 1
      Подключитесь к серверу по SSH.
    • 2

      Обновите пакеты. Для этого поочередно выполните команды:

      sudo apt update
sudo apt upgrade
    • 3

      Установите веб-сервер Nginx. Для этого введите команду:

      sudo apt install nginx -y
    • 4

      Добавьте Nginx в список исключений ufw. Для этого поочередно выполните команды:

      sudo ufw app list
sudo ufw allow 'Nginx HTTP'
    • 5

      Создайте директорию доменного имени:

      sudo mkdir -p /var/www/test.ru/html

      Вместо test.ru укажите ваш домен.

    • 6

      Скопируйте содержимое блока server с помощью команды:

      sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/test.ru

      Вместо test.ru укажите ваш домен.

    • 7

      Откройте созданный файл:

      sudo nano /etc/nginx/sites-available/test.ru

      Вместо test.ru укажите ваш домен.

    • 8

      Измените строки:

      server {
        listen 80;
        listen [::]:80;
root /var/www/test.ru/html;
server_name test.ru www.test.ru;

      Вместо test.ru укажите ваш домен.

      После этого сохраните изменения и закройте текстовый редактор.

    • 9

      Создайте символическую ссылку с помощью команды:

      sudo ln -s /etc/nginx/sites-available/test.ru /etc/nginx/sites-enabled/

      Вместо test.ru укажите ваш домен.

    • 10

      Откройте конфигурационный файл Nginx:

      sudo nano /etc/nginx/nginx.conf
    • 11

      Раскомментируйте следующую строку:

      server_names_hash_bucket_size

      После этого сохраните изменения и закройте файл.

    • 12

      Проверьте синтаксис конфигурационного файла на ошибки:

      sudo nginx -t

      На экране отобразится вывод:

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
    • 13

      Перезагрузите Nginx:

      sudo systemctl restart nginx

      После этого перейдите по домену и проверьте работу виртуального хоста.

    Этап 3: Установка Node.js

    • 1
      Подключитесь к серверу по SSH.
    • 2

      Обновите пакеты. Для этого поочередно выполните команды:

      sudo apt update
sudo apt upgrade
    • 3

      Добавьте репозиторий:

      curl -sL https://deb.nodesource.com/setup_14.x | bash -
    • 4

      Установите Node.js:

      sudo apt-get install -y nodejs

      Затем проверьте установку с помощью команды:

      node -v

      Если установка прошла корректно, на экране отобразится версия Node.js, например:

      v14.21.3
    • 5

      Установите менеджер пакетов npm:

      sudo apt install npm

      Затем проверьте установку с помощью команды:

      npm -v

      Если установка прошла корректно, на экране отобразится версия Node.js, например:

      9.2.0

    Готово. Теперь вы можете начать деплой сайта или приложения.

    Как установить React

    • 1
      Подключитесь к серверу по SSH.
    • 2

      Установите инструмент для работы с React:

      npm install -g create-react-app

      Если установка прошла корректно, на экране отобразится следующий вывод:

      /usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js + create-react-app@5.0.1 added 67 packages from 27 contributors in 7.39s

    Готово. Теперь вы можете проверить работу React.

    Как задеплоить React-приложение

    Для того чтобы задеплоить приложение, необходимо создать проект React и внести корректировки в конфигурационный файл Nginx. Для этого:

    • 1
      Подключитесь к серверу по SSH.
    • 2

      Создайте директорию:

      mkdir ~/opt
    • 3

      Перейдите в созданную директорию:

      cd ~/opt
    • 4

      Для создания проекта выполните команды:

      npm config set legacy-peer-deps true
create-react-app react-project-for-deploy

      Вместо react-project-for-deploy укажите название проекта.

      Если проект создался корректно, в выводе отобразится следующий текст:

      Success! Created react-project-for-deploy at /opt/react-project-for-deploy

Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd react-project-for-deploy
  npm start
Happy hacking!

      Вместо react-project-for-deploy будет указано имя вашего приложения.

    • 5

      Откройте конфигурационный файл Nginx:

      sudo nano /etc/nginx/nginx.conf
    • 6

      Добавьте строки в блок http {:

      upstream backend {
  server localhost:3000;
}
server {
    listen 80;
    server_name test.ru;
    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;
        proxy_redirect off;
    }
}

      Вместо test.ru укажите ваше доменное имя.

      Затем сохраните изменения и закройте файл.

    • 7

      Проверьте синтаксис конфигурационного файла с помощью команды:

      nginx -t

      Вывод команды будет выглядеть так:

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok 
nginx: configuration file /etc/nginx/nginx.conf test is successful
    • 8

      Перейдите в директорию проекта:

      cd ~/opt/react-project-for-deploy

      Вместо react-project-for-deploy укажите название директории вашего приложения.

    • 9

      Запустите тестовое приложение:

      npm start

      После запуска на экране отобразится следующий текст:

      Compiled successfully!
You can now view react-project-for-deploy in the browser.
  http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully

      Вместо react-project-for-deploy будет указано имя вашего приложения.

    Помогла ли вам статья?

    Спасибо за оценку. Рады помочь 😊

     👍
    Специальные предложения