Введение
Как разработчики, мы часто создаём проекты вместе — будь то ради развлечения или чтобы узнать что-то новое. Эти проекты также служат демонстрацией наших навыков.
Вам необходимо предоставить доказательства работы. Помимо кода, пользователи должны иметь возможность использовать ваше приложение, и для этого оно должно быть не просто расположено по адресу localhost:3000, а доступно по ссылке. Для этого вам необходимо развернуть приложение и привязать его к пользовательскому домену для лучшей читаемости и удобства публикации.
Предпосылки
- Учетная запись DigitalOcean для доступа к платформе приложения.
- Аккаунт GitHub
- Пользовательский домен доступен на NameCheap или аналогичной платформе.
Что представляет собой платформа приложений DigitalOcean?
App Platform — это полностью управляемая платформа как услуга (PaaS), которая помогает разработчикам легко создавать, развертывать и масштабировать приложения. Она устраняет значительную часть необходимости в управлении инфраструктурой и позволяет сосредоточиться на коде и развертывании.
Он может автоматически анализировать и собирать код из Git-провайдеров, таких как GitHub и GitLab, а также публиковать ваши приложения в облаке. Также возможна публикация с использованием образов контейнеров, ранее загруженных в DigitalOcean Container Registry или Docker Hub.
Благодаря таким функциям, как защита от DDoS-атак, автоматическое исправление ошибок ОС, вертикальное масштабирование, поддержка HTTP, глобальная CDN и поддержка доменов, платформа приложений упрощает публикацию и управление вашими приложениями.
Шаг 1 — Развертывание с использованием платформы приложения
Когда приложение будет готово, вы сможете развернуть его из монорепозиториев, образов контейнеров или с помощью GitHub Actions.
Монорепозиторий — это репозиторий кода с контролем версий, в котором размещается множество проектов. Хотя эти проекты могут быть связаны, они часто логически независимы и управляются разными командами.
Давайте посмотрим, как можно развернуть приложения с помощью App Platform на GitHub. Предположим, у вас есть приватный репозиторий GitHub с файлом index.html, содержащим следующий простой код Hello World:
<!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, может потребоваться добавить переменные окружения, которые можно настроить на следующих страницах.
Далее вы можете отредактировать имя приложения и выбрать репозиторий, в котором будет развернуто ваше приложение.
Затем нажмите «Далее», чтобы открыть страницу отзывов, на которой вы можете увидеть дополнительную информацию о приложении, например, выставление счетов, местоположение и т. д. Затем нажмите «Создать ресурс», чтобы запустить приложение.
Это займёт несколько минут. После запуска приложения вы увидите его URL-адрес и другие сведения на странице обзора.
Шаг 2: привяжите приложение к пользовательскому домену
Теперь, когда ваше приложение успешно развернуто и имеет домен ondigitalocean.app, на этом этапе вы увидите, как можно сопоставить его с пользовательским доменом.
Добавить пользовательский домен в приложение можно двумя способами:
- Использование автоматизации
- Использование панели управления
В этой статье вы увидите, как можно настроить собственный домен с помощью панели управления.
- Войдите в DigitalOcean Cloud и выберите приложение, к которому вы хотите добавить домен, затем нажмите вкладку «Настройки».
- Затем нажмите ссылку «Изменить» справа от «Домены», а затем кнопку «Добавить домен».
Как только вы начнете вводить свое доменное имя в текстовое поле ниже, у вас будет два варианта добавления вашего собственного домена.
Вы можете добавить собственный домен, используя серверы имен 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.
