30.05.2023

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

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

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

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

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

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

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

sudo -s
apt install nodejs npm -y
npm i -g npx -y
node -v
npm -v
npx -v

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

npx create-react-app <ИМЯ_ПРИЛОЖЕНИЯ>

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

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

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

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

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

cd /home/<ИМЯ_ПОЛЬЗОВАТЕЛЯ>/<КАТАЛОГ_ПРИЛОЖЕНИЯ>
npm run build

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

mkdir /var/www/<ДОМЕННОЕ_ИМЯ> && cp /home/<ИМЯ_ПОЛЬЗОВАТЕЛЯ>/<КАТАЛОГ_ПРИЛОЖЕНИЯ>/build/* /var/www/<ДОМЕННОЕ_ИМЯ>
systemctl enable nginx && service nginx restart

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

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

Заключение

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