Automatisiertes Deployment einer Next.js-App mit GitHub Actions und Workflows

Automatisiertes Deployment ist eine der wichtigsten Funktionen moderner Softwareentwicklung. Es spart nicht nur Zeit, sondern erhöht auch die Zuverlässigkeit des gesamten Entwicklungs- und Deployment-Prozesses. Mit einem automatisierten Workflow, wie dem, den wir mit GitHub Actions erstellen, entfällt das manuelle Hochladen von Dateien oder das Ausführen von Skripten auf einem Server. Du kannst sicher sein, dass deine Applikation nach jedem Commit konsistent auf dem Server bereitgestellt wird.

Wenn du regelmäßig Codeänderungen in deinem Projekt machst, wirst du feststellen, dass das manuelle Deployment zeitaufwändig und fehleranfällig sein kann. Ein automatischer Deployment-Prozess hilft dir, diese Aufgaben zu automatisieren und sorgt dafür, dass deine App immer auf dem neuesten Stand ist, ohne dass du dich selbst darum kümmern musst.

In diesem Blogpost erkläre ich dir Schritt für Schritt, wie du eine Next.js-App mithilfe von GitHub Actions automatisch auf einem Server deployen kannst. Außerdem lernst du, wie du SSH-Schlüssel erstellst und in GitHub Secrets integrierst, um eine sichere Verbindung zwischen GitHub und deinem Server herzustellen.

SSH-Schlüssel erstellen und einrichten

Bevor du deinen Deployment-Workflow einrichtest, musst du einen SSH-Schlüssel auf deinem lokalen Computer erstellen und sowohl auf dem Server als auch in GitHub hinterlegen. Dies ist notwendig, um eine sichere Verbindung zwischen GitHub und deinem Server herzustellen.

SSH-Schlüssel generieren Zuerst musst du einen SSH-Schlüssel auf deinem lokalen Rechner erstellen. Öffne dazu dein Terminal und verwende den folgenden Befehl, um ein neues RSA-Schlüsselpaar mit 4096 Bit zu erstellen:

cd ~/.ssh
ssh-keygen -t my_autodeploy -b 4096 -C "your-email@example.com"

Der Parameter -C dient dazu, einen Kommentar hinzuzufügen (in der Regel deine E-Mail-Adresse). Du wirst nach einem Speicherort für den Schlüssel gefragt. Drücke einfach Enter, um den Standardpfad (~/.ssh/my_autodeploy) zu verwenden. Optional kannst du eine Passphrase hinzufügen, um den Schlüssel weiter abzusichern. 2. Öffentlichen Schlüssel kopieren Sobald der Schlüssel generiert ist, musst du den öffentlichen Schlüssel (der für den Server bestimmt ist) kopieren. Verwende diesen Befehl, um den öffentlichen Schlüssel anzuzeigen:

cat ~/.ssh/my_autodeploy.pub

Kopiere den angezeigten Schlüssel in deine Zwischenablage.

Öffentlichen Schlüssel auf den Server hinzufügen Der nächste Schritt ist das Hinzufügen des öffentlichen Schlüssels auf deinem Server, um die SSH-Verbindung zu erlauben. Melde dich per SSH auf deinem Server an:

ssh root@ip_adress

Navigiere in das .ssh-Verzeichnis des Root-Benutzers:

cd /root/.ssh

Öffne die Datei authorized_keys (falls sie nicht existiert, erstelle sie):

nano authorized_keys

Füge den öffentlichen Schlüssel, den du im vorherigen Schritt kopiert hast, in diese Datei ein. Drücke Ctrl + O, um die Änderungen zu speichern, und Ctrl + X, um den Editor zu schließen.

Privaten Schlüssel in GitHub als Secret einfügen Damit GitHub über den Workflow sicher auf deinen Server zugreifen kann, musst du den privaten Schlüssel (my_autodeploy) als GitHub Secret hinzufügen. Zeige den privaten Schlüssel an, indem du diesen Befehl ausführst:

cat ~/.ssh/my_autodeploy

Kopiere den gesamten Inhalt des privaten Schlüssels und füge ihn in GitHub als Secret ein:

Gehe zu deinem GitHub-Repository. Klicke auf Settings. Gehe zu Secrets and variables und wähle Actions. Füge ein neues Secret mit dem Namen SSH_PRIVATE_KEY hinzu und füge den kopierten privaten Schlüssel ein. Jetzt ist dein GitHub-Repository bereit, den SSH-Schlüssel für sichere Verbindungen zu nutzen.

GitHub Workflow für automatisiertes Deployment erstellen

Nachdem du SSH-Schlüssel eingerichtet hast, können wir den Deployment-Workflow mit GitHub Actions erstellen. Dieser Workflow wird immer dann ausgeführt, wenn du Änderungen auf den main-Branch (oder einen anderen definierten Branch) pusht.

Erstellen des Workflows

Erstelle eine Datei namens deploy.yml im Ordner .github/workflows deines Projekts und füge den folgenden Code hinzu:

name: Deploy Next.js App
 
on:
  push:
    branches:
      - main # Ändere dies zu deinem spezifischen Branch
      # - develop  # Zusätzlicher Branch für Entwicklung
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
 
      - name: Check Node.js version
        run: node -v
 
      - name: Set up SSH
        uses: webfactory/ssh-agent@v0.5.1
        with:
          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
 
      - name: Deploy to Hostinger VPS
        env:
          HOST: ip_adress
          USERNAME: root
          TARGET_DIR: /var/www/maxschneidercodes-de
          APP_NAME: maxschneidercodes-de
          PORT: 3005
        run: |
          ssh -o StrictHostKeyChecking=no $USERNAME@$HOST << EOF
            export PATH=/usr/local/bin:$PATH
            cd $TARGET_DIR
            git pull origin ${GITHUB_REF#refs/heads/}
            npm install
            npm run build
            if pm2 list | grep -q $APP_NAME; then
              echo "Restarting application: $APP_NAME"
              pm2 restart $APP_NAME
            else
              echo "Starting application: $APP_NAME"
              pm2 start npm --name $APP_NAME -- start -- --port=$PORT
            fi
            pm2 save
          EOF

Dieser Abschnitt bestimmt, dass der Workflow jedes Mal ausgeführt wird, wenn Änderungen auf den main-Branch gepusht werden. Du kannst zusätzliche Branches hinzufügen, falls du verschiedene Umgebungen (z.B. develop, staging) verwenden möchtest.

Testen des Workflows

Sobald der Workflow und die SSH-Schlüssel korrekt eingerichtet sind, kannst du den Workflow testen, indem du eine Änderung auf den definierten Branch (z.B. main) pusht. GitHub Actions wird den Workflow automatisch starten und deine App auf dem Server aktualisieren.

Fazit

Das automatische Deployment einer Next.js-App mit GitHub Actions ist eine leistungsstarke Methode, um deine Entwicklungs- und Bereitstellungsprozesse zu optimieren. Durch die Automatisierung sparst du nicht nur Zeit, sondern vermeidest auch Fehler, die bei manuellen Deployments auftreten können. Mithilfe von SSH-Schlüsseln und GitHub-Secrets sorgst du für eine sichere Verbindung und stellst sicher, dass dein Code bei jedem Push schnell und zuverlässig bereitgestellt wird.