Hat Ihr Team viel Mühe investiert, um Code manuell zu verpacken? Wenn ja, wird es höchste Zeit, GitHub Actions Artifacts zu verwenden, damit Ihr Team diesen Vorgang automatisieren kann. Gleichzeitig reduzieren Sie die Variabilität bei Veröffentlichungen und sparen Zeit für die Arbeit an anderen wichtigen Aufgaben.
GitHub Actions Artifacts ermöglicht es Ihnen, Daten effektiv von einem aktiven Job zu einem anderen zu übertragen und so die wiederholenden und zeitaufwändigen Aufgaben bei der Bereitstellung zu eliminieren. In diesem Tutorial erfahren Sie, wie Sie Artefakte verwenden und verwalten, um eine React-Anwendung auf Netlify bereitzustellen.
Lesen Sie weiter und beginnen Sie mit der Erstellung konsistenter Bereitstellungen!
Voraussetzungen
In diesem Tutorial wird eine praktische Demonstration durchgeführt. Wenn Sie folgen möchten, stellen Sie sicher, dass Sie eine einfache React-Anwendung und ein GitHub-Repository haben. In diesem Tutorial wird ein React Counter App Repository verwendet.
Erstellen eines CI/CD-Workflows
Wenn ein Job in einem GitHub Actions-Workflow endet, enden auch die von ihm verarbeiteten und generierten Daten. Daten, die als Artefakte bezeichnet werden, können auf der Repository-Seite nach Abschluss der Jobs aufbewahrt und mithilfe der Aktion „upload-artifact“ hochgeladen werden.
Aber bevor Sie GitHub Actions-Artefakte für Ihre Bereitstellungen verwenden können, müssen Sie zunächst einen CI/CD-Workflow für Ihre Anwendung erstellen:
1. Erstellen Sie einen .github-Ordner im Stammverzeichnis Ihrer Anwendung und erstellen Sie einen Unterordner namens workflows.
2. Erstellen Sie anschließend die Workflow-Datei (eine .yml-Datei) im workflows-Ordner. Sie können die Datei nach Belieben benennen. Für dieses Tutorial wird die Datei jedoch als ci.yml benannt.
Ihre Dateiworkflow-Ressourcenstruktur sollte der folgenden ähneln.
3. Fügen Sie den folgenden Code in die Datei ci.yml ein und speichern Sie die Änderungen. Der folgende Code erstellt einen Workflow namens CI mit einem Build-Job für die Anwendung.
4. Fügen Sie nun die Änderungen hinzu, committen Sie sie und pushen Sie sie in Ihr entferntes GitHub-Repository.
Wenn der Push erfolgreich war, sehen Sie den Commit mit einem bernsteinfarbenen Kreis, wie unten dargestellt, der anzeigt, dass der Workflow läuft.
5. Klicken Sie auf die Registerkarte „Actions“, um den Workflow anzuzeigen.
6. Klicken Sie auf beliebige Build-Jobs auf der linken Seite und erweitern Sie den Build-App-Job. Sie sehen die vom Build-Job generierten Daten (statische Dateien). Dies sind die Dateien, die Sie für die Bereitstellung benötigen.
Diese generierten Dateien gehen verloren, wenn der Server, auf dem der Job ausgeführt wird, entsorgt wird (oder wenn der Job endet). Da Sie diese Dateien für die Bereitstellung benötigen, werden Sie in dem folgenden Abschnitt einen Schritt implementieren, um diese Dateien zu nehmen und als Artefakt hochzuladen.
7. Fügen Sie schließlich den folgenden Code nach dem Ausführen der Tests unter dem Schritte-Block in Ihrem Build-Job hinzu.
Der unten stehende Code lädt ein Artefakt namens „production“ aus dem Build-Verzeichnis mithilfe der Aktion „actions/upload-artifact@v3“ hoch.
Die generierten Dateien gehen verloren, wenn der Server, der den Job ausführt, verworfen wird oder wenn der Job endet. Da Sie diese Dateien jedoch für das Deployment benötigen, implementiert der unten stehende Code einen Schritt, um sie zu nehmen und als Artefakt hochzuladen.
Konfiguration einer benutzerdefinierten Artefakt-Aufbewahrungsfrist
Artefakte werden standardmäßig 90 Tage lang gespeichert, bevor sie gelöscht werden. Je nach Typ des Repositorys können Sie jedoch diese Aufbewahrungsfrist ändern.
Nachfolgend sind die Werte aufgeführt, die Sie zur Anpassung der Artefakt-Aufbewahrungsfrist festlegen können:
- Privates Repository – Jeder Wert zwischen
1und400Tagen. - Öffentliches Repository – Nur Werte zwischen
1und90Tagen.
Um eine benutzerdefinierte Artefakt-Aufbewahrungsfrist festzulegen, aktualisieren Sie Ihre Workflow-YAML-Datei, indem Sie retention-days: 2 in Ihrem # Artefakt hochladen Schritt einschließen.
Alternativ können Sie die Artefakt-Aufbewahrungsfrist wie folgt über GitHub konfigurieren:
- Navigieren Sie zum Einstellungen-Tab im Repository.
- Klicken Sie auf Aktion (linkes Panel), um das Dropdown-Menü zu erweitern, und wählen Sie Allgemein.
- Geben Sie die Anzahl der Tage ein, die Sie das Artefakt unter dem Abschnitt Artefakt- und Protokollspeicherung unten behalten möchten, und klicken Sie auf Speichern.
Importieren eines Projekts aus dem Git-Repository in Netlify
Das Build-Artefakt kann jetzt in einem anderen Job im Workflow abgerufen werden, indem es heruntergeladen wird, da Sie einen Schritt zum Hochladen des Artefakts haben, was die Workflow-Abschlusszeit verkürzt. Sie werden eine Bereitstellungsaufgabe zu Ihrem Workflow hinzufügen, und einer der Schritte in diesem Job lädt das hochgeladene Element herunter.
Aber bevor Sie Ihren Workflow aktualisieren, richten Sie Netlify für die App-Bereitstellung ein:
1. Öffnen Sie Ihren bevorzugten Webbrowser, navigieren Sie zu Netlify und melden Sie sich mit Ihrem GitHub-Konto an.
2. Sobald Sie angemeldet sind, klicken Sie im Bereich Websites auf Neue Website hinzufügen und wählen Sie Importieren eines vorhandenen Projekts aus, um den Import Ihres Projekts zu starten.
3. Klicken Sie auf GitHub, da Sie das Repository verwenden werden, das Sie für dieses Tutorial auf GitHub erstellt haben. Es erscheint ein Popup-Fenster, in dem Sie Netlify Zugriff auf Ihre GitHub-Identität autorisieren.
4. Sobald autorisiert, suchen Sie und wählen Sie das Repository aus, aus dem Sie das Projekt importieren möchten.
5. Auf der neuen Seite konfigurieren Sie die grundlegenden Build-Einstellungen für die Website, wie z.B. den Branch, von dem aus Sie bereitstellen möchten, und den Build-Befehl. Da Sie jedoch mit GitHub-Actions bereitstellen werden, lassen Sie die Felder für den Build-Befehl und das Veröffentlichungsverzeichnis leer.
Klicken Sie auf „Seite bereitstellen“, nachdem Sie die Build-Einstellungen konfiguriert haben, und Sie werden sehen, dass die Seite bereitgestellt wird. Sobald sie bereitgestellt ist, wird ein Live-Link für die Seite generiert.
Wenn Sie das Feld für den Build-Befehl leer gelassen haben, wird beim Aufrufen des Links eine 404-Seite angezeigt, da die App nicht gebaut wurde.
6. Klicken Sie als Nächstes auf „Website-Einstellungen“, um die Seiteninformationen zu überprüfen (Schritt sechs).
7. Notieren Sie sich schließlich auf der Seite mit den Seitendetails die Site-ID unter dem Abschnitt „Seiteninformationen“ für späteren Gebrauch.
Erstellen eines persönlichen Zugriffstokens
Jetzt, da Sie Ihre Site-ID haben, benötigen Sie ein Zugriffstoken. Das persönliche Zugriffstoken gewährt Zugriff auf Ihr Netlify-Konto, damit GitHub-Aktionen die Bereitstellung auf Netlify durchführen können.
1. Klicken Sie auf Ihr Profilsymbol (oben rechts) und wählen Sie „Benutzereinstellungen“, um auf Ihre Profil-Einstellungen zuzugreifen.
2. Klicken Sie auf der neuen Seite auf „Anwendungen“ (linke Seite) → „Neues Zugriffstoken“ (unter dem Abschnitt „Persönliche Zugriffstoken“), um das Erstellen eines neuen Zugriffstokens zu starten.
3. Geben Sie auf der neuen Seite einen aussagekräftigen Namen für das Token ein und klicken Sie auf „Token generieren“.
4. Kopieren Sie das Token nun an einen sicheren Ort.
Sichern der Site-ID und des Zugriffstokens durch Erstellen von Secrets
Jetzt, da Sie die Site-ID und das Zugriffstoken von Netlify haben, können Sie sie Ihrem Repository hinzufügen, um sie im Arbeitsablauf der Aktionen zu verwenden. Zuerst müssen Sie jedoch Ihre Site-ID und Ihr Zugriffstoken sichern, indem Sie Secrets erstellen.
1. Navigieren Sie in Ihrem Webbrowser zu Ihrem GitHub-Repository.
2. Klicken Sie anschließend auf die Registerkarte Einstellungen → Geheimnisse (linke Seite) → Aktionen (unter Geheimnisse), um auf die Liste der auf Ihrem Repository verfügbaren Aktionen zuzugreifen.
3. Klicken Sie auf der Seite Geheimnisse für Aktionen auf Neues Repository-Geheimnis, um das Hinzufügen eines Geheimnisses zu starten.
4. Geben Sie jetzt einen aussagekräftigen Namen für das neue Geheimnis ein. In diesem Tutorial wird jedoch NETLIFY_AUTH_TOKEN als Geheimnisname verwendet.
Fügen Sie Ihren Zugriffstoken als Wert hinzu und klicken Sie auf Geheimnis hinzufügen, um das neue Geheimnis zu erstellen.
5. Wiederholen Sie abschließend Schritt vier, fügen Sie diesmal jedoch ein Geheimnis für Ihre Seiten-ID hinzu.
Nachdem Sie hinzugefügt wurden, sehen Sie die Geheimnisse im Abschnitt Repository-Geheimnisse, wie unten gezeigt.
Herunterladen und Bereitstellen von Artefakten auf Netlify
Jetzt, da Ihre Netlify-Website und Geheimnisse eingerichtet sind, fügen Sie einen Schritt in Ihren Workflow ein, um unter Verwendung Ihrer Geheimnisse auf Netlify bereitzustellen.
1. Aktualisieren Sie Ihren Workflow, indem Sie den folgenden Code hinzufügen, der den Bereitstellungsschritt enthält.
Der folgende Code enthält Schritte zum Herunterladen des hochgeladenen Artefakts und einen weiteren Schritt zum Bereitstellen auf Netlify.
Sie finden den vollständigen Code für die ci.yml-Datei im GitHub-Repository von ATA.
2. Fügen Sie als nächstes die Änderungen hinzu und pushen Sie sie in das Remote-Repository.
Sie sollten den neuesten Commit auf der Workflow-Seite im Repository sehen, wie unten gezeigt.
Nachdem Sie committet haben, klicken Sie auf den neuesten Lauf, um weitere Details anzuzeigen.
Wenn die Jobs erfolgreich ausgeführt werden, sehen Sie neben den Jobs ein grünes Häkchen und das Produktions-Artefakt am Ende der Seite.
3. Klicken Sie nun auf den Bereitstellungs-Job (linke Seite) und erweitern Sie die Aufgabe „Netlify bereitstellen“. Sie sehen die Ausgabe des Schritts, die die Website-URL enthält.
Klicken Sie auf die Website-URL, um die Funktionsweise der Seite zu überprüfen und darauf zuzugreifen.
Die URL öffnet sich automatisch in einem neuen Tab Ihres Webbrowsers, wie unten gezeigt. Diese Ausgabe zeigt an, dass Ihre Seite korrekt funktioniert.
Löschen nicht verwendeter Artefakte, um Speicherplatz zu sparen
Nach jeder Veröffentlichung verbrauchen Sie mehr Festplattenspeicher, wenn Sie neue Veröffentlichungen hochladen und herunterladen. Wie sparen Sie Speicherplatz? Das Löschen nicht verwendeter Artefakte ist die beste Lösung. Sie müssen die Anzahl der Veröffentlichungsartefakte auf jedem Server begrenzen, um die Ansammlung Tausender Veröffentlichungen und eine volle Festplatte zu verhindern.
Neben der Verwendung der Aufbewahrungsfristeneinstellung zum Löschen von Artefakten nach einer bestimmten Zeit können Sie das Artefakt auch von der Workflow-Seite auf GitHub löschen:
Auf Ihrer Workflow-Seite klicken Sie auf das Löschsymbol neben dem Artefakt, um es zu entfernen.
Jetzt klicken Sie auf OK in der Meldung (oberste), um das Löschen des Artefakts zu bestätigen.
Beachten Sie unten, dass das Artefakt nicht mehr auf der Seite vorhanden ist, was bestätigt, dass es erfolgreich gelöscht wurde.
Abschluss
Sie haben gesehen, wie Artefakte die Entwicklung komplexerer Automatisierung erleichtern, bei der ein Workflow Informationen an einen anderen bereitstellt. Zu diesem Zeitpunkt sollten Sie nun ein besseres Verständnis für GitHub Actions Artefakte haben und wie sie für Ihre Bereitstellungsveröffentlichungen genutzt werden können.
Mit diesem neu gewonnenen Wissen, warum nicht GitHub Actions für die Workflow-Automatisierung Ihres nächsten Projekts nutzen?
Source:
https://adamtheautomator.com/github-actions-artifacts-2/