Angular Build mit GitHub Actions
GitHub Actions ermöglichen es, Reaktionen auszulösen, wenn in einem GitHub Repository Ereignisse eintreten.
Damit lässt sich beispielsweise Generierung von Dokumentation, oder Build und Test von Programmcode umsetzen, ohne einen zusätzlichen CI-Server zu benötigen.
Anders als viele andere CI Lösungen, wie beispielsweise GitLab-CI, setzt GitHub Actions dabei auf vordefinierte Umgebungen und nicht auf Container.
Allerdings lassen sich neben den in den Umgebungen vorhandenen Standardwerkzeugen auch zusätzliche Actions hinzunehmen.
Bei Actions handelt es sich um wiederverwendbare Code-Bausteine.
Außer von GitHub oder dem eigenen Repository können Actions auch auf einem Marketplace von Drittanbietern, z.B. als Docker-Image, bereitgestellt werden.
Als Umgebungen stehen bei GitHub derzeit Linux, Windows und MacOS zur Verfügung.
Das Ergebnis von GitHub Actions können dann Aktionen unter Verwendung der GitHub API sein. Außerdem können auch Docker-Images erstellt und anschließend in eine Registry gepushed werden.
Wie GitHub Actions genutzt werden können, um eine Angular-Anwendung zu testen und zu bauen, stellen wir in diesem Beitrag vor.
Angular-Anwendung für GitHub Actions erstellen
Zunächst erstellen wir eine Angular Anwendung.
Dazu verwenden wir das Angular CLI, es kann entweder lokal per NPM installiert werden oder als Docker-Container ausgeführt werden.
$ docker run -u $(id -u) --rm -v $PWD:/app trion/ng-cli ng new demoGitHub Action für Angular
GitHub Actions werden durch Workflows im YAML Format beschrieben, die in dem Ordner .github/workflows/ abgelegt werden.
Details finden sich hier: https://help.github.com/en/articles/workflow-syntax-for-github-actions
Die wichtigsten Bestandteile sind die Trigger (on), also wann der Workflow ausgeführt werden soll und die Jobs (jobs) die ausgeführt werden sollen.
Innerhalb eines jeden Jobs gibt es noch die Schritte (steps), die die eigentliche Ausführung vorgeben.
Grundsätzlich gliedert sich der Build einer Angular-Anwendung in diese Schritte:
-
Checkout der Sourcen
-
Installation von NPM-Abhängigkeiten
-
Durchführung von Unit- (und ggf. E2E-) Tests
-
Erstellung und Bereitstellung des Ergebnis-Artefakts
Auf den letzten Schritt verzichten wir an dieser Stelle, da es hier sehr viele Varianten gibt, wie die Auslieferung gestaltet werden könnte.
Zu einem späteren Zeitpunkt kommen wir darauf zurück.
Die oben erwähnten Schritte lassen sich sehr einfach auf entsprechende Steps abbilden.
Damit Tests einfach ausgeführt werden können, werden wir auch hier Docker mit dem Angular-CLI Docker-Image einsetzen.
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Check out repository
uses: actions/checkout@v2
- name: Clean install dependencies
run: |
npm ci
chmod -R a+rwx node_modules
- name: Test Angular app with GitHub Actions and Karma
uses: docker://trion/ng-cli-karma:9.1.0
with:
args: ng test --watch=false --progress=false
- name: E2E Test Angular app with GitHub Actions and Protractor
uses: docker://trion/ng-cli-e2e:9.1.0
with:
args: /bin/sh -c "ng e2e; chmod -R a+rwx node_modules"Diese YAML Datei wird unter .github/workflows/build.yaml abgelegt.
Nach jedem Push kann unter Actions in der GitHub-Oberfläche der Buildstatus angesehen werden.
Build Status
Der Build-Status eines GitHub-Actions-Projekts kann auch als Bild in externen HTML-Seite eingebunden werden - oder natürlich auch auf GitHub selbst als Teil des README.
Die Bild-URL leitet sich dabei von dem Projektnamen und dem Workflownamen ab.
Für das Beispielprojekt unter https://github.com/trion-development/angular-github-actions mit dem Workflow "CI" ergibt sich als Badge-URL:
https://github.com/trion-development/angular-github-actions/workflows/CI/badge.svg
Im Folgeartikel betrachten wir, wie Angular-Anwendungen mit Github-Actions gebaut und dann auf Github-Pages deployed werden können.
Hier geht es zum Artikel: Angular Anwendungen auf GitHub Pages mit GitHub Actions publizieren
Zu den Themen Angular, Architektur von SPA Anwendungen und TypeScript bieten wir sowohl Beratung, Entwicklungsunterstützung als auch passende Schulungen an.
Auch für Ihren individuellen Bedarf können wir Workshops und Schulungen anbieten. Sprechen Sie uns gerne an.