Entwickler sind manchmal von der schieren Anzahl der ihnen zur Verfügung stehenden Tools überwältigt und bevorzugen diejenigen, die für sie am besten funktionieren. Wenn Sie wie unser Team sind, bevorzugen Sie vielleicht VSCode gegenüber WebIDE (es funktioniert einfach besser für sprachübergreifende Entwicklungen). Außerdem möchten Sie vielleicht auch für Ihre UI5-Entwicklungen bei GitHub bleiben, so wie Sie es auch für ReactJS/NodeJS/andere Frameworks verwenden.
Was tun Sie also in solchen Fällen mit der Bereitstellung? Wie können Sie Ihre UI5 (OpenUI5/SAPUI5)-Anwendungen ohne die eingebauten WebIDE-Funktionen einfach erstellen, bereitstellen und testen?
In diesem Blog werden die Erkenntnisse aus unserem UI5Con2021-Sitzung zum Thema "Automatisieren von UI5-App-Bereitstellungen mit GitHub". und zeigt Ihnen Schritt für Schritt, wie Sie eine effiziente CI-CD-Pipeline mit GitHub-Aktionen für Ihre UI5-Anwendungen einrichten und nutzen können.
TLDR: Wir verwenden eine benutzerdefinierte GitHub-Aktion ui5-bereitstellung zur Vereinfachung und Beschleunigung unserer Einrichtung für die automatische Erstellung und Bereitstellung von Code in der SAP BTP Neo-Umgebung. Das offizielle Referenzdokument kann unter folgender Adresse abgerufen werden https://github.com/marketplace/actions/ui5-deploy
UI5Con-Sitzung:
Build" und "Deploy" für UI5-Anwendungen
Damit eine Anwendungsbereitstellung fortgesetzt werden kann, muss die bauen notwendig ist. Der Build ist der Prozess der Kompilierung und Verpackung von Software in eine Form, die ideal für die Bereitstellung, Installation oder Veröffentlichung ist. Wir wollen versuchen, mehr über Build und Deployment zu erfahren.
Anwendung erstellen
Die Erstellung ist einer der wichtigsten Schritte bei der Entwicklung einer produktiven Anwendung. In UI5-Anwendungen in der Regel, Webapplikation Ordner bei der Entwicklung einer Anwendung verwendet werden und dist Ordner wird beim Laden im Browser für die produktive Nutzung verwendet. Der Prozess, der diesen Ordner erstellt dist Ordner von Webapplikation Ordner wird als Build bezeichnet.
Der Bauprozess kann mehrere Schritte umfassen, wie zum Beispiel,
- Minimierung des Codes für bessere Leistung (component-preload.js)
- Transpilieren von modernem JS nach Vanilla JS
- Erstellen von CSS-Dateien unter Verwendung von LESS- und SASS-Dateien
- Bündelung von Ressourcendateien und viele andere Dinge
Einsatz von Anwendungen
Sobald wir ein produktives dist Der nächste Schritt besteht darin, diese Änderungen in der Cloud bereitzustellen. Damit die Endbenutzer mit Hilfe einer URL auf Ihre Anwendung zugreifen können.
Diese Konzepte mögen für eine Person, die aus einem Hintergrund verschiedener JS-Frameworks kommt, sehr grundlegend klingen. Aber für jemanden, der nur auf UI5 für eine lange Zeit arbeitet, kann es verwirrend und unwesentlich finden. Der Grund dafür ist, dass sich Entwickler in der Praxis keine Gedanken über diese Dinge machen müssen. Meistens handelt es sich um einmalige Einstellungen, die von erfahrenen Entwicklern oder Architekten vorgenommen werden. Außerdem bietet SAP mit Hilfe von WebIDE und einem Business Studio eine einfachere Möglichkeit, dies zu tun.
Der Bedarf an automatisierten Einsätzen?
Wie wir bereits berichtet haben, bietet SAP mehrere GUI-basierte Lösungen für die Bereitstellung von UI5-Anwendungen. Wenn das so ist, was bringt es dann, die Bereitstellung zu automatisieren? Wie lässt sich damit die Produktivität steigern? Hier sind einige Vorteile aus unserer Erfahrung:
1. Zentraler Einsatz
Die Bereitstellung ist einer der letzten Schritte, bevor eine Anwendung für die Endbenutzer verfügbar wird. Eine zentralisierte Bereitstellung hilft nicht nur bei der besseren Nachverfolgung aller Bereitstellungen, sondern verringert auch die Wahrscheinlichkeit, dass ein Entwickler einen falschen Build bereitstellt.
2. Regelmäßige Einsätze
Ein automatisiertes Setup ohne Bereitstellungsaufwand für neue Builds fördert die häufige Bereitstellung durch das Entwicklungsteam, insbesondere DEV Umgebung. Diese funktionsspezifische / git-commit-basierte Bereitstellung hilft anderen Teammitgliedern bei der frühzeitigen Erkennung von Problemen und hält alle auf dem Laufenden.
3. Automatisierte Qualitätsprüfungen | Integrierte statische Codeprüfung
Statische Codeprüfungen wie ESLint helfen zu vermeiden, dass die Anwendung aufgrund von JS-Fehlern nicht mehr funktioniert. Indem wir sicherstellen, dass diese Prüfungen vor jedem Build automatisch ausgeführt werden, können wir in Kombination mit anderen nützlichen Github-Aktionen besonders sicher sein, dass der Code vor jedem Einsatz unsere Qualitätskontrolle durchlaufen hat.
4. Verwendung von GitHub-Geheimnissen für den zentralisierten Zugriff
Da die Bereitstellung zentral über unsere CI/CD-Pipeline erfolgt, kommt es nicht zu Engpässen bei der Bereitstellung aufgrund von SAP BTP-Berechtigungen oder der Notwendigkeit der gemeinsamen Nutzung von Anmeldeinformationen mit bestimmten Entwicklern. GitHub-Geheimnisse ermöglichen eine sichere Konfiguration eines zentralen Benutzers, der einmal konfiguriert und automatisch für alle Bereitstellungsläufe verwendet werden kann.
Wie kann man die Bereitstellung von GitHub aus automatisieren?
Wir werden folgende Mittel einsetzen GitHub-Aktionen hier, um unsere Einrichtung zu vereinfachen. Mit GitHub Actions können Sie benutzerdefinierte Workflows für den Lebenszyklus der Softwareentwicklung direkt in Ihrem GitHub-Repository erstellen. Diese Workflows bestehen aus verschiedenen Aufgaben, sogenannten Actions, die bei bestimmten Ereignissen automatisch ausgeführt werden können. Mehr darüber erfahren Sie unter offizielle GitHub-Dokumentation hier.
Dies sind einige nette Ergänzungen zum umfangreichen Funktionsumfang von GitHub.
- GitHub wird als Code-Repository für die UI5-Anwendung verwendet.
- Das SAP BTP-Unterkonto wird für die Bereitstellung verbunden.
- Die Verbindung wird über unsere benutzerdefinierte GitHub-Aktion.
Schritt-für-Schritt-Anleitung:
Eine der Voraussetzungen für die nächsten Schritte ist, dass Sie bereits wissen, wie die Anwendungsbereitstellung in SAP BTP Neo funktioniert. Es ist wichtig zu wissen, welche Schritte wir hier zu automatisieren versuchen. Falls nicht, lesen Sie bitte nach unter hier↗️
Alle Inhalte, die sich auf GitHub-Aktionen beziehen, werden innerhalb der .github/workflows Ordner des Projekts. Wenn Ihr Projekt nicht über einen solchen Ordner verfügt, erstellen Sie diese Ordner.
Innerhalb des Ordners benötigen wir eine .yaml Datei, die alle Konfigurationen enthalten wird. Der Dateiname kann je nach Bedarf gewählt werden. Hier werden wir mit deployment.yaml der Einfachheit halber. Am Ende sollte Ihre Ordnerstruktur in etwa so aussehen wie auf dem folgenden Screenshot.
root
|__ .github
|Workflows
|__ deployment.yaml
deployment.yaml
Name: SAP BTP-Bereitstellung
am:
# Die Bereitstellung erfolgt über die GitHub-Aktion PUSH, sobald ein Push auf den Master-Zweig erfolgt (wir können die Aktion beliebig ändern, z. B. COMMIT)
pushen:
branches:
- Master
# für die manuelle Bereitstellung
workflow_dispatch:
Eingaben:
logLevel:
Beschreibung: 'Log Level'
erforderlich: true
Standard: 'Warnung'
Aufträge:
Einsatz:
name: Bereitstellung
läuft auf: ubuntu-latest
# die Aufträge, die bei diesem Ereignis ausgeführt werden sollen
steps:
- name: Auschecken in das Repository
verwendet: actions/checkout@v1
- name: Node.js verwenden ${{ matrix.node-version }}
verwendet: actions/setup-node@v1
mit:
node-version: ${{ matrix.node-version }}
- name: NPM-Abhängigkeiten laden
ausführen: yarn
- name: UI5-Projekt erstellen
Ausführen: yarn build-all
- name: Projekt bereitstellen
verwendet: integrtr/ui5-deploy@master
mit:
Typ: 'neo'
user: ${{ secrets.NEO_USER }}
Kennwort: ${{ geheimnisse.NEO_PASSWORT }}
Rechner: ${{ geheimnisse.NEO_HOST }}
sub-account-id: ${{ secrets.NEO_ACCOUNT }}
Da wir mehrere GitHub-Geheimnisse verwenden, die für die Verbindung zu SAP BTP unerlässlich sind, können wir sie im Abschnitt GitHub-Geheimnisse verwalten GitHub-Repository → Registerkarte Einstellungen → Geheimnisse
Hinweis: Sie benötigen Administrator-/Besitzerzugriff auf das GitHub-Repository, um Geheimnisse zu verwalten.
SAP BTP setzt voraus, dass eine Anwendung über einige notwendige Primärdaten verfügt. Diese können gepflegt werden in mta.yaml an der Wurzel Ihres Projekts.
root
|__ mta.yaml
mta.yaml
schema-version: '2.0.0'
ID: 'ui5boilerplate'
Version: 1.0.0
Parameter:
hcp-deployer-version: '1.0.0'
Module:
- name: 'ui5boilerplate'
Typ: com.sap.fiori.app
Pfad: ./dist
Parameter:
html5-app-name: 'ui5boilerplate'
html5-app-anzeige-name: 'ui5boilerplate'
Mindest-Sapui5-Version: 1.44.10
html5-app-version: 1.0.0-${Zeitstempel}
Wir haben unser Projekt so konfiguriert, dass es die GitHub-Aktion verwendet und unsere Anwendung bei einer neuen Übergabe an den Master-Zweig in BTP bereitstellt. Dies ist das Standardverhalten, das Sie jetzt haben werden und das Sie vollständig anpassen können, indem Sie yaml Dateien mit Hilfe von GitHub-Referenzdokumenten.
Jetzt können Sie Ihre neuen Änderungen an GitHub weitergeben und Sie werden auf der Registerkarte "Aktionen" die "GitHub-Aktion" sehen können, sobald Ihr Code mit der Meister Zweig. Nach Abschluss der Bereitstellung können Sie den aktualisierten Code in Ihrem BTP-Unterkonto sehen.
Beispiel-Repository mit GitHub-Aktionseinrichtung: https://github.com/integrtr/ui5-boilerplate/tree/basic-deployment-setup
Nachdem Sie nun die Grundeinstellungen für Ihre Bereitstellungen konfiguriert und automatisiert haben, können Sie nun experimentieren, um die Effizienz zu steigern. Einige davon, die Sie ausprobieren können, sind:
- Bereitstellung einer einzigen Anwendung für mehrere Unterkonten
- Einfache Pflege der Entwicklungs-, Qualitäts- und Produktionsumgebung
- Kombinierte automatisierte Bereitstellung und manuelle Bereitstellung für die Produktion zur besseren Kontrolle
- Verwendung zusätzlicher GitHub-Aktionen vom Marktplatz für Code-Qualitätsprüfungen, automatisierte Tests (wie ESLint)
- Multisystem-Einsätze. Verwenden Sie die
ui5-bereitstellungAktion zur Konfiguration von Deployments für Ihre ABAP-Umgebungen
Viel Spaß beim Automatisieren Ihrer Entwicklungsabläufe!
