Простые шаги для размещения приложения Angular на страницах GitHub

GitHub Pages — это услуга, предоставляемая GitHub, где люди могут бесплатно разместить веб-сайт. Это помогает людям размещать личные веб-сайты для своих блогов, портфолио, бизнеса и так далее. Мы можем легко разместить простой веб-сайт только с HTML, CSS и JavaScript на страницах GitHub, но сложное приложение требует некоторых усилий.

Приложение Angular само по себе имеет много вещей, связанных с ним, таких как компоненты, модули узлов, информация о маршрутизации и другие данные. Есть несколько способов разместить приложение Angular на страницах GitHub. В этом сообщении блога мы увидим самый простой способ разместить приложение Angular на страницах GitHub.

Начиная

Для начала у нас должно быть приложение Angular и репозиторий GitHub.

Создание углового приложения

Давайте создадим пример приложения Angular с помощью интерфейса командной строки Angular.

Если Angular CLI еще не установлен, установите его с помощью npm. Обратитесь к следующей команде:

npm install -g @angular/cli

Мы можем проверить установку, проверив версию с помощью следующей команды:

ng version

Теперь мы можем использовать Angular CLI для настройки нового проекта. Используйте команду ng new для создания приложения Angular.

ng new sample

Настройка Git

Git — это программа, которая отслеживает изменения, внесенные в файлы. Основная цель Git — помочь разработчикам сотрудничать внутри организации или публично над одним проектом.

Git также бесплатен и имеет открытый исходный код. Он рассматривает файлы как снимки файловой системы. Каждый раз, когда происходит изменение, Git делает снимок и сохраняет его для справки.

Если Git уже установлен, этот шаг можно пропустить. В противном случае установите его со страницы Git downloads.

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

git --version

Это покажет нам установленную версию Git.

Запуск примера приложения Angular

Когда CLI завершит создание приложения Angular, перейдите в папку приложения.

cd sample

Внутри папки проекта используйте ng serve, чтобы запустить приложение и проверить, работает ли оно.

ng serve

Мы успешно создали приложение Angular и развернули его локально.

Как работают страницы GitHub

Страницы GitHub поддерживают два разных метода создания папок:

  • Корень
  • Документы

Мы можем использовать метод Root для простых файлов HTML, CSS и JavaScript, поскольку GitHub Pages начинает искать такие файлы в корневом каталоге.

Используйте метод Docs в тех случаях, когда нам нужно создать приложение. Это помогает размещать только конечный результат приложения, а не полное приложение. Страницы GitHub начинают искать такие файлы в каталоге docs.

Способы размещения на GitHub Pages

Есть много способов разместить приложение Angular на страницах GitHub.

Мы рассмотрим два основных метода размещения приложения Angular на страницах GitHub:

  • Angular-cli-ghpages.
  • Сборка и размещение приложения на GitHub.

Использование angular-cli-ghpages

Angular-cli-ghpages — это пакет, который помогает развернуть приложение Angular непосредственно из интерфейса командной строки Angular.

Настройка репозитория GitHub

Прежде чем создавать приложение Angular, давайте настроим репозиторий GitHub.

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

Хотя Git инициирует репозиторий, мы должны добавить удаленный источник с помощью следующей команды:

git remote add origin <https://github.com/><username>/<repository>.git

Замените тег ‹username› именем пользователя вашей учетной записи GitHub.

Замените тег ‹repository› на имя создаваемого хранилища.

Развертывание с использованием angular-cli-ghpages

В папку примера добавьте пакет angular-cli-ghpages, используя следующую команду:

ng add angular-cli-ghpages

Теперь мы можем приступить к развертыванию.

Команда развертывания проста, и мы должны добавить в нее аргумент base-href с именем репозитория:

ng deploy --base-href=/angular-app/

Здесь команда deploy выполняет всю работу. Нам не нужно вручную создавать или фиксировать эти файлы.

После завершения выполнения этой команды проверьте файлы в репозитории, используя:

https://github.com/<username>/<repositoryname>

Мы можем увидеть размещенный соответствующий сайт по следующей ссылке:

https://<username>.github.io/<repositoryname>

‹username› относится к нашему имени пользователя GitHub, а ‹repositoryname› относится к имени репозитория, созданного в GitHub.

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

Это один из способов размещения приложения Angular на страницах GitHub. Следующий способ заключается в следующем.

Создание приложения Angular и его размещение

Создайте репозиторий Git, выполнив действия, описанные в разделе Настройка репозитория GitHub.

Здесь мы будем использовать то же приложение, которое мы создали в разделе Создание приложения Angular.

Поскольку у нас есть готовое приложение Angular, перейдите в папку приложения, которая в нашем случае находится внутри sample. Нам нужно перейти в папку приложения, потому что команда ng build работает только внутри папки приложения Angular.

Желательно создать новую ветку в нашем репозитории перед сборкой и создать запрос на извлечение из этой ветки после сборки, но это не обязательно.

В Angular CLI есть команда build, которая создает приложение Angular и сохраняет полученные файлы в папку.

Следующая команда помогает нам создать наше приложение Angular:

ng build --output-path docs --base-href /repository-name/

Давайте разберем эту команду и ее параметры:

  • build помогает нам создавать приложение Angular.
  • output-path используется для вывода в другую папку, а не в dist по умолчанию.
  • base-href позволяет указать приложению базовый путь.

В нашем случае имя созданного мной репозитория — angular-app, поэтому команда будет такой:

ng build --output-path docs --base-href /angular-app/

Выходной путь указан как docs, так как мы знаем, что страницы GitHub ищут файлы в двух папках: root и docs. В root у нас есть все остальные данные приложения, поэтому мы не можем использовать их здесь. Вместо этого мы создали отдельную выходную папку с именем docs, которую будем использовать для размещения на страницах GitHub.

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

Вывод сборки

После завершения сборки мы найдем новую папку с именем docs, которая была создана внутри папки sample.

Изучение папки docs может дать нам представление о том, как команда build обеспечивает вывод.

Мы можем найти файл HTML, несколько файлов JS и несколько других файлов. Это результат сборки. Файлов в этой папке достаточно для запуска приложения Angular.

Если мы разместим эту папку на сервере, она покажет нам наше приложение Angular. Есть много серверов, которые позволяют размещать папку в качестве веб-сервера. Мы можем передать папку одному из таких серверов и проверить наш вывод. Это то, что мы сделаем в следующем разделе.

Мы собираемся рассказать, как разместить эту папку на страницах GitHub.

Отправка файлов на GitHub

Теперь мы можем приступить к фиксации изменений на GitHub. После фиксации проверьте файлы в репозитории.

https://github.com/<username>/<repositoryname>

‹username› соответствует вашему имени пользователя GitHub, а ‹repositoryname› соответствует имени репозитория.

Настройка страниц GitHub

Оказавшись в репозитории GitHub, перейдите на вкладку Настройки.

В разделе Код и автоматизация найдите Страницы, чтобы настроить страницы GitHub.

Примечание. Репозиторий должен быть общедоступным. Если это не так, измените его на общедоступный, нажав Настройки и прокрутив страницу вниз. Следуйте приведенным там инструкциям, чтобы сделать частный репозиторий общедоступным.

Заполните раздел Источник следующими данными:

Установите main в качестве ветви, выберите /docs во втором раскрывающемся списке и нажмите Сохранить.

Здесь мы используем основную ветку, но вы можете использовать любую ветку. Желательно создать отдельную ветку для хостинга.

Мы можем найти root и docs во втором раскрывающемся списке. Мы выбираем docs, так как мы создали папку docs и сохранили в ней выходные данные нашей сборки.

После сохранения страница теперь будет содержать ссылку на размещенный сайт.

Мы успешно разместили наше приложение Angular на страницах GitHub.

Через несколько минут перезагрузите страницу. Вы обнаружите, что сообщение изменилось с «Ваш сайт готов к публикации в…» на «Ваш сайт опубликован в…».

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

https://<username>.github.io/<repositoryname>

Где ‹username› — это имя пользователя GitHub, а repositoryname — имя репозитория.

Исправление ошибок

Версия Angular, которую я использовал в этом посте, — 13.0.4. Я столкнулся с несколькими ошибками при создании приложения Angular или при его развертывании.

Ошибку, которую я получил во время сборки, можно найти ниже:

На приведенном выше снимке экрана показаны некоторые из возникших ошибок, но все ошибки были «Ошибка сборки модуля».

Мы можем исправить это с помощью простой команды аудита npm:

npm audit fix --force

Это решило проблему, с которой я столкнулся при создании приложения Angular.

Заключение

Существуют разные способы размещения приложения Angular на страницах GitHub, что позволяет нам использовать все, что соответствует нашим требованиям. В этом сообщении в блоге у первого метода не было всех файлов в репозитории, а присутствовали только выходные файлы. Во втором способе было настроено все приложение, но для размещения в GitHub Pages использовалась только выходная папка docs.

Итак, если нам нужны полные данные приложения, мы можем использовать последний метод. Если хостинг является нашим единственным приоритетом, мы можем использовать первый метод.

Библиотека Angular UI component от Syncfusion — это единственный пакет, который вам когда-либо понадобится для создания приложения, содержащий более 65 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете.

Для существующих клиентов новейшая версия Essential Studio доступна для загрузки на странице Лицензии и загрузки. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы ознакомиться с доступными функциями. Также ознакомьтесь с нашими демонстрациями на GitHub.

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

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 24 февраля 2022 г.