Как развернуть приложение React на платформе DigitalOcean App

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

Введение

App Platform от DigitalOcean – это продукт платформы как сервиса (PaaS), который позволяет настраивать и развертывать приложения из репозитория исходного кода. После настройки вашего приложения DigitalOcean соберет и развернет его при каждом изменении, предоставляя вам преимущества полного веб-сервера и конвейера развертывания с минимальной конфигурацией. Это может быть быстрым и эффективным способом развертывания ваших приложений React, и если вы используете React для создания сайта без серверной части, вы можете воспользоваться бесплатным уровнем тарификации App Platform.

В этом руководстве вы развернете приложение React на платформе DigitalOcean App Platform, используя бесплатный тарифный план Starter. Вы создадите приложение с помощью Create React App, загрузите код в репозиторий GitHub, а затем настроите приложение как приложение DigitalOcean. Вы подключите приложение к вашему исходному коду и развернете проект в виде набора статических файлов.

К концу этого руководства вы сможете настроить приложение React для автоматического развертывания при каждом обновлении основной ветки репозитория GitHub.

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

• На вашем локальном компьютере должна быть установлена среда разработки с Node.js; это руководство было протестировано с версией Node.js 10.22.0 и версией npm 6.14.6. Чтобы установить их на macOS или Ubuntu 20.04, выполните шаги из руководства Как установить Node.js и создать локальную среду разработки на macOS или раздела Установка Node.js с помощью Apt с использованием PPA NodeSource из руководства Как установить Node.js на Ubuntu 20.04.

• Git установлен на вашем локальном компьютере. Вы можете следовать учебнику Внесение вклада в открытый исходный код: Начало работы с Git, чтобы установить и настроить Git на вашем компьютере.

• Учетная запись на DigitalOcean.

• Учетная запись на GitHub, которую можно создать, перейдя на страницу Создайте свою учетную запись.

• Также вам понадобится базовое знание JavaScript, HTML и CSS, которое вы можете найти в нашей Серии уроков по созданию веб-сайтов с использованием HTML, Серии уроков по созданию веб-сайтов с использованием CSS и в Как написать код на JavaScript.

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

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

Для начала создайте новое приложение, используя Create React App на вашем локальном компьютере. В терминале выполните команду для создания приложения с названием digital-ocean-app:

npx create-react-app digital-ocean-app

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

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

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
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 digital-ocean-app
  npm start

Happy hacking!

Теперь, когда у вас есть базовый проект, запустите его локально, чтобы протестировать, как проект будет выглядеть на сервере. Сначала перейдите в каталог:

cd digital-ocean-app

Запустите проект, используя сценарий npm start:

npm start

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

Output
Compiled successfully!

You can now view digital-ocean-app 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 и вы увидите свой проект:

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

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

Шаг 2 — Загрузка кода на GitHub

Чтобы развернуть ваше приложение, платформа App Platform извлекает исходный код из хранимого репозитория. На этом шаге вы загрузите код вашего приложения React в репозиторий GitHub, чтобы платформа App Platform могла позже получить к нему доступ.

Войдите в свою учетную запись GitHub. После входа создайте новый репозиторий с названием digital-ocean-app. Вы можете сделать репозиторий как приватным, так и публичным:

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

git remote add origin https://github.com/your_name/digital-ocean-app.git

Затем объявите, что хотите загрузить в ветку main следующим образом:

git branch -M main

Наконец, загрузите код в ваш репозиторий:

git push -u origin main

Введите ваши учетные данные GitHub, когда будете подтверждены для загрузки вашего кода.

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

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

Теперь вы скопировали свой код в репозиторий GitHub.

На этом этапе вы загрузили свой проект на GitHub, чтобы затем получить к нему доступ через DigitalOcean Apps. Затем вы создадите новое приложение DigitalOcean, используя свой проект, и настроите автоматическое развертывание.

Шаг 3 — Развертывание на платформе DigitalOcean App

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

К концу этого шага вы сможете развернуть приложение с непрерывной доставкой на DigitalOcean.

Чтобы начать, войдите в свою учетную запись DigitalOcean и нажмите кнопку Создать, затем выберите Приложения:

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

После привязки вашей учетной записи выберите репозиторий, который вы хотели бы подключить на экране авторизации GitHub. В данном случае вы используете репозиторий digital-ocean-app, но вы можете подключить больше репозиториев, если захотите:

После выбора репозитория вы переподключитесь к интерфейсу DigitalOcean. Выберите digital-ocean-app из списка репозиториев, затем нажмите Далее. Это подключит ваше приложение напрямую к репозиторию GitHub:

Теперь, когда вы выбрали свой репозиторий, вам необходимо настроить приложение DigitalOcean. В этом примере сервер будет размещен в Северной Америке, выбрав Нью-Йорк в поле Регион, а ветка развертывания будет основной (main). Для вашего приложения выберите регион, который находится ближе всего к вашему физическому местоположению:

В этом руководстве вы проверяете Автоматическое развертывание изменений в коде. Это автоматически пересоберет ваше приложение каждый раз, когда вы обновляете код.

Нажмите Далее, чтобы перейти к экрану Настройка вашего приложения.

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

У вас также есть возможность использовать собственный сценарий сборки. Но в этом случае вы можете придерживаться стандартной команды npm run build. Возможно, вам захочется создать собственный сценарий сборки, если у вас есть другой сценарий сборки для контроля качества (QA) или для производственной среды:

Нажмите Далее, чтобы перейти на страницу Завершение и запуск.

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

Нажмите кнопку Запустить приложение Starter, и DigitalOcean начнет сборку вашего приложения.

Приложение выполнит сценарии npm ci и npm build в вашем репозитории. Это загрузит все зависимости и создаст каталог build с скомпилированной и минимизированной версией всех ваших файлов JavaScript, HTML и других ресурсов. Вы также можете создать собственный сценарий в вашем package.json и обновить Команды на вкладке Компоненты вашего приложения на Платформе приложений.

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

Нажмите Живое приложение, чтобы получить доступ к вашему проекту в браузере. Это будет то же самое приложение, которое вы тестировали локально, но оно будет доступно в сети с безопасным URL-адресом:

Теперь, когда ваш проект настроен, каждый раз, когда вы вносите изменения в связанный репозиторий, будет запускаться новая сборка. В этом случае, если вы отправляете изменение в ветку main, DigitalOcean автоматически запустит новое развертывание. Нет необходимости входить в систему; это произойдет сразу после отправки изменения:

На этом этапе вы создали новое приложение DigitalOcean на платформе App Platform. Вы подключили свой аккаунт GitHub и настроили приложение для сборки ветки main. После настройки приложения вы узнали, что приложение будет автоматически разворачивать новую сборку после каждого изменения.

Заключение

Платформа приложений DigitalOcean предоставляет вам быстрый инструмент для развертывания приложений. С небольшой начальной настройкой ваше приложение будет автоматически разворачиваться после каждого изменения. Это можно использовать совместно с React для быстрого запуска вашего веб-приложения.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.