Automatisiertes Deployment eines React-Frontends mit GitHub Actions und FTP

In diesem Artikel zeige ich dir, wie du dein React-Projekt, das mithilfe von Create React App erstellt wurde, automatisch per GitHub Actions auf einen FTP-Server deployst. Dabei kommt die FTP-Deploy-Action von Sam Kirkland zum Einsatz. Dieses Setup automatisiert den manuellen Prozess – also das Ausführen von npm run build, das Erzeugen des Produktions-Builds und den anschließenden FTP-Upload.

Funktionsweise des Workflows

Der komplette Workflow wird in der Datei .github/workflows/deploy.yml definiert. Beim Push auf den Branch main (oder manuell über den Workflow Dispatch) wird der Build- und Deployment-Prozess gestartet.

1. Repository auschecken

Die Action actions/checkout@v3 sorgt dafür, dass der Code aus deinem GitHub-Repository in den Runner geladen wird.

- name: Checkout Repository
  uses: actions/checkout@v3

2. Node.js Umgebung aufsetzen

Mit actions/setup-node@v3 wird die benötigte Node.js-Version (hier Version 16) installiert, sodass alle npm-Kommandos in einer kompatiblen Umgebung laufen.

- name: Setup Node.js
  uses: actions/setup-node@v3
  with:
    node-version: '16'

3. Abhängigkeiten installieren

Im nächsten Schritt werden alle npm-Abhängigkeiten installiert, wie sie in der package.json definiert sind:

- name: Install Dependencies
  run: npm install

4. Produktions-Build erstellen

Durch den Befehl npm run build wird ein optimierter Produktions-Build erzeugt. Dieser Build wird üblicherweise in einem Ordner namens build abgelegt.

- name: Build Frontend
  run: npm run build

5. Deployment via FTP

Mit der FTP-Deploy-Action wird der Inhalt des lokalen Build-Ordners per FTP auf deinen Server übertragen.
Hier die wichtigsten Parameter:

local-dir:
Dieser Parameter gibt an, welcher Ordner (bzw. dessen Inhalt) aus deinem Repository übertragen werden soll. Wird hier z. B. build/ angegeben, so wird auf dem Server standardmäßig versucht, in ein Unterverzeichnis build zu wechseln (also /server-dir/build).
Wichtig: Du musst hier den Pfad so wählen, dass er mit dem gewünschten Ziel übereinstimmt. In unserem Beispiel soll der Inhalt des Ordners build direkt in das Zielverzeichnis projekt-frontend/ auf dem Server übertragen werden.
server-dir:
Dies ist das Zielverzeichnis auf dem FTP-Server, in das die Dateien hochgeladen werden.
dangerous-clean-slate:
Mit dieser Option wird der Inhalt des Zielverzeichnisses vor dem Upload gelöscht, was sicherstellt, dass keine veralteten Dateien zurückbleiben.

Hier der relevante Abschnitt des Workflows:

- name: Deploy via FTP
  uses: SamKirkland/FTP-Deploy-Action@4.3.0
  with:
    server: ${{ secrets.FTP_SERVER }}
    username: ${{ secrets.FTP_USERNAME }}
    password: ${{ secrets.FTP_PASSWORD }}
    local-dir: build/  # Lokaler Build-Ordner, hier mit abschließendem /
    server-dir: projekt-frontend/  # Zielpfad auf dem Server
    dangerous-clean-slate: true  # Löscht den Zielordner vor dem Upload

Wichtige Hinweise zu den Pfadangaben

local-dir:
– Mit abschließendem Schrägstrich (build/) interpretiert die Action den Ordnerinhalt als den zu übertragenden Inhalt.
– Ohne Schrägstrich (build) würde die Action versuchen, den gesamten Ordner als Unterordner im Zielverzeichnis anzulegen.
server-dir:
Dieser Pfad muss auf deinem FTP-Server existieren oder vom FTP-User erstellt werden können. In unserem Beispiel wird der Inhalt direkt in das Verzeichnis projekt-frontend/ kopiert.

Zusammenfassung

Der hier vorgestellte Workflow automatisiert folgende Schritte:

Code auschecken: Mit actions/checkout@v3 wird dein Repository geladen.
Node.js einrichten: Mit actions/setup-node@v3 wird die passende Node.js-Version installiert.
Abhängigkeiten installieren und Build erstellen: Durch npm install und npm run build wird der Produktions-Build deines Frontends erzeugt.
Deployment: Die FTP-Deploy-Action lädt den Inhalt des Build-Ordners (genauer: build/) in das Zielverzeichnis (projekt-frontend/) auf deinem FTP-Server hoch, wobei der Zielordner vorab geleert wird.

Dieses Setup ermöglicht ein nahtloses, automatisiertes Deployment deines React-Frontends.

Hier noch einmal der komplette Code für den Workflow.

name: Deploy Frontend

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'  # Passe die Node-Version bei Bedarf an

      - name: Install Dependencies
        run: npm install

      - name: Build Frontend
        run: npm run build

      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build/  # Passe den Pfad an, falls dein Build-Ordner einen anderen Namen hat, immer mit / am Ende
          server-dir: projekt-frontend/ # Zielpfad auf dem Server
          dangerous-clean-slate: true # leert den Zielordner

1manfactory.com - Blog of Jürgen Schulze