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

Как развернуть приложение React с помощью Nginx в Ubuntu

Введение

Вы можете быстро развернуть приложения React на сервере, используя стандартный инструмент сборки Create React App. Скрипт build компилирует приложение в единый каталог, содержащий весь код JavaScript, изображения, стили и файлы HTML. Поскольку ресурсы находятся в одном месте, их можно развернуть на веб-сервере с минимальной настройкой.

В этом руководстве вы развернете приложение React на своем локальном компьютере на сервере Ubuntu под управлением Nginx. Вы создадите приложение с помощью Create React App, используете файл конфигурации Nginx, чтобы определить, где развертывать файлы, и безопасно скопируете каталог сборки и его содержимое на сервер. К концу этого руководства вы сможете создать и развернуть приложение React.

Предварительные условия

Если вы используете Ubuntu версии 16.04 или ниже, мы рекомендуем вам обновиться до более последней версии, поскольку Ubuntu больше не поддерживает эти версии. Этот сборник руководств поможет вам обновить версию Ubuntu.

Чтобы следовать этому руководству, вам понадобится:

  • Сервер под управлением Ubuntu вместе с пользователем без полномочий root с привилегиями sudo и активным брандмауэром. Для получения инструкций по их настройке выберите свой дистрибутив из этого списка и следуйте нашему Руководству по первоначальной настройке сервера. Чтобы получить доступ по SSH к дроплету DigitalOcean, прочтите «Как подключиться к дроплету с помощью SSH».

  • На вашем локальном компьютере вам понадобится среда разработки Node.js. Чтобы установить это в macOS или Ubuntu, следуйте руководству «Как установить Node.js в Ubuntu 22.04/20.04/18.04».

  • Nginx установлен согласно этому руководству для Ubuntu 22.04/20.04/18.04. Убедитесь, что у вас есть блокировка серверов для вашего домена. В этом руководстве в качестве примера будет использоваться /etc/nginx/sites-available/your_domain.

  • Рекомендуется также защитить свой сервер с помощью сертификата HTTPS. Вы можете сделать это с помощью руководства «Как защитить Nginx с помощью Let’s Encrypt в Ubuntu 22.04/20.04/18.04».

  • Зарегистрированное доменное имя или IP-адрес сервера.

  • Если вы используете доменное имя, вам необходимо настроить обе эти записи DNS для вашего сервера. Если вы используете DigitalOcean, ознакомьтесь с нашей документацией по DNS, чтобы узнать, как их добавить.

    • Запись A с your_domain, указывающая на общедоступный IP-адрес вашего сервера.
    • Запись A с www.your_domain, указывающая на общедоступный IP-адрес вашего сервера.

  • Вам также потребуются базовые знания JavaScript, HTML и CSS, которые вы можете найти в наших сериях «Как создать веб-сайт с помощью HTML», «Как создать веб-сайт с помощью CSS» и «Как писать код на JavaScript».

Как развернуть приложение React с помощью Nginx

  1. Создать проект React
  2. Найдите файл развертывания на сервере Ubuntu
  3. Загрузить файлы сборки

Шаг 1 — Создание проекта React

На этом этапе вы создадите приложение с помощью Create React App и создадите развертываемую версию шаблонного приложения.

Для начала создайте новое приложение с помощью Create React App в своей локальной среде. В терминале запустите команду для создания приложения. В этом руководстве проект будет называться react-deploy:

npx create-react-app react-deploy

Команда npx запустит пакет Node, не загружая его на ваш компьютер. Скрипт create-react-app установит все зависимости, необходимые для вашего приложения React, и создаст базовый проект в каталоге react-deploy. Дополнительную информацию о создании приложения React можно найти в руководстве «Как настроить проект React с помощью приложения Create React».

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

Success! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm 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-deploy
  npm start

Happy hacking!

Следуя предложению в выводе, сначала перейдите в папку проекта:

cd react-deploy

Теперь, когда у вас есть базовый проект, запустите его локально, чтобы проверить, как он будет выглядеть на сервере. Запустите проект с помощью скрипта npm start:

npm start

Когда команда запустится, вы получите вывод с информацией о локальном сервере:

Compiled successfully!

You can now view react-deploy in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

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

Откройте браузер и перейдите по адресу http://localhost:3000. Вы сможете получить доступ к шаблонному приложению React:

Остановите проект, введя в терминале либо CTRL+C, либо ⌘+C.

Теперь, когда у вас есть проект, который успешно работает в браузере, вам необходимо создать производственную сборку. Запустите сценарий сборки create-react-app со следующим:

npm run build

Эта команда скомпилирует JavaScript и ресурсы в каталог build. Когда команда завершится, вы получите вывод с данными о вашей сборке. Обратите внимание, что имена файлов содержат хэш, поэтому ваш вывод будет немного отличаться:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB  build/static/js/2.82f639e7.chunk.js
  1.4 KB    build/static/js/3.9fbaa076.chunk.js
  1.17 KB   build/static/js/runtime-main.1caef30b.js
  593 B     build/static/js/main.e8c17c7d.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Каталог build теперь будет содержать скомпилированные и минимизированные версии всех файлов, необходимых для вашего проекта. На этом этапе вам не нужно беспокоиться ни о чем за пределами каталога build. Все, что вам нужно сделать, это развернуть каталог на сервере.

На этом этапе вы создали новое приложение React. Вы убедились, что приложение работает локально, и создали рабочую версию с помощью сценария Create React App build. На следующем шаге вы войдете на свой сервер и узнаете, куда скопировать каталог build.

Шаг 2 — Определение местоположения файла развертывания на вашем сервере Ubuntu

На этом этапе вы начнете развертывать приложение React на сервере. Но прежде чем вы сможете загрузить файлы, вам необходимо определить правильное расположение файлов на вашем сервере развертывания. В этом руководстве в качестве веб-сервера используется Nginx, но с Apache подход тот же (Ubuntu 22.04/Ubuntu 20.04/Ubuntu 18.04). Основное отличие состоит в том, что файлы конфигурации будут находиться в другом каталоге.

Чтобы найти каталог, который веб-сервер будет использовать в качестве корневого каталога вашего проекта, войдите на свой сервер, используя ssh:

ssh username@server_ip

Оказавшись на сервере, найдите конфигурацию вашего веб-сервера в /etc/nginx/sites-enabled. Существует также каталог под названием sites-allowed; этот каталог содержит конфигурации, которые не обязательно активированы. Найдя файл конфигурации, отобразите вывод в терминале с помощью следующей команды:

cat /etc/nginx/sites-enabled/your_domain

Если на вашем сайте нет сертификата HTTPS, вы получите примерно такой результат:

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}

Если вы выполнили необходимое условие Let’s Encrypt для защиты вашего сервера Ubuntu, вы получите следующий вывод:

server {

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

В любом случае наиболее важным полем для развертывания вашего приложения React является root. Это направляет HTTP-запросы в каталог /var/www/your_domain/html. Это означает, что вы скопируете свои файлы в это место. В следующей строке вы можете видеть, что Nginx будет искать файл index.html. Если вы заглянете в локальный каталог build, вы увидите файл index.html, который будет служить основной точкой входа.

Выйдите из сервера Ubuntu и вернитесь в локальную среду разработки.

Теперь, когда вы знаете расположение файла, который будет обслуживать Nginx, вы можете загрузить свою сборку.

Шаг 3. Загрузка файлов сборки с помощью** **scp

На этом этапе ваши файлы build готовы к работе. Все, что вам нужно сделать, это скопировать их на сервер. Быстрый способ сделать это — использовать scp для копирования файлов в нужное место. Команда scp — это безопасный способ копирования файлов на удаленный сервер с терминала. Команда использует ваш ключ ssh, если он настроен. В противном случае вам будет предложено ввести имя пользователя и пароль.

Формат команды: scp files_to_copy username@server_ip:path_on_server. Первым аргументом будут файлы, которые вы хотите скопировать. В этом случае вы копируете все файлы в каталоге build. Второй аргумент — это комбинация ваших учетных данных и пути назначения. Путь назначения будет таким же, как root в вашей конфигурации Nginx: /var/www/ваш_домен/html.

Скопируйте все файлы build, используя подстановочный знак *, в /var/www/your_domain/html:

scp -r ./build/* username@server_ip:/var/www/your_domain/html

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

asset-manifest.json                                                                                          100% 1092    22.0KB/s   00:00
favicon.ico                                                                                                  100% 3870    80.5KB/s   00:00
index.html                                                                                                   100% 3032    61.1KB/s   00:00
logo192.png                                                                                                  100% 5347    59.9KB/s   00:00
logo512.png                                                                                                  100% 9664    69.5KB/s   00:00
manifest.json                                                                                                100%  492    10.4KB/s   00:00
robots.txt                                                                                                   100%   67     1.0KB/s   00:00
main.ab7136cd.chunk.css                                                                                      100%  943    20.8KB/s   00:00
main.ab7136cd.chunk.css.map                                                                                  100% 1490    31.2KB/s   00:00
runtime-main.1caef30b.js.map                                                                                 100%   12KB  90.3KB/s   00:00
3.9fbaa076.chunk.js                                                                                          100% 3561    67.2KB/s   00:00
2.82f639e7.chunk.js.map                                                                                      100%  313KB 156.1KB/s   00:02
runtime-main.1caef30b.js                                                                                     100% 2372    45.8KB/s   00:00
main.e8c17c7d.chunk.js.map                                                                                   100% 2436    50.9KB/s   00:00
3.9fbaa076.chunk.js.map                                                                                      100% 7690   146.7KB/s   00:00
2.82f639e7.chunk.js                                                                                          100%  128KB 226.5KB/s   00:00
2.82f639e7.chunk.js.LICENSE.txt                                                                              100% 1043    21.6KB/s   00:00
main.e8c17c7d.chunk.js                                                                                       100% 1045    21.7KB/s   00:00
logo.103b5fa1.svg                                                                                            100% 2671    56.8KB/s   00:00

Когда команда завершится, все будет готово. Поскольку проект React состоит из статических файлов, для которых нужен только браузер, вам не нужно настраивать какой-либо дополнительный язык на стороне сервера. Откройте браузер и перейдите к своему доменному имени. Когда вы это сделаете, вы найдете свой проект React:

На этом этапе вы развернули приложение React на сервере. Вы узнали, как определить корневой веб-каталог на вашем сервере, и скопировали файлы с помощью scp. Когда файлы завершили загрузку, вы смогли просмотреть свой проект в веб-браузере.

Заключение

Развертывание приложений React — это быстрый процесс при использовании Create React App. Вы запускаете команду build, чтобы создать каталог всех файлов, необходимых для развертывания. После запуска сборки вы копируете файлы в нужное место на сервере, размещая свое приложение в Интернете.

Если вы хотите прочитать больше руководств по React, посетите нашу страницу тем React или вернитесь на страницу серии «Как писать код в React.js».

Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

Статьи по данной тематике: