GitHub Actions: Hochladen von Build-Artefakten

Einführung

In einer Continuous Integration (CI) Pipeline erzeugt ein Job oft Dateien (wie kompilierte Binärdateien, Webpack-Bundles oder Testberichte), die Sie aufbewahren oder mit anderen Jobs teilen möchten. Diese Dateien werden als Artefakte (Artifacts) bezeichnet.

Standardmäßig gehen die während eines Workflow-Laufs erstellten Dateien verloren, sobald der Lauf beendet ist. Um sie zu persistieren, müssen Sie sie als Artefakte "hochladen" (upload).

In diesem Lab passen Sie Ihren Node.js-Workflow an, um einen Build-Prozess zu simulieren, der ein dist-Verzeichnis erstellt, und verwenden dann die Aktion actions/upload-artifact, um dieses Verzeichnis zu speichern.

Dieses Lab baut auf dem Repository auf, das Sie in den vorherigen Labs erstellt haben. Sie werden mit dem Repository github-actions-demo arbeiten.

Workflow zur Generierung einer Build-Datei aktualisieren

In diesem Schritt modifizieren Sie die Workflow-Datei, um einen Build-Prozess zu simulieren. Sie fügen einen Schritt hinzu, der ein dist-Verzeichnis und eine Dummy-Artefakt-Datei erstellt.

1. Klicken Sie auf Ihrer GitHub-Repository-Seite für github-actions-demo auf die grüne Schaltfläche Code.
2. Stellen Sie sicher, dass der Reiter HTTPS ausgewählt ist, und kopieren Sie die URL. Sie sollte wie https://github.com/your-username/github-actions-demo.git aussehen.
3. Öffnen Sie das Terminal in der LabEx-Umgebung. Der Standardpfad ist ~/project.
4. Verwenden Sie den Befehl git clone, um das Repository herunterzuladen. Ersetzen Sie your-username durch Ihren tatsächlichen GitHub-Benutzernamen.

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

Beispielausgabe:

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

5. Navigieren Sie in das geklonte Repository:

cd ~/project/github-actions-demo

3. Erstellen Sie eine neue Workflow-Datei .github/workflows/upload-artifacts.yml mithilfe des WebIDE-Editors. Sie finden die Datei im Datei-Explorer auf der linken Seite unter project/github-actions-demo/.github/workflows/.

4. Beginnen Sie mit der Erstellung der grundlegenden Workflow-Struktur. Fügen Sie den Workflow-Namen und den Trigger hinzu:

name: Upload Artifacts

on: [push]

5. Fügen Sie den jobs-Abschnitt hinzu und definieren Sie den build-Job mit seinem Runner:

jobs:
  build:
    runs-on: ubuntu-latest

6. Fügen Sie den steps-Abschnitt hinzu. Fügen Sie zuerst den Checkout-Schritt hinzu:

steps:
  - uses: actions/checkout@v4

7. Fügen Sie den Node.js-Setup-Schritt hinzu:

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

8. Fügen Sie den Schritt zum Installieren der Abhängigkeiten hinzu:

- name: Install dependencies
  run: npm install

9. Fügen Sie den Build-Schritt hinzu, der das dist-Verzeichnis und eine Datei darin erstellt:

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

10. Fügen Sie den Test-Schritt hinzu:

- name: Run tests
  run: npm test

Ihre vollständige Datei sollte nun wie folgt aussehen:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

Erklärung

• mkdir dist: Erstellt ein Verzeichnis namens dist.
• echo ... > dist/build.txt: Erstellt eine einfache Textdatei innerhalb von dist, um ein kompiliertes Asset zu simulieren.

Speichern Sie die Datei (Strg+S oder Cmd+S) nach den Änderungen.

Verwenden von actions/upload-artifact@v4 zum Hochladen des dist-Verzeichnisses

Nachdem wir nun einige Dateien erstellt haben, müssen wir diese hochladen. Wir verwenden die offizielle Aktion actions/upload-artifact.

1. Fügen Sie in .github/workflows/upload-artifacts.yml am Ende des Jobs einen neuen Schritt hinzu:

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

2. Ihre vollständige Datei sollte wie folgt aussehen:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

Erklärung

• uses: actions/upload-artifact@v4: Ruft die Aktion auf, die den Upload verarbeitet.
• name: build-assets: Der Name des Artefakts, wie er in der GitHub UI angezeigt wird.
• path: dist: Das zu hochzuladende Verzeichnis (oder die Datei).

Speichern Sie die Datei (Strg+S oder Cmd+S).

Änderungen committen, pushen und das Artefakt in der GitHub UI überprüfen

In diesem Schritt committen Sie die Änderungen und pushen sie auf GitHub. Dadurch wird der Workflow ausgelöst, den Sie gerade aktualisiert haben.

1. Stellen Sie sicher, dass Sie sich im Repository-Verzeichnis befinden:

cd ~/project/github-actions-demo

2. Stagen Sie die Änderungen:

git add .

3. Comitten Sie die Änderungen:

git commit -m "Add build step and upload artifacts"

4. Pushen Sie die Änderungen in das Remote-Repository auf GitHub:

git push

Hinweis zur Authentifizierung

Wenn Sie git push ausführen, fordert die WebIDE Sie automatisch zur Authentifizierung auf. Befolgen Sie diese detaillierten Schritte:

1. Ein Popup erscheint mit der Meldung: "The extension 'GitHub' wants to sign in using GitHub." Klicken Sie auf Allow.
2. Es erscheint eine neue Benachrichtigung. Klicken Sie auf "Copy&Continue to GitHub" und dann im nächsten Dialog auf "Open".
3. Melden Sie sich in dem sich öffnenden Browserfenster bei Ihrem GitHub-Konto an und geben Sie den kopierten Autorisierungscode ein. Nach Bestätigung der Autorisierung schließt sich die Seite automatisch.
4. Warten Sie einige Sekunden, und Sie werden sehen, wie das Terminal den Push-Vorgang erfolgreich abschließt.

Datenschutzhinweis: Die WebIDE wird zu Authentifizierungszwecken vollen Zugriff auf Ihr GitHub-Konto anfordern. Sie müssen sich keine Sorgen um Datenschutzbedenken machen – die LabEx VM wird sofort nach Abschluss des aktuellen Labs zerstört, und Ihre Anmelde- und Autorisierungsinformationen werden nicht gespeichert.

Dieser Authentifizierungsprozess erfordert keine manuelle Konfiguration von Benutzername oder Personal Access Token (PAT).

Überprüfung auf GitHub

1. Besuchen Sie Ihr Repository auf GitHub in einem Webbrowser.
2. Klicken Sie auf den Tab Actions.
3. Klicken Sie auf den neuesten Workflow-Lauf (z. B. "Add build step and upload artifacts").
4. Scrollen Sie zum Ende der Übersichtsseite. Sie sollten einen Abschnitt mit dem Titel Artifacts sehen.
5. Sie sollten ein Artefakt mit dem Namen build-assets sehen.
6. Klicken Sie darauf, um es herunterzuladen. Es wird eine ZIP-Datei sein, die build.txt enthält.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie man Daten aus einem Workflow-Lauf mithilfe von Artefakten (Artifacts) speichert. Sie haben:

1. Einen "Build"-Schritt erstellt, der Ausgabedateien generiert hat.
2. actions/upload-artifact verwendet, um das dist-Verzeichnis zu speichern.
3. Überprüft, dass das Artefakt in der GitHub-Benutzeroberfläche zum Download verfügbar war.

Artefakte sind unerlässlich, um Dateien zwischen Jobs auszutauschen (z.B. vom Build-Job zum Deploy-Job) oder um Fehler durch das Hochladen von Logs zu debuggen.