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.pubKopiere 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_adressNavigiere 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_autodeployKopiere 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
EOFDieser 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.
