Создание и развертывание приложений на платформе DigitalOcean App с пользовательским доменом

Учебники
DNS

Введение

Как разработчики, мы часто создаем проекты на стороне, будь то ради удовольствия или чтобы изучить что-то новое. Эти проекты также служат доказательством наших навыков.

У вас должно быть доказательство вашей работы. Помимо вашего кода, пользователи должны иметь возможность использовать ваше приложение, и для этого оно не должно просто находиться на localhost:3000, но быть доступным по ссылке. Для достижения этого вам необходимо развернуть ваше приложение и привязать его к пользовательскому домену для лучшей читаемости и удобного обмена.

В этой статье вы познакомитесь с Платформой приложений DigitalOcean и увидите, насколько легко перейти от развертывания приложения к привязке его к пользовательскому домену всего в несколько кликов.

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

  1. Учетная запись DigitalOcean для доступа к Платформе приложений.

  2. Учетная запись GitHub.

  3. Пользовательский домен, доступный на NameCheap или подобной платформе.

Что такое Платформа приложений DigitalOcean?

Платформа приложений – это полностью управляемая платформа как сервис (PaaS), которая помогает разработчикам создавать, развертывать и масштабировать приложения с легкостью. Она абстрагирует множество задач по управлению инфраструктурой, позволяя вам сосредоточиться на коде и развертывании.

Он может автоматически анализировать и собирать код из поставщиков git, таких как GitHub и GitLab, и публиковать ваши приложения в облаке. Он также может публиковать с использованием образов контейнеров, которые вы уже загрузили в Хранилище контейнеров DigitalOcean или Docker Hub.

Благодаря функциям, таким как защита от DDoS-атак, автоматическое обновление ОС, вертикальное масштабирование, поддержка HTTP, глобальная сеть доставки контента (CDN) и поддержка доменов, платформа приложений упрощает публикацию и управление вашими приложениями.

Шаг 1 – Развертывание с использованием платформы приложений

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

Монорепозиторий – это контролируемый версиями репозиторий кода, который содержит множество проектов. Хотя эти проекты могут быть связаны, они часто логически независимы и управляются различными командами.

Давайте посмотрим, как мы можем развернуть приложения с использованием платформы App Platform с помощью GitHub. Предположим, у вас есть частный репозиторий GitHub с файлом index.html, содержащим этот простой код “Hello, World”:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

Развертывание с помощью Github

  • Перейдите на страницу приложений и нажмите Создать приложение.

  • Подключите свою учетную запись GitHub, а затем выберите репозиторий GitHub, содержащий ваш исходный код.

  • В поле Каталог исходного кода укажите папку, содержащую исходный код, как показано на изображении ниже. Поскольку наш демонстрационный репозиторий состоит только из файла index.html в корневом каталоге, мы продолжим с выбором значения по умолчанию /. Если ваш код имеет структуру монорепозитория, убедитесь, что выбираете конкретный каталог, в котором находится код.

Выберите автоматическое развертывание, это позволит автоматически развертывать при каждом новом изменении, которое вы отправляете:

  • Настройте ресурсы для вашего приложения и нажмите Далее. Вот что вы увидите:

  • Затем будут выполнены некоторые проверки перед окончательным развертыванием приложения. Для более сложных приложений, таких как те, которые используют API, вам может потребоваться добавить переменные среды, в следующих страницах вы можете их настроить.

  • На следующем шаге вы можете изменить название приложения и выбрать ресурс, под которым ваше приложение будет развернуто.

  • Затем вы нажимаете на Next, чтобы просмотреть страницу Review, где вы можете увидеть другую информацию, связанную с приложением, такую как выставление счетов, местоположение и т. д. Затем, наконец, нажмите на Create resource, чтобы развернуть приложение.

  • Это займет несколько минут. Когда приложение будет развернуто, вы сможете просмотреть его по URL и другие детали на странице Overview.

Если вы выполните все вышеперечисленные шаги, ваше приложение будет выглядеть следующим образом: https://sea-lion-app-l8cvv.ondigitalocean.app/.

Шаг 2: Привязка приложения к пользовательскому домену

Теперь, когда ваше приложение успешно развернуто и имеет домен ondigitalocean.app, на этом шаге вы увидите, как вы можете привязать его к пользовательскому домену.

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

  1. Используя автоматизацию

  2. Используя панель управления

В этой статье вы узнаете, как можно настроить пользовательский домен, используя панель управления.

  • Войдите вОблако DigitalOcean и выберите приложение, к которому хотите добавить домен, затем нажмите на вкладку Настройки.

  • Затем нажмите на ссылку Изменить справа от Домены, а затем нажмите кнопку Добавить домен.

  • Как только начнете вводить имя вашего домена в текстовом поле ниже, появятся два варианта добавления пользовательского домена.

  • Вы можете добавить пользовательский домен с использованием серверов имен DigitalOcean или с помощью поставщика CNAME.

  • Чтобы использовать серверы имен DigitalOcean, скопируйте и вставьте их (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com) в записи серверов имен вашего регистратора доменов. Ознакомьтесь с нашим руководством по Переадресации на серверы имен DigitalOcean от популярных регистраторов доменов для получения инструкций по делегированию вашего домена на серверы имен DigitalOcean от популярных регистраторов.

  • Вы также можете добавить запись CNAME к вашему домену. Если ваш провайдер DNS не является DigitalOcean, ознакомьтесь с их документацией для получения инструкций. Используйте кнопку копировать, чтобы скопировать псевдоним ondigitalocean.app и вставьте его в запись CNAME у вашего провайдера DNS, чтобы направить ваш пользовательский домен на ваше приложение на платформе App Platform. После завершения нажмите кнопку Добавить домен.

Для более продвинутых настроек, связанных с доменом, обратитесь к нашей документации по Управлению доменами в платформе приложений.

Добавление доменов, купленных на Namecheap

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

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

  • Затем перейдите на вкладку Дополнительный DNS и нажмите Добавить новую запись.

  • Затем перейдите в панель управления DigitalOcean и скопируйте ссылку из поля, показанного ниже.

  • Вставьте ее в Namecheap и сохраните ваши изменения.

Вот и все! Теперь ваше приложение связано с вашим пользовательским доменом.

Заключение

В этой статье вы узнали, как развертывать ваши приложения и управлять пользовательскими доменами с помощью DigitalOcean.

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

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

  • Обеспечьте безопасность SSL/TLS, поскольку это шифрует данные и улучшает SEO, предоставляя защищенное соединение.

  • Регулярно мониторьте состояние домена, чтобы выявлять проблемы и поддерживать оптимальную производительность для пользователей.

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

Следующие шаги

Если вы решите прекратить использование вашего приложения по какой-то причине, убедитесь, что удалите пользовательский домен перед удалением приложения. Чтобы удалить его, перейдите в панель управления, выберите ваше приложение, затем нажмите на Настройки. Затем щелкните по ссылке Изменить справа от Домены и пункту меню с тремя точками (…), и, наконец, нажмите Удалить домен, чтобы удалить домен.

Вот список ресурсов, которые могут пригодиться:

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain