В этой статье мы узнаем, как вы сможете ускорить свои строительники Скалли, повторно используя угловые артефакты в действиях GitHub. Чтобы статически построить свой угловой веб -сайт со Scully, сначала вам нужно сделать угловую сборку, а затем использовать артефакты сборки для создания статически генерируемого сайта с использованием Scully.
Для большинства веб -сайтов это часто, этот контент может измениться без изменения исходного кода вашего веб -сайта. Следовательно, может быть расточительно запускать угловую сборку каждый раз, когда изменяется контент вашего сайта.
Обычно, угловые строительные времена приличное. Но из -за ряда факторов угловые сборки могут замедлиться, как в моем случае, продувка CSS против Tailwindcss продлевает время сборки до более чем 7 минут. Добавьте все остальное вместе, и мои действия GitHub зайдут более 12 минут.
Использование выпусков GitHub
Во -первых, нам понадобится место для хранения наших угловых артефактов. GitHub Выпуски это хороший способ, так как он позволяет вам иметь долгосрочное хранение ваших артефактов, которые вы можете использовать в любое время. Это в сочетании с NPM версия означает, что у вас есть свои функции; Вы можете сократить релиз, который будет использоваться последующими сборками, поскольку вы продолжаете работать над другими функциями и/или улучшениями.
Таким образом, мы собираемся построить наш рабочий процесс, чтобы иметь две работы, первая работа позаботится о создании нашего углового приложения, а также о выпуске и загрузке наших артефактов сборки в релиз. В то время как вторая работа позаботится о создании Scully, используя последние артефакты, хранящиеся в выпусках GitHub, и публикует наш веб -сайт на нашу хостинговую платформу.
Всякий раз, когда в репозиторий добавляется новый тег, мы создадим релиз с версией №. из тега и загрузите наши угловые сборки в этот релиз.
Создание наше угловое приложение
Слушая теги
Во -первых, нам нужно будет запустить наш рабочий процесс GitHub каждый раз, когда создается новый тег. Мы будем использовать теги для создания версии выпуска. Это позволит нам использовать NPM версия Чтобы создать новые артефакты сборки для нас для использования во время процесса публикации.
on:
push:
tags:
- "*"
NB: В разделе «Публикация нашего блога» мы изменим этот раздел, чтобы прослушать Repository_dispatch , который мы будем использовать с Webhooks, чтобы запустить рабочий процесс, когда происходят события вне нашего репозитория, как опубликовано в блоге, вы можете узнать больше Здесь Анкет
Мы ограничим эту задачу, чтобы запустить только тогда, когда новый тег создается с использованием Startswith (github.ref, 'refs/tags/') . Это позволит нам использовать один и тот же файл рабочего процесса для построения и публикации, причем они будут двумя отдельными заданиями.
jobs:
build:
if: startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
Установка пакетов NPM
Затем нам нужно будет установить пакеты NPM, прежде чем мы сможем построить наше угловое приложение. В этом случае мы используем пряжа Но не стесняйтесь использовать свой любимый менеджер пакетов. Мы начнем с проверки (GIT Checkout) Наш репозиторий. После этого мы затем настроим Nodejs и, наконец, запустите установку пряжи для установки наших пакетов NPM.
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: yarn install
run: yarn install
Строительство углового проекта
И тогда мы можем добавить шаг, чтобы запустить Сборка пряжи: Prod Чтобы построить наше угловое приложение в производстве.
- name: yarn build run: yarn build:prod
Создание артефактов выпуска и загрузки
Теперь, когда мы построили наш проект, мы собираемся сделать две вещи дальше. Мы застегнем застегивание артефактов сборки, а затем создадим релиз и загружаем наш артефакт Zipp в релизы. Мы будем использовать Papeloto/Action-Zip Действие, чтобы застегнуть файлы:
- uses: papeloto/action-zip@v1
with:
files: "./dist/webapp/"
dest: webapp.zip
Заменить WebApp с выходным каталогом вашего углового проекта сборка.
А потом мы собираемся создать релиз GitHub и загрузить вышеуказанный артефакт на Zipd в релиз GitHub. Мы будем использовать Ncipollo/Action Action Action , чтобы выполнить это, как показано ниже.
- name: Push Build to Releases
uses: ncipollo/release-action@v1
with:
artifacts: "webapp.zip"
token: ${{ secrets.GITHUB_TOKEN }}
Вот что выглядит наш рабочий процесс:
name: Release a new Version
on:
push:
tags:
- "*"
jobs:
build:
if: startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: yarn install
run: yarn install
- name: yarn build
run: yarn build:prod
- uses: papeloto/action-zip@v1
with:
files: "./dist/webapp/"
dest: webapp.zip
- name: Push Build to Releases
uses: ncipollo/release-action@v1
with:
artifacts: "webapp.zip"
token: ${{ secrets.GITHUB_TOKEN }}
Строительство Скалли и издательский блог
Далее мы собираемся добавить вторую работу — публикация — Это будет загружать наши угловые артефакты из нашего последнего релиза, запустить Scully Build и загрузить артефакты на нашу хостинговую платформу.
Во -первых, нам нужно будет послушать ON Repository_dispatch Поскольку именно так мы запустим наш веб -сайт восстановления, когда контент на нашем CMS изменится, как объяснено Здесь Анкет Не стесняйтесь использовать любые другие триггеры действия GitHub, подходящие для вашей системы управления контентом, то есть на Push to Master в каталоге блога, если вы используете Markdown.
on:
push:
tags:
- "*"
repository_dispatch:
types:
- publish_blog
Далее мы собираемся создать работу публикации, которая будет работать после работы по сборке, но если работа по сборке не будет выполнена, она в любом случае будет работать. Мы будем использовать if: всегда () Условие для запуска работы, даже если сборка нет. Это запустит работу публикации, если будет опубликовано новое сообщение в блоге, которое пропустит работу сборки, но также и когда будет сделан новый релиз, и в этом случае вы хотите, чтобы веб -сайт был опубликован с выпущенными изменениями.
Единственным недостатком этого подхода является то, что работа публикации будет работать, даже если работа построения не сработает.
publish: runs-on: ubuntu-latest needs: [build] if: always()
Далее нам нужно будет настроить узел и запустить Установка пряжи Чтобы установить пакеты NPM, так как Scully требует оба для работы.
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: yarn install
run: yarn install
После этого мы собираемся скачать наш артефакт сборки, который мы загрузили в релиз GitHub — webapp.zip — и раскрипировать содержание в Dist/WebApp каталог. Чтобы загрузить артефакт из релиза Github, мы будем использовать dsaltares/fetch-gh-release-asset действие.
- uses: dsaltares/fetch-gh-release-asset@master
with:
repo: "USERNAME/REPOSITORY"
version: "latest"
file: "webapp.zip"
target: "webapp.zip"
token: ${{ secrets.GITHUB_PAT }}
NB: Для частного репозитория вам понадобится личный доступ GitHub Токен (PAT) По крайней мере, с org: крюк объем. Узнайте больше Здесь Анкет
Далее мы создадим каталог, чтобы поместить артефакты Angular WebApp, а затем расслабиться webapp.zip который мы скачали из выпусков GitHub.
- name: create dist directory
run: mkdir -p dist/webapp
- name: Decompress
uses: TonyBogdanov/zip@1.0
with:
args: unzip -qq ./webapp.zip -d ./dist/webapp
И, наконец, беги пряжа Скалли Для статической генерации сайта нашего углового приложения:
- name: Run scully run: yarn scully
Теперь мы можем развернуть артефакт Scully Build на ваш сайт. В этом случае мы будем использовать хостинг Firebase, который вы можете сделать, как показано ниже.
- name: deploy firebase webapp
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
А теперь наш последний рабочий процесс действия GitHub выглядит так:
name: Publish Blog
on:
push:
tags:
- "*"
repository_dispatch:
types:
- publish_blog
- build_site
jobs:
build:
if: startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: yarn install
run: yarn install
- name: yarn build
run: yarn build:prod
- uses: papeloto/action-zip@v1
with:
files: "./dist/webapp/"
dest: webapp.zip
- name: Push Build to Releases
uses: ncipollo/release-action@v1
with:
artifacts: "webapp.zip"
token: ${{ secrets.GITHUB_TOKEN }}
publish:
runs-on: ubuntu-latest
needs: [build]
if: always()
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: yarn install
run: yarn install
- uses: dsaltares/fetch-gh-release-asset@master
with:
repo: "[USERNAME]/[REPO]"
version: "latest"
file: "webapp.zip"
target: "webapp.zip"
token: ${{ secrets.GITHUB_PAT }}
- name: create dist directory
run: mkdir -p dist/webapp
- name: Decompress
uses: TonyBogdanov/zip@1.0
with:
args: unzip -qq ./webapp.zip -d ./dist/webapp
- name: Run scully
run: yarn scully
- name: deploy firebase webapp
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Вывод
В этой статье мы рассмотрели, как мы можем оптимизировать наше время Скалли, разделяя угловые сборки и сборки Скалли, где мы храним наши угловые сборки и повторно используют артефакты в будущих сборках Скалли.
Это может не потребоваться для вашего приложения, если вы не используете такие инструменты, как чистка CSS для удаления неиспользованных CSS, поскольку угловые сборки обычно быстрые для приложений малого и среднего размера.
Есть несколько вещей, которые я пропустил, как кэширование зависимостей NPM, которые могут сбросить еще несколько секунд от вашего времени сборки, и я настоятельно рекомендую вам реализовать следующие инструкции Здесь Анкет
Ссылки
- Используйте Webhooks, чтобы запустить действия GitHub — Ссылка Анкет
- Начало работы со Скалли — Ссылка Анкет
- Начало работы с действиями GitHub — Ссылка Анкет
- О выпусках GitHub — Ссылка Анкет
- Angular CDK — модуль платформы — Ссылка Анкет
Оригинал: «https://dev.to/this-is-learning/speeding-up-angular-scully-builds-in-github-actions-559g»