Der perfekte Automatisierungsablauf für die WordPress-Bereitstellung

Hinweis: Der folgende Artikel hilft Ihnen dabei: Der perfekte Automatisierungsablauf für die WordPress-Bereitstellung

Der perfekte Automatisierungsablauf für die WordPress-Bereitstellung

Irren ist menschlich – dieses uralte Sprichwort stammt vielleicht aus einer Zeit, als die ersten Codezeilen noch geschrieben werden mussten, aber es klingt auch heute noch wahr. Fehler sind unvermeidlich, insbesondere wenn es um Wiederholungen geht. Bei der Bereitstellung von Websites ist der gesamte Prozess von Wiederholungen geprägt.

Wenn Ihre Site komplex genug ist, müssen Sie möglicherweise zunächst eine bestimmte Anzahl von NodeJS- (Skripts installieren, SCSS-zu-CSS-Konvertierung usw.) oder Composer-Aufgaben (Bibliotheken installieren, Tests ausführen usw.) ausführen. Anschließend müssen Sie alle Dateien auf den Server übertragen, den Cache leeren und sicherstellen, dass alles ordnungsgemäß funktioniert.

Auch wenn sie sich wiederholen, sind diese Aufgaben nicht so schwer zu bewältigen – wenn Sie alleine fliegen. Je mehr Leute an einem Projekt arbeiten, desto komplizierter wird es.

Glücklicherweise können Sie es durch die Automatisierung der WordPress-Bereitstellung einfach und fehlersicher gestalten.

In diesem Leitfaden erfahren Sie, wie Sie wiederkehrende Aufgaben automatisieren und Ihren Bereitstellungsprozess zum Kinderspiel machen können Kumpel. Lassen Sie uns diese Show auf den Weg bringen!

Eine einzige Quelle der Wahrheit: Das Git Repo

Bevor Sie mit der Übertragung von Dateien auf einen Server beginnen, überlegen wir uns, was Sie tun können, um sicherzustellen, dass jedes Teammitglied, das an Ihrem Projekt arbeitet, Zugriff auf dieselben Dateien hat – dazu gehören auch alle von anderen vorgenommenen Änderungen. All das können Sie mit Git erreichen. Ohne auf Git selbst näher einzugehen, hier ein paar Dinge, die Ihnen dieses Versionskontrollsystem bietet:

  • Zugriff auf die aktuelle Version der Dateien für alle Mitarbeiter.
  • Detaillierter Änderungsverlauf.
  • Zweige: eine Möglichkeit, Änderungen in isolierten Umgebungen zu bearbeiten.

Wenn Sie anfangen, Git zu verwenden, können Sie sich vom Überschreiben der von anderen Entwicklern vorbereiteten Änderungen verabschieden und die Tage vergessen, in denen Sie herausfinden mussten, wann und wo der fehlerhafte Code geschrieben wurde.

Es gibt viele Möglichkeiten, Git zu verwenden:

  • Verwenden der Befehlszeile.
  • Durch Tools, die in gängige Code-Editoren wie Visual Studio Code integriert sind.
  • Mit speziellen Tools wie Gitkraken oder Git Tower.

Denken wir auch darüber nach, welche Dinge Sie in einem aufbewahren sollten Git-Repository. Dafür gibt es viele Strategien und Ansätze, die sich je nachdem, woran Sie arbeiten, ändern. Um unsere Reise zu beginnen, empfehle ich die Verwendung einer .gitignore-Datei mit folgendem Inhalt:

# Ignorieren Sie alles im Stammverzeichnis außer dem Verzeichnis „wp-content“.

/*

!.gitignore

!wp-content/

# Ignorieren Sie alles im Verzeichnis „wp-content“, mit Ausnahme der Verzeichnisse „mu-plugins“, „plugins“ und „themes“.

wp-content/*

!wp-content/mu-plugins/

!wp-content/plugins/

!wp-content/themes/

Wenn diese Konfiguration vorhanden ist, speichert das Repository nur die Dateien von wp-content/plugins, wp-content/mu-pluginsUnd wp-Inhalt/Themen.

Lesen:  Magento Omnichannel-Lösung und ihre Vorteile für ...

Ich empfehle die Lektüre dieser GitKraken-Artikel um mit Git zu beginnen.

Repository mit Buddy verbinden

Nachdem Sie das Repository eingerichtet haben, verbinden Sie es mit Buddy. Wählen Sie zunächst aus, wo Sie Ihre Dateien hosten möchten. Wählen Sie zwischen GitHub, Bitbucket, GitLab, Buddy Git Hosting und einem privaten Git-Server.

Wenn Sie das Repo verbinden, fordert Buddy Sie dazu auf, Ihre erste Aktion hinzuzufügen und mit der Automatisierung zu beginnen.

Pipelines hinzufügen

Was ist eine Pipeline? Stellen Sie sich das als eine Reihe von Aktionen vor, die in der angegebenen Reihenfolge ausgeführt werden und durch ein Ereignis Ihrer Wahl ausgelöst werden.

Wenn Sie eine neue Pipeline hinzufügen, müssen Sie ihren Namen definieren, den Auslöser auswählen (manuell, Push an das Repo, Wiederholung) und den Zweig auswählen, den die Pipeline verarbeitet.

Klicken Sie auf „Neue Pipeline hinzufügen“, um eine Liste mit Aktionen anzuzeigen.

Erstellen von Assets und Installieren von Bibliotheken

Dank Paketmanagern wie Composer oder npm können Sie sich das Leben erheblich erleichtern, wenn es darum geht, Paketversionen zu verwalten und sicherzustellen, dass alle installierten Bibliotheken oder Pakete miteinander kompatibel sind.

Darüber hinaus können Sie viele Dinge mit Skripten erledigen, die mit Composer oder npm ausgeführt werden:

  • Konvertieren von SCSS in CSS
  • Ausführen von Unit-Tests
  • Code mit Linters oder PHPCS auf Fehler prüfen

Bevor Sie jedoch mit dem Hinzufügen von Aktionen zu Ihrer Pipeline beginnen, empfehle ich Ihnen, die folgenden Artikel zu lesen:

Nachdem Sie nun wissen, wie Sie diese Paketmanager verwenden, beginnen wir mit den Aktionen. Um Composer zu Ihrer Pipeline hinzuzufügen, fügen Sie die PHP-Aktion hinzu und geben Sie diese Zeilen in das Terminal der Aktion ein:

cd wp-content/themes/THEME_NAME

Composer installieren

Als nächstes installieren Sie Bibliotheken und führen npm-Skripte aus. Sie können dies beheben, indem Sie eine NodeJS-Aktion hinzufügen und diese Befehle in das Terminal der Aktion eingeben:

cd wp-content/themes/THEME_NAME

npm installieren

npm run build

Der Befehl „npm run build“ ist nicht universell – Ihre App verwendet möglicherweise einen anderen Befehl, um Builds auszulösen. Überprüfen Sie die Datei package.json, um herauszufinden, welcher Befehl zum Erstellen verwendet wird.

Zu diesem Zeitpunkt sollte Ihre Pipeline folgendermaßen aussehen:

Unit-Tests und Code-Analyse

Die Website ist also bereit für die Bereitstellung – alle Bibliotheken heruntergeladen, alle Assets erstellt. Jetzt geht es nur noch darum, es auf den Server hochzuladen, oder? Wie wäre es, wenn Sie vorher einige Tests durchführen, um zu überprüfen, ob der von Ihnen geschriebene Code so funktioniert, wie er sollte?

Sie können diese Testphase auf verschiedene Arten handhaben:

Entscheiden Sie abhängig von Ihren spezifischen Bedürfnissen, welche Tools und Ansätze für Sie geeignet sind.

Verwenden Sie Composer, um die benötigten Tools zu installieren und neue Befehle zu Composer.json hinzuzufügen, zum Beispiel:

{

“Skripte”: {

„test“: „vendor/bin/phpunit“,

„phpstan“: „vendor/bin/phpstan analysiert Quelltests“

}

}

Nachdem Sie mit den Tools umgegangen sind, fügen Sie Ihrer Pipeline eine PHP-Aktion hinzu und fügen Sie diese Befehle im Terminal der Aktion hinzu:

Lesen:  20 Tricks, um die Registrierung in Windows zu ändern und zu verbessern

Composer installieren

Komponistentest

Komponist phpstan

Jetzt sollte Ihre Pipeline so aussehen:

Bereitstellung in einer Staging-Umgebung

Zu diesem Zeitpunkt haben Sie nicht nur Ihren Code fertig, sondern er wird auch auf Fehler überprüft und getestet. Zeit für die Bereitstellung in der Produktion? Halte deine Pferde, Cowboy!

Lassen Sie uns zunächst die Site in einer Staging-Umgebung bereitstellen. Wenn Sie über einen Hostinger-Server verfügen, ist die Erstellung einer Staging-Umgebung äußerst einfach. Folgen Sie einfach dieser Anleitung und Sie werden im Handumdrehen fertig sein.

Wenn die Umgebung bereit ist, ist es an der Zeit, alle Dateien dorthin zu übertragen. Verwenden Sie dazu die SFTP-Aktion in Buddy. Denken Sie daran, den richtigen Remote-Pfad anzugeben – das Verzeichnis, in das die Dateien hochgeladen werden.

Es ist eine gute Idee, die Registerkarte „Pfade ignorieren“ der Aktion zu verwenden, um die Liste der Dateien und Verzeichnisse anzugeben, die Sie nicht auf den Server hochladen möchten, z. B. „node_modules“.

Sobald alles auf den Staging-Server hochgeladen ist, müssen Sie sicherstellen, dass keine weiteren Aktionen ohne Ihre ausdrückliche Genehmigung ausgeführt werden. Warum? Die Tatsache, dass der Code gründlich getestet wurde, bedeutet nicht automatisch, dass Sie ihn sofort in die Produktion bringen möchten.

Manchmal möchte das QA-Team herumklicken und ein paar Dinge manuell überprüfen. Sie sollten ihnen die Chance dazu geben.

Um dies zu erleichtern, fügen Sie die Aktion „Auf Genehmigung warten“ hinzu, die die Ausführung aller nachgelagerten Schritte stoppt, bis die Person mit den richtigen Berechtigungen sie genehmigt.

Vor diesem Hintergrund sollte Ihre Pipeline jetzt wie folgt aussehen:

Zusätzliche Tests

Ich weiß, dass es verlockend ist, einfach die Ausführung zu genehmigen, sie hinter sich zu bringen und die App in der Produktion bereitzustellen. Aber seien Sie ehrlich – lassen Sie uns noch ein paar Tests durchführen und sicherstellen, dass nichts kaputt ist. Es lohnt sich, glauben Sie mir!

Buddy verfügt über einige Aktionen, mit denen Sie zusätzliche Tests ausführen können. Sie werden erfreut sein zu hören, dass sie nahezu keine zusätzliche Konfiguration erfordern.

Lass uns beginnen mit Visuelle TestsDabei handelt es sich um Regressionstests, mit denen Sie überprüfen können, ob sich das Aussehen der angegebenen Abschnitte nicht in unerwünschter Weise verändert hat. Fügen Sie dazu einfach eine Liste der Seiten hinzu, die wir vergleichen möchten. Wenn Buddy Unterschiede zwischen den Seiten feststellt, müssen Sie grünes Licht geben, um die Aktion als erfolgreich zu markieren.

Als nächstes lohnt es sich zu prüfen, ob unsere Änderungen keine negativen Auswirkungen auf die Google Page Speed-Bewertung haben. Wir möchten die Ladezeit der Seite nicht verlangsamen. Um das zu messen, können Sie das verwenden Leuchtturm Aktion. Sie müssen lediglich die Seite angeben, die Sie testen möchten, und die Schwellenwerte für die Ergebnisse festlegen.

Als letztes sollten Sie überprüfen, ob alle Links auf Ihrer Website tatsächlich funktionieren. Dazu können Sie die verwenden Link-Validator Aktion, die prüft, ob einer der Links auf Ihrer Website die fehlerhaften 4xx- oder 5xx-Statusantworten zurückgibt.

Lesen:  Drucken mit iPhone und iPad (die schnellste Methode)

Ist das alles, was Sie tun können? Natürlich nicht! Allerdings werde ich nicht ALLES beschreiben. Wir haben die universellsten und nützlichsten Fälle behandelt, aber Sie können sich auch gerne über einige weitere interessante Aktionen informieren Hier.

So sollte Ihre Pipeline nach dem Hinzufügen aller zusätzlichen Tests aussehen:

Bereitstellung in der Produktion

Okay, jetzt ist es Zeit für die Bereitstellung in der Produktion. Endlich!

Der erste Schritt: Aktivieren Sie den Wartungsmodus mit WP-CLI. Um dies zu erreichen, fügen Sie eine SSH-Aktion hinzu, konfigurieren Sie die Serverzugriffsdetails und fügen Sie diese Befehle im Terminal der Aktion hinzu:

cd public_html

wp-Wartungsmodus aktivieren

Dadurch erhält der Benutzer beim Hochladen von Dateien auf den Server eine entsprechende Ausfallmeldung.

Als nächstes fügen Sie die SFTP-Aktion hinzu, die alle Dateien auf den Server überträgt. Die Konfiguration der Aktion wird derjenigen sehr ähnlich sein, die wir zum Übertragen von Dateien auf den Staging-Server verwendet haben:

Fügen Sie dann eine weitere SSH-Aktion hinzu, die den Wartungsmodus deaktiviert. Fügen Sie diese Befehle zum Terminal der Aktion hinzu:

cd public_html

wp-Wartungsmodus deaktivieren

Nachdem alle diese Schritte erledigt sind, ist es eine gute Idee, alle relevanten Personen über Slack, Telegram oder andere Kommunikationsmedien zu benachrichtigen. Erfahren Sie mehr über alle verfügbaren Integrationen Hier.

Hören Sie nicht damit auf, Benachrichtigungen zu versenden, wenn alles nach Plan läuft. Es ist eine gute Idee, zu kommunizieren, wenn etwas schief geht, damit Ihr Team eingreifen und die Fehler so schnell wie möglich beheben kann.

So sieht die endgültige Pipeline aus, wenn Sie Slack für Benachrichtigungen verwenden:

Jetzt kennen Sie die WordPress-Bereitstellungsautomatisierung

Dank der WordPress-Bereitstellungsautomatisierung und -Tests wird Ihnen die Bereitstellung in der Produktion keine Albträume mehr bereiten.

Auch wenn die Implementierung des vorgestellten Ablaufs eine Weile dauern kann, sagt niemand, dass Sie diese Schritte nicht schrittweise hinzufügen können.

Sie können ganz einfach damit beginnen, Ihre Assets aufzubauen und bereitzustellen. Dann lohnt es sich, etwas Zeit damit zu verbringen, dem Mix Tests hinzuzufügen – beginnen Sie mit denen, die nicht allzu viel Konfiguration erfordern, wie PHPPCS oder PHPStan. Alternativ können Sie die von Buddy angebotenen Testaktionen nutzen – visuelle Tests, Lighthouse usw.

Wenn Sie bereit sind, holen Sie die großen Geschütze heraus und fügen Sie die Tests hinzu, die Sie selbst vorbereiten müssen, wie z. B. PHP Unit oder Cypress.io.