Continuous Deployment ist ein wesentlicher Bestandteil der modernen Webentwicklung. Es ermöglicht Entwicklern, Änderungen automatisch aus einem Versionskontrollsystem in eine Live-Umgebung zu übertragen. Dieser Ansatz reduziert manuelle Fehler, beschleunigt den Entwicklungsprozess und stellt sicher, dass deine Website immer auf dem neuesten Stand ist.
Als Kinsta-Nutzer kannst du mit SSH Änderungen direkt auf deinen Server übertragen. Mit GitHub Actions kannst du den gesamten Bereitstellungsprozess automatisieren und Aktualisierungen nahtlos auf deine Live-Site übertragen.
Dieser Artikel zeigt dir, wie du mit GitHub Actions eine kontinuierliche Bereitstellung für deine auf Kinsta gehostete WordPress-Website einrichtest. Wir gehen auf alles ein, von der Einrichtung deiner lokalen Umgebung bis zum Pushen von Änderungen auf GitHub und der automatischen Bereitstellung auf deiner Live-Site.
Voraussetzungen
Bevor du das Continuous Deployment für deine WordPress-Website auf Kinsta einrichten kannst, brauchst du ein paar Dinge:
- Deine WordPress-Website muss bereits auf Kinsta gehostet sein.
- Du musst deine Website lokal ziehen. Du kannst entweder DevKinsta verwenden oder ein Backup herunterladen.
- Ein GitHub-Repository, um den Code deiner Website zu speichern und zu pushen.
- Grundlegende Git-Kenntnisse, wie z.B. das Pushen von Code und die Verwendung einer
.gitignoreDatei.
Lokales Pulling deiner Website und Einrichten von GitHub
Als Kinsta-Nutzer kannst du mit DevKinsta am einfachsten auf die lokalen Dateien deiner WordPress-Website zugreifen. Mit nur wenigen Klicks kannst du deine Website vom Kinsta-Server in DevKinsta ziehen und so lokal an deiner Website arbeiten.
Um dies zu tun:
- Öffne DevKinsta und klicke auf Website hinzufügen.
- Wähle die Option Von Kinsta importieren. Dadurch werden alle Daten deiner Website heruntergeladen, so dass du für die Entwicklung lokal auf sie zugreifen kannst.
Sobald deine Website lokal verfügbar ist, öffne den Ordner der Website in deinem bevorzugten Code-Editor. Bevor du die Dateien auf GitHub hochlädst, füge eine .gitignore Datei in das Stammverzeichnis deines Projekts ein, um zu vermeiden, dass unnötige WordPress-Kerndateien, Uploads oder sensible Informationen hochgeladen werden. Du kannst eine Standardvorlage .gitignore für WordPress verwenden. Kopiere den Inhalt der Vorlage und speichere sie.
Als Nächstes erstellst du ein GitHub-Repository und überträgst die Dateien deiner Website auf GitHub.
GitHub-Geheimnisse für Kinsta einrichten
Um die Bereitstellung von GitHub zu Kinsta zu automatisieren, brauchst du einige wichtige SSH-Daten, darunter deinen Benutzernamen, dein Passwort, den Port und die IP-Adresse. Da diese Daten sensibel sind, solltest du sie als GitHub-Geheimnisse speichern.
Um Geheimnisse in GitHub hinzuzufügen:
- Gehe zu deinem Repository auf GitHub.
- Klicke auf Einstellungen > Geheimnisse und Variablen > Aktionen > Neues Repository-Geheimnis.
- Füge die folgenden Secrets hinzu:
KINSTA_SERVER_IPKINSTA_USERNAMEPASSWORDPORT
Du findest diese Details auf der Info-Seite deiner Seite in deinem MyKinsta-Dashboard.
Nach dieser Einrichtung kannst du nun die automatische Bereitstellung für deine WordPress-Website konfigurieren.
Konfigurieren deines Kinsta-Servers
Bevor du den Bereitstellungs-Prozess mit GitHub Actions automatisieren kannst, musst du deinen Kinsta-Server so konfigurieren, dass er Code von deinem GitHub-Repository empfängt und verteilt.
Dazu sind zwei Schritte nötig: Du musst ein Git-Repository auf deinem Kinsta-Server anlegen und einen post-receive -Hook einrichten, um die neuesten Änderungen automatisch auf deiner Live-Site zu verteilen.
1. Ein Bare Git Repository auf Kinsta erstellen
Ein Bare Git Repository ist ein entferntes Ziel, an das GitHub deinen Code pushen wird. Dieses Repository hat kein Arbeitsverzeichnis – es ist ein zentrales Repository, das deinen Code empfängt und speichert.
Verbinde dich dazu zunächst per SSH mit deinem Kinsta-Server, indem du den SSH-Terminalbefehl in deinem MyKinsta-Dashboard verwendest:
Navigiere dann zu dem privaten Ordner auf deinem Server (oder erstelle ihn, wenn er noch nicht existiert):
mkdir -p /www/your-site/private
cd /www/your-site/privateErsetze hier your-site durch den tatsächlichen Ordnernamen für deine Website, den du im Pfad auf deinem Dashboard findest.
Zum Schluss erstellst du das reine Git-Repository:
git init --bare your-repo.gitFür your-repo kannst du aus Gründen der Konsistenz den Namen deines GitHub-Repositorys verwenden, aber du kannst es nach Belieben benennen.
Dieses Bare Repository wird den von GitHub gepushten Code erhalten.
2. Einrichten des Post-Receive-Hooks
Sobald dein Git-Repository fertig ist, musst du einen post-receive Hook einrichten. Dieses Skript wird den Code automatisch auf deiner Live-Site bereitstellen, sobald neue Änderungen in den main Branch auf GitHub gepusht werden.
Wechsle dazu in das Verzeichnis hooks in deinem Bare-Git-Repository:
cd /www/your-site/private/your-repo.git/hooksErstelle und bearbeite den Hook post-receive:
nano post-receiveAls Nächstes fügst du das folgende Skript in die Datei post-receive ein. Dieses Skript checkt den neuesten Code in das Verzeichnis public deiner Live-Site aus:
#!/bin/bash
TARGET="/www/your-site/public"
GIT_DIR="/www/your-site/private/your-repo.git"
while read oldrev newrev ref
do
BRANCH=$(git rev-parse --symbolic --abbrev-ref $ref)
if [[ $BRANCH == "main" ]];
then
echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f
else
echo "Ref $ref received. Doing nothing: only the main branch may be deployed on this server."
fi
doneDas obige Skript setzt nur den Code aus dem main -Zweig ein. Die Variable TARGET zeigt auf das Verzeichnis, in dem sich die Dateien deiner Live-Site befinden (/www/your-site/public). Die Variable GIT_DIR verweist auf das reine Git-Repository.
Speichere und beende die Datei, indem du Strg + X, dann Y und Enter drückst.
Zum Schluss musst du das Skript ausführbar machen, damit es nach jedem Push automatisch ausgeführt wird:
chmod +x post-receiveJetzt ist der post-receive Hook bereit, um den Code automatisch zu verteilen, wenn Änderungen in den main Branch in deinem GitHub-Repository gepusht werden.
3. Erstelle ein GitHub Personal Access Token (PAT) und füge es hinzu
Da GitHub keine passwortbasierte Authentifizierung mehr unterstützt, musst du dich mit einem PAT authentifizieren, wenn du Code über SSH an GitHub sendest. Mit diesem Token kann GitHub deine Pushes sicher akzeptieren.
So erzeugst du den Token:
- Gehe zu deinem GitHub-Konto, klicke auf dein Profilbild und wähle dann Einstellungen.
- Klicke in der linken Seitenleiste auf Entwicklereinstellungen.
- Klicke auf Persönliche Zugangstoken > Token (klassisch).
- Klicke auf Neues Token generieren und gib ihm einen Namen (z.B. „Kinsta Deployment Token“).
- Aktiviere unter Geltungsbereiche auswählen die Option
repo(für volle Kontrolle über private Repositories). - Klicke auf Token generieren und kopiere das Token. (Du wirst es nicht mehr sehen können.)
Als Nächstes führst du den folgenden Befehl aus, um dein GitHub-Repository als Remote hinzuzufügen, wobei du die Platzhalter durch deine tatsächlichen Angaben ersetzt:
git remote add origin https://your-username:[email protected]/your-username/your-repo.gitErsetze:
your-usernamedurch deinen GitHub-Benutzernamen.YOUR_PERSONAL_ACCESS_TOKENmit dem Token, den du gerade erzeugt hast.your-repodurch den Namen deines GitHub-Repositorys.
Erstellen des GitHub-Aktions-Workflows für die automatische Bereitstellung
Jetzt, wo deine WordPress-Website auf deinem lokalen Rechner liegt, zu GitHub gepusht wurde und du die notwendigen GitHub Secrets eingerichtet hast, ist es an der Zeit, einen GitHub Actions Workflow zu erstellen. Dieser Workflow stellt die Änderungen automatisch auf Kinsta bereit, sobald du einen Push auf den main Branch durchführst.
Um die Bereitstellung zu automatisieren, erstellst du eine YAML-Datei, die festlegt, wie die Bereitstellung erfolgen soll. Hier erfährst du, wie du sie einrichtest:
- Erstelle ein neues Verzeichnis namens
.github/workflowsin deinem GitHub-Repository. - Erstelle in diesem Verzeichnis eine neue Datei namens
deploy.yml. - Füge den folgenden Inhalt in die Datei
deploy.ymlein:
name: Deploy to Kinsta
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Deploy to Kinsta via SSH
uses: appleboy/[email protected]
with:
host: ${{ secrets.KINSTA_SERVER_IP }}
username: ${{ secrets.KINSTA_USERNAME }}
password: ${{ secrets.PASSWORD }}
port: ${{ secrets.PORT }}
script: |
cd /www/your-site/private/your-repo.git # Navigate to the bare Git repository on Kinsta
git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git fetch origin main # Fetch the latest changes from GitHub
git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git reset --hard origin/main # Deploy changes to the live siteEin genauerer Blick auf diesen Arbeitsablauf
Hier ist eine Aufschlüsselung des Arbeitsablaufs:
- Auslöser: Der Workflow wird jedes Mal ausgelöst, wenn Code in den
mainBranch deines GitHub-Repositorys gepusht wird. - Jobs: Der Workflow enthält einen
jobnamensdeploy, der auf einer virtuellen Ubuntu-Maschine (ubuntu-latest) läuft. - Code auschecken: Dieser Schritt nutzt die Aktion
actions/checkout@v2, um den neuesten Code aus deinem GitHub-Repository zu ziehen. - Bereitstellen über SSH:
appleboy/ssh-actionwird verwendet, um eine sichere Verbindung zu deinem Kinsta-Server über SSH mit den von dir konfigurierten Geheimnissen (Server-IP, Benutzername, Passwort und Port) herzustellen. Das Skript in diesem Schritt führt die folgenden Befehle aus:cd /www/your-site/private/your-repo.git: Navigiert zum reinen Git-Repository auf deinem Kinsta-Server.git fetch origin main: Holt die neuesten Änderungen aus dem Zweigmainin deinem GitHub-Repository.git reset --hard origin/main: Wendet diese Änderungen an, indem er die Live-Site in dem Verzeichnispublicaktualisiert, in dem WordPress gehostet wird.
Testen des Workflows
Sobald du den Workflow eingerichtet hast, kannst du ihn testen, indem du eine kleine Änderung in den main Branch deines GitHub-Repositorys einfügst. Jedes Mal, wenn du eine Änderung hochlädst, löst GitHub Actions automatisch die Bereitstellung aus, zieht die neueste Version deines Codes und stellt sie auf deiner Live-Site auf Kinsta bereit.
Du kannst den Status deiner Bereitstellung auf der Registerkarte Actions in deinem GitHub-Repository verfolgen. Wenn der Workflow auf Fehler stößt, siehst du detaillierte Protokolle, die dir bei der Fehlersuche und -behebung helfen.
Zusammenfassung
Indem du mit GitHub Actions ein Continous Deployment für deine WordPress-Website einrichtest, automatisierst du deinen Entwicklungsworkflow und stellst sicher, dass jede Änderung, die du auf GitHub einstellst, automatisch auf deiner Live-Site auf Kinsta bereitgestellt wird.
Außerdem kannst du zusätzliche Arbeitsabläufe in die Pipeline integrieren, z. B. das Testen und Formatieren mit dem Paket @wordpress/scripts.
Was denkst du über diesen Prozess? Gibt es noch etwas, das wir dir erklären sollten, oder sind dir Fehler aufgefallen, während du diesem Leitfaden gefolgt bist? Bitte teile uns deine Fragen oder dein Feedback im Kommentarbereich unten mit!
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar