Поиск по сайту:

Как установить ReactJS на Ubuntu 20.04


Это руководство существует для этих версий ОС

  • Ubuntu 22.04 (Jammy Jellyfish)
  • Ubuntu 20.04 (Focal Fossa)

На этой странице

  1. Предпосылки
  2. Начало работы
  3. Установите Node.js
  4. Установите инструмент создания приложения React
  5. Создайте свое первое приложение React
  6. Создание файла запуска для приложения React
  7. Настройка Nginx для приложения React
  8. Доступ к веб-интерфейсу приложения React
  9. Заключение

ReactJS — это бесплатная библиотека JavaScript с открытым исходным кодом, используемая для создания многократно используемых компонентов пользовательского интерфейса. Он был разработан Facebook в 2011 году для быстрого и эффективного создания многофункциональных и привлекательных веб-приложений с минимальным кодированием. Он позволяет создавать интерактивные элементы на веб-сайтах. Он использует Virtual DOM, что делает приложение быстрым. Он предлагает богатый набор функций, включая виртуальный DOM, одностороннюю привязку данных, компоненты, JSX, условные операторы и многое другое.

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

Предпосылки

  • Сервер под управлением Ubuntu 20.04 с минимум 2 ГБ оперативной памяти.
  • Действительное доменное имя, указанное с IP-адресом вашего сервера. В этом уроке мы будем использовать домен reactjs.example.com.
  • Пароль root настраивается на сервере.

Начиная

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

apt-get update -y

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

apt-get install curl gnupg2 -y

После установки всех зависимостей можно переходить к следующему шагу.

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

Далее вам нужно будет установить Node.js на свой сервер. По умолчанию последняя версия Node.js недоступна в стандартном репозитории Ubuntu 20.04. Поэтому вам нужно будет установить 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  -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
+ 
updated 2 packages in 12.78s

Затем проверьте установленную версию Node.js с помощью следующей команды:

node -v

Вы должны получить следующий результат:

v14.15.3

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

Установите инструмент создания приложения React

Create React App — это инструмент, который экономит ваше время на установку и настройку. Вам просто нужно запустить одну команду, и приложение Create React настроит все инструменты, необходимые для запуска вашего проекта.

Вы можете установить инструмент Create React App, используя следующую команду:

npm install -g create-react-app

Вы должны получить следующий результат:

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

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

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

В этом разделе мы покажем вам, как создать приложение React с помощью инструмента 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, чтобы остановить приложение.

Создайте файл запуска для приложения React

Если вы хотите автоматически запускать приложение React при перезагрузке системы, вам необходимо создать службу systemd для вашего приложения React. Таким образом, вы можете легко управлять своим приложением с помощью команды systemctl. Вы можете создать служебный файл systemd с помощью следующей команды:

nano /lib/systemd/system/react.service

Добавьте следующие строки:

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

Сохраните и закройте файл, затем перезагрузите демон systemd с помощью следующей команды:

systemctl daemon-reload

Затем запустите службу React и включите ее запуск при перезагрузке системы, выполнив следующую команду:

systemctl start react
systemctl enable react

Вы можете проверить статус службы 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 ubunt4 systemd[1]: Started react.service.
Dec 19 06:11:43 ubunt4 npm[30833]: >  start /opt/reactproject
Dec 19 06:11:43 ubunt4 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubunt4 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubunt4 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubunt4 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubunt4 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubunt4 npm[30852]: Starting the development server...

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

Настройте Nginx для приложения React

Рекомендуется установить и настроить Nginx в качестве обратного прокси-сервера для приложения React. Таким образом, вы можете получить доступ к своему приложению через порт 80.

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

apt-get install nginx -y

После установки Nginx создайте новый файл конфигурации виртуального хоста Nginx:

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

Добавьте следующие строки:

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.example.com;

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

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

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

Затем проверьте Nginx на наличие синтаксической ошибки, выполнив следующую команду:

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

Вы также можете проверить статус службы 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 2020-12-19 06:12:42 UTC; 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: 3.6M
     CGroup: /system.slice/nginx.service
             ??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
             ??30916 nginx: worker process
             ??30917 nginx: worker process

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

На этом этапе Nginx установлен и настроен для обслуживания приложения React. Теперь вы можете перейти к следующему шагу.

Доступ к веб-интерфейсу приложения React

Теперь откройте веб-браузер и введите URL-адрес http://reactjs.example.com. Вы будете перенаправлены в веб-интерфейс React.Js на следующем экране:

Заключение

Поздравляем! вы успешно установили и настроили React.Js на сервере Ubuntu 20.04. Надеюсь, теперь у вас достаточно знаний, чтобы развернуть собственное приложение React в рабочей среде. Не стесняйтесь спрашивать меня, если у вас есть какие-либо вопросы.