Развертывание приложений Angular на страницах GitHub — отличный способ разместить их бесплатно. Angular — это популярный фреймворк JavaScript для создания одностраничных приложений.
Angular имеет комплексный интерфейс командной строки, который поддерживает быструю сборку и настройку приложений JavaScript. В Angular CLI есть несколько команд для создания, сборки, обслуживания и генерации компонентов приложения.
Вы также можете использовать CLI для развертывания приложений Angular для различных целей, включая страницы GitHub.
Что вам нужно
Чтобы максимально использовать это руководство, вам необходимо иметь следующие навыки и инструменты:
- Вы должны быть знакомы с основы ангуляра, такие как концепция приложений, настроек, URL-адресов и т. д.
- Вы знакомы с основы GitHub и Git, например создание учетной записи GitHub, создание репозитория git (репозиторий) и страниц GitHub (GH-страницы).
- У вас есть приложение Angular, готовое к развертыванию.
- Ваш базовый URL-адрес находится на правильном пути. Развертывание на GH-страницах завершается неудачно из-за установки неправильного base-href (базового URL).
- Аккаунт GitHub.
- Репозиторий GitHub (репо) с кодом приложения.
Теперь, когда у вас есть все это, давайте начнем процесс развертывания.
Процесс развертывания
Для начала вы должны были создать репозиторий GitHub для своего проекта и отправить код в главный/мастер ветвь.
Далее создайте ветку GH-pages.
1. Создать ветку GH-pages
Это хак, который поможет вам получить ссылку на GH-страницы, чтобы помочь установить base-href.
Сначала создайте GH-страницы в локальном репозитории с помощью следующей команды:
git ветка gh-страницыДалее выписка из основной ветки на GH-pages для переноса всего кода.
git checkout gh-страницыЗатем отправьте GH-страницы на GitHub, чтобы создать удаленную ветку GH-страниц.
git push origin gh-страницыНа панели инструментов под именем репозитория нажмите Настройки > Страницы.
Под Сборка и развертывание, выбирать Развернуть из ветки. Далее выберите gh-страницы в качестве имени ветки, затем нажмите Сохранять. Это создаст ссылку на GH-страницы в правом верхнем углу под меткой GH-страницы.
Затем скопируйте эту ссылку на опубликованный сайт, как показано ниже. Вы будете использовать ссылку для настройки base-ref во время развертывания.
3. Установите Angular-CLI-GHpages
Пакет angular-cli-ghpages — это инструмент, который Angular CLI использует для целей развертывания.
Вернитесь в локальный репозиторий проекта. Затем установите и запустите angular-cli-ghpages с помощью этой команды:
ng добавить angular-cli-ghpages4. Развернуть приложение
Чтобы создать приложение в рабочей среде, вы должны подключить его к удаленному серверу на GitHub.
Настройте свое приложение на удаленный сервер, выполнив следующую команду:
нг развернуть --base-href=https://GithubUserName.github.io/GithubRepoName/Не забудьте заменить приведенную выше ссылку активной ссылкой со страниц GH.
Успешная сборка будет выглядеть так, как показано на рисунке ниже:
Затем перейдите на GitHub и щелкните ссылку GH-pages, чтобы просмотреть развернутый проект.
Поздравляем, вы развернули свое приложение Angular!
Если по ссылке отображается только файл README, вернитесь к настройкам GH-страниц GitHub. Убедитесь, что выбрана ветка gh-pages, а не основная или главная ветка. Затем дайте ему пять минут и перезагрузите. Иногда GitHub требуется время, чтобы отразить изменения.
Чтобы узнать больше о том, как вы можете использовать Angular CLI при развертывании, посетите Угловая документация.
Как развернуть приложение Angular на страницах GitHub
Есть несколько способов развертывания Angular-приложений на GH-страницах, но этот способ самый простой. Вы настраиваете ссылку репозитория GH-страниц и используете ее с Angular-CLI для развертывания своего приложения на страницах GitHub.
С Angular и Angular CLI вы можете сделать гораздо больше. Не стесняйтесь исследовать. Используйте интерфейс командной строки для развертывания приложений на GH-страницах для бесплатного просмотра и размещения ваших приложений.
