Сборка и деплоймент веб-приложений на Github Pages с помощью Github Actions

Недавно я получил доступ к бета-версий CI-сервиса - Github Actions. Если раньше для использования возможностей “непрерывной интеграций” приходилось использовать такие сервисы как Travis CI или Circle CI, то теперь имея репозиторий на Github’е можно обойтись единой платформой. В этом небольшом посте я хотел бы рассмотреть пример сборки и деплоймента Angular-приложения в рамках платформы Github.

Как и в других CI-сервисах, запуск самого CI-процесса (здесь это называется workflow) можно настроить по-разному, например, указать ветку (master, develop, release/* etc) из которой будет взят код и/или действие при котором будет “тригериться” наш workflow (при merge, pull request, tag etc.). Так же можно указать платформу для сборки нашего кода и версию инструментов для сборки, например, версию NodeJs.

В нашем простом примере, сборка и деплоймент будут происходить после каждого git commit’a в главную ветку master. Первым шагом в нашем workflow, станет установка всех необходимых зависимостей с помощью $ npm install. После этого мы запустим сборку приложения. Для этого воспользуемся Angular CLI и выполним $ ng build --prod. После сборки нам остается перейти в папку /dist/<app-name> и оттуда выполнить "$ git push" собранного приложения в отдельную ветку.

Так как на Github’е нам доступен такой сервис как Github Pages, то мы будем использовать ветку gh-pages. Таким образом Github Pages сможет подхватить контент из соответственной ветки и “захостит” его по адресу https://<user>.github.io/<repository-slug>.

В качестве самого workflow для Github Actions воспользуемся заготовкой Github Pages Deploy. Для её работы нам понадобиться сделать два следующих шага:

1. Генерируем Access Token

Создать новый ключ доступа (access token) можно в настройках Вашего Github-аккаунта (Settings -> Developer settings -> Personal access tokens). Затем необходимо скопировать его и сохранить как секретную переменную под именем ACCESS_TOKEN в настройках репозитория проекта (Settings -> Secret -> Add a new secret).

2. Создаем workflow-файл

После этого создаем yml-файл с нашим workflow и используем в нем уже упомянутую заготовку. Название файла не играет роли (например, build-and-deploy.yml), но важно сохранить его в папке /.github/workflows/build-and-deploy.yml.

Содержание файла:

name: Deploy to GitHub Pages
on:
    push:
        branches:
            - master
jobs:
    build-and-deploy:
        runs-on: ubuntu-latest
        steps:
        - name: Checkout
          uses: actions/checkout@master

        - name: Build and Deploy
          uses: JamesIves/github-pages-deploy-action@master
          env:
            ACCESS_TOKEN: $
            BRANCH: gh-pages
            FOLDER: dist/<app-name>
            BUILD_SCRIPT: npm install && npm run-script build

PS: Не забудьте сменить путь к приложению в папке dist/ и убедиться в том, что в package.json прописан скрипт с командой build. В случае с Angular-приложением в build скрипте нужно указать параметр --base-href=<app-name> с правильным путем.

На этом всё. Если все настроено правильно, то теперь Github Actions будет реагировать на каждый новый коммит, при этом выполняя сборку и деплоймент новой версий вашего приложения.