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:
1cd ~/.ssh 2ssh-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:
1cat ~/.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:
1ssh root@ip_adress
Navigiere in das .ssh-Verzeichnis des Root-Benutzers:
1cd /root/.ssh
Öffne die Datei authorized_keys (falls sie nicht existiert, erstelle sie):
1nano 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:
1cat ~/.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:
1name: Deploy Next.js App 2 3on: 4 push: 5 branches: 6 - main # Ändere dies zu deinem spezifischen Branch 7 # - develop # Zusätzlicher Branch für Entwicklung 8 9jobs: 10 deploy: 11 runs-on: ubuntu-latest 12 steps: 13 - name: Checkout repository 14 uses: actions/checkout@v4 15 16 - name: Setup Node.js 17 uses: actions/setup-node@v4 18 with: 19 node-version: "20" 20 21 - name: Check Node.js version 22 run: node -v 23 24 - name: Set up SSH 25 uses: webfactory/ssh-agent@v0.5.1 26 with: 27 ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} 28 29 - name: Deploy to Hostinger VPS 30 env: 31 HOST: ip_adress 32 USERNAME: root 33 TARGET_DIR: /var/www/maxschneidercodes-de 34 APP_NAME: maxschneidercodes-de 35 PORT: 3005 36 run: | 37 ssh -o StrictHostKeyChecking=no $USERNAME@$HOST << EOF 38 export PATH=/usr/local/bin:$PATH 39 cd $TARGET_DIR 40 git pull origin ${GITHUB_REF#refs/heads/} 41 npm install 42 npm run build 43 if pm2 list | grep -q $APP_NAME; then 44 echo "Restarting application: $APP_NAME" 45 pm2 restart $APP_NAME 46 else 47 echo "Starting application: $APP_NAME" 48 pm2 start npm --name $APP_NAME -- start -- --port=$PORT 49 fi 50 pm2 save 51 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.