Установка React на Ubuntu 20.04

Введение

Лучше всего сначала выполнить обновление всей системы. Запускаем команду:

apt-get update -y

После обновления запускаем установку необходимых пакетов:

apt-get install curl gnupg2 -y

Теперь мы готовы к серьёзным изменениям.

Установка Node.js

Надо установить Node.js на сервер. К сожалению, установка Node.js доступна только из его официального репозитория.

Добавляем репозиторий:

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

А теперь ставим Node.js на наш сервер:

apt-get install nodejs -y

После установки Node.js следует обновить NPM до последней версии:

npm install npm@latest -g

Ответ системы должен быть похож на:

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.
updated 2 packages in 12.78s

Проверяем версию установленного Node.js:

node -v

Ответ системы должен быть похож на:

v14.15.3

Похоже на правду? Тогда переходим к следующему шагу.

Установка Create React App Tool

Create React App это инструмент для экономии времени на установку и конфигурацию. Одной команды достаточно для установки:

npm install -g create-react-app

Ответ системы должен быть похож на это:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ create-react-app@4.0.1
added 67 packages from 25 contributors in 4.705s

Если всё в порядке, переходим к следующему этапу.

Создать ваше первое First React App

Попробуем создать React app с помощью инструмента Create React App.

Выберите директорию /opt и создайте тестовое приложение одной командой:

cd /opt
create-react-app reactproject

Вывод системы должен быть:

Success! Created reactproject at /opt/reactproject
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 reactproject
  npm start

Happy hacking!

Теперь смените директорию и выполните:

cd /opt/reactproject
npm start

Ответ системы должен быть:

Compiled successfully!

You can now view reactproject in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Для останова надо нажать CTRL+C.

Startup-File

Если требуется запускать React App автоматически после загрузки системы, надо создать systemd service:

nano /lib/systemd/system/react.service

Добавляем строки:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactproject
ExecStart=npm start -- --port=3000

Сохраняем изменения и применяем их:

systemctl daemon-reload

Теперь запускаем службу React и добавляем в автозапуск:

systemctl start react
systemctl enable react

Можно проверить статус:

systemctl status react

Должен быть получен подобный ответ:

? react.service
     Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
     Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
   Main PID: 30833 (node)
      Tasks: 30 (limit: 4691)
     Memory: 141.0M
     CGroup: /system.slice/react.service
             ??30833 npm
             ??30844 sh -c react-scripts start "--port=3000"
             ??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
             ??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000

Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...

Получен подобный вывод? Поздравляем. Значит, можно идти дальше.

Конфигурируем Nginx для работы с  React App

Следует серьёзно рассмотреть использование nginx для работы с React App. В результате приложение будет доступно по порту 80.

Сначала установим nginx:

apt-get install nginx -y

Теперь создаём виртуальный хост:

nano /etc/nginx/sites-available/reactjs.conf

Добавляем строки:

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.drach.pro;

    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;
    }
}

Сохраняем и разрешаем:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Проверяем конфигурацию на ошибки:

nginx -t

Должно быть следующее сообщение об отсутствии ошибок:

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

Выполняем перезапуск nginx:

systemctl restart nginx

Статус можно проверить этой командой:

systemctl status nginx

Ожидается следующий вывод:

nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sat 2018-02-19 16:55:00 GMT; 4s ago
       Docs: man:nginx(8)
    Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 30915 (nginx)
      Tasks: 3 (limit: 4691)
     Memory: 5.2M
     CGroup: /system.slice/nginx.service
             10910 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             10911 nginx: worker process
             10912 nginx: worker process

Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.

На этом шаге nginx однозначно установлен и готов обслуживать React App. Пора переходить к следующему шагу.

Доступ к React App Web 

В строке поиска в браузере наберите http://reactjs.drach.pro. Вы будете перенаправлены на веб-интерфейс React.Js.

Заключение 

Поздравляем! React.Js установлен на Ubuntu 20.04. Всё должно прекрасно работать!