Размещайте приложения Angular бесплатно на страницах GitHub.

Страницы GitHub

GitHub по своей сути представляет собой облачный сервис для разработки программного обеспечения и контроля версий с использованием распределенной системы контроля версий Git.

GitHub также предлагает набор функций, которые значительно расширяют его основные функции, такие как действия GitHub для рабочих процессов автоматизации, задачи и проекты GitHub, которые предлагают функции управления проектами, а также, среди прочего, страницы GitHub, которые предлагают возможность размещать статические сайты БЕСПЛАТНО.

По соглашению достаточно поместить файлы вашего сайта в ветку gh-pages вашего репозитория GitHub, и если ваш репозиторий находится по адресу:

https://github.com/имя пользователя/репозиторий

ваш сайт будет размещен по адресу:

https://имя пользователя.github.io/репо

СПА

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

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

Angular — один из триумвирата популярных SPA-фреймворков, наряду с React и Vue.

Процесс развертывания приложений, созданных с помощью разных платформ SPA, на страницах GitHub идентичен.

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

Действия GitHub

Предполагая, что вы размещаете свой репозиторий git на GitHub, процесс развертывания можно автоматизировать с помощью рабочего процесса действий GitHub.

Рабочие процессы действий запускаются автоматически каким-либо событием в репозитории или, например, при открытии задачи, и выполняют последовательность шагов, которые вы указываете в файлах *.yml, хранящихся в /.github/workflows каталог вашего проекта.

Таким образом, определения рабочих процессов становятся частью вашего репозитория.

Действия запускаются на виртуальных машинах, называемых бегунами.

Процесс размещения SPA на GitHub с помощью Actions выглядит следующим образом:

Получите код вашего репозитория на машине-бегуне
Создание файлов дистрибутива
Отправьте файлы дистрибутива обратно на GitHub в ветку gh-pages.

Дополнительным шагом по переносу файлов дистрибутива из ветки gh-pages на сервер хостинга страниц GitHub будет автоматический бот GitHub вскоре после того, как вы зафиксируете ветку gh-pages.

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

Среди прочего есть также действие, которое может отправить файлы вашего дистрибутива в ветку gh-pages — peaceiris/actions-gh-pages@v3.

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

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

https://‹github_username›.github.io/‹github_repository›

Чтобы сделать файл рабочего процесса действий динамическим, а не жестко запрограммировать текущего пользователя и репозиторий проекта, мы можем использовать переменные контекста github:

‹github_username› = ${{github.actor}}
‹github_repository› = ${{github.event.repository.name}}

Пример рабочего процесса, который создает файлы дистрибутива Angular и помещает их в корень ветки gh-pages:

name: GitHub Pages

on:
  push:
    branches:
      - main
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions: 
      contents: write

    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'
        cache: 'npm'

    - name: Install dependencies
      run: npm install

    - name: Build Github Pages Angular Site
      run: npm run build -- --base-href https://${{github.actor}}.github.io/${{github.event.repository.name}}/

    - name: Deploy
      if: success()
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: dist/${{github.event.repository.name}}
        enable_jekyll: true

После завершения рабочего процесса:

у нас будет два филиала.

В нашей основной ветке исходный код приложения Angular:

и на файлах дистрибутива ветки gh-pages в корне ветки:

После того, как мы укажем в настройках нашего проекта (меню «Страницы»), что мы хотим, чтобы сайт был развернут из корня ветки gh-pages:

GitHub автоматически инициирует действие бота создание и развертывание страниц

который перенесет файлы на хостинг-сервер, и наш сайт будет доступен после завершения действий.

Развертывания отслеживаются как часть нашего репозитория.

Пример репозитория: angular-oauth2-oidc

Репозиторий использовался как способ продемонстрировать, как реализовать потоки oauth2 и open id Connect с помощью Angular, с сопровождающим руководством на YouTube:

Размещайте приложения Angular бесплатно на страницах GitHub.

Страницы GitHub

СПА

Действия GitHub

Вопросы по теме