Методы размещения Angular на GitHub: страницы GitHub, действия GitHub и собственный домен

Чтобы разместить приложение Angular на GitHub, вы можете использовать несколько методов. Вот шаги для нескольких разных подходов:

  1. Использование страниц GitHub: GitHub Pages — это встроенная функция GitHub, которая позволяет размещать статические веб-сайты непосредственно из вашего репозитория. Выполните следующие действия:

    • Создайте новый репозиторий на GitHub.
    • Клонируйте репозиторий на свой локальный компьютер с помощью Git.
    • Создайте приложение Angular с помощью команды Angular CLI ng build --prod. При этом будет создана папка distс скомпилированными статическими файлами.
    • Переместите содержимое папки distв корень вашего репозитория.
    • Зафиксируйте и отправьте изменения в свой репозиторий GitHub.
    • В настройках репозитория перейдите в раздел «Страницы GitHub» и выберите ветку, которую вы хотите использовать для хостинга (обычно ветку gh-pages).
    • Сохраните настройки, и ваше приложение Angular будет размещено по адресу https://.github.io/.

  2. Использование действий GitHub. Действия GitHub позволяют автоматизировать задачи, включая развертывание приложения Angular. Вот краткое описание необходимых шагов:

    • Создайте новый репозиторий на GitHub.
    • Клонируйте репозиторий на свой локальный компьютер с помощью Git.
    • Настройте файл рабочего процесса GitHub Actions (например, .github/workflows/main.yml) в своем репозитории. Этот файл определяет этапы сборки и развертывания.
    • Настройте рабочий процесс для запуска команды сборки Angular (ng build --prod) и разверните выходные данные на GitHub Pages или другой службе хостинга.
    • Зафиксируйте и отправьте изменения в свой репозиторий GitHub.
    • Рабочий процесс запустится автоматически, и ваше приложение Angular будет создано и развернуто.

  3. Использование личного домена. Если вы хотите использовать личный домен для своего приложения Angular, размещенного на GitHub, вы можете выполнить следующие дополнительные шаги:

    • Зарегистрируйте доменное имя у регистратора доменов.
    • В настройках вашего репозитория добавьте файл CNAMEв корневой каталог с вашим личным доменным именем (например, example.com).
    • Настройте регистратор домена так, чтобы он указывал на серверы GitHub, создав запись CNAMEили запись Aс соответствующими IP-адресами.
    • Обновите файл angular.jsonв своем проекте Angular, чтобы установить свойство "baseHref"для вашего личного домена (например, "/"или "/<имя-репозитория>/").
    • Создайте и разверните приложение Angular, как описано в одном из предыдущих методов.