Im Dev House: Wie wir mit der automatischen Theme-Bereitstellung für LITE- und PRO-WordPress-Themes umgehen

Wie Sie sich vorstellen können, ist die Themenentwicklung etwas, was wir hier im Unternehmen ziemlich oft tun. Mit ungefähr 4-5 neuen Themenprojekten in Arbeit zu jedem Zeitpunkt und 80 Themen in unser Verzeichnis Insgesamt (was auch eine aktive Wartung und Weiterentwicklung dieser bedeutet) haben wir alle Hände voll zu tun.


In einer solchen Umgebung ist eine Optimierung und sogar Automatisierung, wann immer möglich, der Schlüssel.

Deshalb möchten wir Sie heute durch unsere Entwicklertür einladen ThemeIsle, sozusagen und zeigen Ihnen zwei spezifische Teile unseres Themenentwicklungspuzzles.

Ich werde nicht verbergen, dass diese Art von Post ein Experiment ist. Wenn es Ihnen gefällt, werden wir in Zukunft weitere solche Produkte herausbringen.

Insbesondere das heutige Thema kann genannt werden, "Automatische Bereitstellung und visuelle Regressionsarchitektur für die Entwicklung von WordPress-Designs."

Warten Sie, was ist die automatische Theme-Bereitstellung?

Wenn Sie keinen Entwickler sprechen, bedeutet dies auf Englisch, dass Sie Themen für WordPress entwickeln, auf einem Server bereitstellen und dann die Unterschiede visuell mit einer vordefinierten Grundlinie vergleichen können, ohne manuell etwas tun zu müssen.

Alles geschieht automatisch oder besser gesagt, "automatisch."

Wie funktioniert das?

Wir haben zwei Dienste entwickelt, um diese automatische Themenbereitstellung zu gewährleisten: "Piraten-Bootstrap" und "Piratengeist."

Der erste, Pirate Bootstrap, kann über aktiviert werden Webhooks von GitHub.

Bei Pull Request wird eine neue WordPress-Instanz unter Verwendung eines bestimmten Themas aus einem festgelegten Repository + aller Pakete und Datenbankeinstellungen bereitgestellt, die aus der Standarddemo des Themas auf ThemeIsle stammen.

Letzterer, Pirate Wraith, führt einen visuellen Regressionstest durch (auch bekannt als Vergleich von Bildern aus zwei Quellen). Der Test vergleicht die neue Bereitstellung des Themas mit der Demo von ThemeIsle – visuell – und generiert dann einen Bericht. Anhand dieses Berichts können Sie schnell feststellen, ob sich die letzten Änderungen auf das Erscheinungsbild des Themas ausgewirkt haben.

Mit anderen Worten, wenn Sie an einem Thema arbeiten und sicherstellen möchten, dass Ihre neuesten Codeänderungen das Design des Themas nicht durcheinander bringen, können Sie Pirate Wraith verwenden, um die Aufgabe im Autopiloten zu erledigen.

Lassen Sie uns jeden Service genauer erklären:

Pirate Bootstrap – Stellt eine neue Instanz von WordPress unter Verwendung eines festgelegten Themas bereit

Pirate Bootstrap wird auf forks.themeisle.com gehostet

Pirate Bootstrap ist darauf aufgebaut WP-CLI und verfügt über Methoden zum Generieren vollständiger WordPress-Bereitstellungen basierend auf ThemeIsle-Themenpaketen und Abhängigkeiten.

Die Elemente:

GitHub Webhooks

Webhooks werden verwendet, um die API des Pirate Bootstrap bei (geöffneten oder synchronisierten) Pull-Anforderungen aufzurufen, indem eine JSON-Nutzlast an http://forks.themeisle.com gesendet wird

Dies startet den Bereitstellungsworkflow auf forks.themeisle.com. Wie so:

Automatische Theme-Bereitstellung für LITE- und PRO-WordPress-Themes

Beispiel für eine Nutzlast einer GitHub Pull Request:

{
"Aktion":: "geöffnet",
"Nummer": 1,
"pull_request": {

"Kopf": {
"Etikette":: "preda-bogdan: produktion",
"ref":: "Produktion",
"sha":: "****",

"Repo": {
"Ich würde": 82166596,
"Name":: "Null-Lite",
"vollständiger Name":: "preda-bogdan / zerif-lite",
"Inhaber": {
"Anmeldung":: "preda-bogdan",

}},
"Privat": falsch,

"git_url":: "git: //github.com/preda-bogdan/zerif-lite.git",
"ssh_url":: "[email protected]: preda-bogdan / zerif-lite.git",
"clone_url":: "https://github.com/preda-bogdan/zerif-lite.git",
"svn_url":: "https://github.com/preda-bogdan/zerif-lite",

}}
}},

}}
}}

  • Wir nehmen das "sha" Schlüssel, um zu überprüfen, ob es sich um eine gültige Anforderung handelt und ob wir die Nutzdaten verarbeiten dürfen.
  • Wir gebrauchen "Anmeldung", "Name" und "ref" um einen Mandanten zu generieren, falls dieser nicht vorhanden ist.

Die Dateistruktur

Die Dateistruktur auf dem Server ist so eingestellt, dass wir jeden Mandanten in einem eigenen öffentlichen Ordner speichern und eine Kerninstallation von WordPress haben, auf die wir mit einem Symlink für jeden Mandanten verweisen.

Die Struktur der Mandantendatei lautet wie folgt:

Mieter/
| _ wp / / ** Symlink Core-Installation von WordPress
| _ Inhalt / / ** Mandanteninhaltsordner für WordPress
| | _ Themes / / ** Tenant Theme Ordner für WordPress
| | _ plugins / / ** Tenant Plugins Ordner für WordPress
| _ .htaccess / ** automatisch generierter .htaccess für Mandanten
| _ vhost.conf / ** Alias-Konfigurationsdatei für Apache
| _ wp-config.php / ** automatisch generierte Konfigurationsdatei für den Mandanten

Der Ordner wp / verweist auf die Kerninstallation von WordPress, die von allen Mandanten gemeinsam genutzt wird. Auf diese Weise können wir eine einzige Installation von WordPress und mehrere isolierte Instanzen von WordPress-Sites mit jeweils gekapselten Einstellungen, Dateien und Ressourcen durchführen.

Die Kern- und Mandantendateien wp-config.php

Core WordPress wp-config.php Beispiel:

/ ** Absoluter Pfad zum WordPress-Verzeichnis. * /
require_once ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Richtet WordPress-Vars und enthaltene Dateien ein. * /
require_once (ABSPATH. ‘wp-settings.php’);

Beispiel für den Mandanten wp-config.php:

(Werte in doppelten geschweiften Klammern werden bei der Mandantenerstellung automatisch ersetzt.)

/ ** HINZUGEFÜGT VON BOOTSTRAP API * /
{{MYSQL_CONNECTION_TENANT_DATA}}

define (‘AUTH_KEY’, ‘{{AUTH_KEY}}’);
define (‘SECURE_AUTH_KEY’, ‘{{SECURE_AUTH_KEY}}’);
define (‘LOGGED_IN_KEY’, ‘{{LOGGED_IN_KEY}}’);
define (‘NONCE_KEY’, ‘{{NONCE_KEY}}’);
define (‘AUTH_SALT’, ‘{{AUTH_SALT}}’);
define (‘SECURE_AUTH_SALT’, ‘{{SECURE_AUTH_SALT}}’);
define (‘LOGGED_IN_SALT’, ‘{{LOGGED_IN_SALT}}’);
define (‘NONCE_SALT’, ‘{{NONCE_SALT}}’);

define (‘WP_DEBUG’, false);

define (‘WP_CONTENT_DIR’, ‘{{Tenant_folder}} / content’);
define (‘WP_CONTENT_URL’, ‘{{Tenant_folder}} / content’);
define (‘WP_PLUGIN_DIR’, ‘{{tenant_folder}} / content / plugins’);
define (‘WP_PLUGIN_URL’, ‘{{tenant_url}} / content / plugins’);

if (! defined (‘ABSPATH’))
define (‘ABSPATH’, dirname (__ FILE__). ‘/ wp’);

Nach der Erstellung des Mandanten fragen wir einen Endpunkt ab, um die für die Themenbereitstellung erforderlichen Pakete abzurufen (Plugins, untergeordnete Themen, Datenbank). Die Pakete werden zwischengespeichert / in einem Stash-Ordner auf dem Server gespeichert und alle sechs Stunden aktualisiert.

Der nächste Schritt besteht darin, zu überprüfen, ob das Thema, das wir bereitstellen möchten, eine einzelne Bereitstellung ist oder zusätzliche Themen aus dem Basisthema generieren muss.

  • Wenn es sich um eine einzelne Bereitstellung handelt, führen wir einfach einen Git-Pull mit aus "ssh_url" in Mieter / Inhalt / Themen /.
  • Falls es sich nicht um eine einzelne Bereitstellung handelt, führen wir einen Git-Pull in tmp / durch, führen grunt generate aus und kopieren die resultierenden Ordner in tenant / content / theme /.

Die Aufgabe zum Generieren von Grunzen ist für uns ein Standard, wenn wir mit Themen arbeiten, die mehrere Versionen haben (normalerweise) "lite" und "Profi") unter Verwendung derselben Codebasis (Repository). Wenn wir beispielsweise grunt generate für das hestia-pro-Repository ausführen, erhalten wir auch automatisch die Lite-Version.

Nachdem wir die oben genannten Schritte ausgeführt haben, verwenden wir WP-CLI, um alle erforderlichen Pakete (Plugins und / oder untergeordnete Designs) zu installieren und den Datenbankspeicherauszug von demo.themeisle.com zu importieren.

Die letzten Schritte sind das Löschen der .htaccess-Umschreiberegeln und das Aktualisieren "Seiten-URL" und "Zuhause" Aktualisieren Sie mit der Mandanten-URL und der URL für WordPress Core die Links für Menüelemente und Beiträge und laden Sie schließlich Apache neu.

Anschließend senden wir dem Benutzer eine E-Mail mit seiner gegabelten URL für die Pull-Anforderung und das während der Bereitstellung generierte Protokoll. (Jeder generierte Mandant folgt diesem allgemeinen URL-Modell: http://forks.themeisle.com/github-login/theme-slug/branch/)

Pirate Bootstrap – Tipps & Tricks und andere nützliche Informationen

Wenn Sie zu forks.themeisle.com gehen, können Sie auf eine terminalähnliche Oberfläche zugreifen, indem Sie auf drücken "~" (Tilde-Taste) und führen Sie dann eine Reihe nützlicher Befehle aus. Die relevantesten sind:

Zurücksetzen einer Mandantenbereitstellung

Der Befehl lautet pirate reset tenant [tenant] (* theme-slug) |

Beispiel:

Pirat Reset Mieter Preda-Bogdan / Zerif-Lite / Entwicklung |  

Oder:

Pirat Reset Mieter Preda-Bogdan / Hestia / Entwicklung Hestia-Pro |

Der Befehl zum Zurücksetzen setzt den Mandanten auf seinen ursprünglichen Bereitstellungsstatus zurück (Datenbank zurücksetzen, Plugins neu installieren und / oder untergeordnete Themen)..

Anzeigen der Protokolle

Der Befehl lautet show logs. Dieser Befehl ist nützlich, wenn Sie die Protokolldateien nach einer Bereitstellung überprüfen müssen und noch keine E-Mail erhalten haben oder debuggen müssen.

Hinweis: Die Protokolldatei wird gedreht, wenn die Dateigröße größer als 9000 Byte wird. Wenn Sie also nicht finden, wonach Sie suchen, müssen Sie möglicherweise das Protokollarchiv direkt auf dem Server überprüfen.

Pirate Wraith – vergleicht zwei Versionen eines Themas visuell

Pirate Wraith wird unter wraith.themeisle.com gehostet

Pirate Wraith ist darauf aufgebaut Gespenst und verfügt über Endpunkte für die Interaktion mit Slack-, Travis- und AJAX-Anforderungen, um die Wraith-Funktionen zu nutzen und visuelle Regressionstests und -berichte zu generieren.

Travis

Pirate Wraith macht auf wraith.themeisle.com einen Endpunkt verfügbar, der auf Anforderungen von einem Travis-Build wartet, und "schlägt fehl" oder "geht vorbei" der Build gemäß den Ergebnissen des Visual Regressionstests.

In der Datei .travis.yml haben wir eine neue Matrix hinzugefügt, die einen neuen Build zusätzlich zu den vorhandenen definiert. Dadurch werden Berechtigungen zum Ausführen eines Bash-Skripts im Projekt festgelegt und anschließend ausgeführt.

Die Travis YML-Datei:

Matrix:
umfassen:
– PHP: "7.0"
before_install: chmod + x wraith.sh
Installieren:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
Skript: ./wraith.sh

Sie können sehen, dass "Installieren" und "before_script" sind leer gelassen. Dies ist absichtlich so, dass der Build keine Aktionen von zuvor definierten Builds erbt. Wir sind nur daran interessiert, das Bash-Skript (Skript: ./wraith.sh) für diesen Build auszuführen.

Auch zu beachten; Wir setzen eine Umgebungsvariable namens WRAITH_FAIL. Dieser Wert wird verwendet, um Pirate Wraith mitzuteilen, wie hoch die maximal zulässige Perzentildifferenz für das Bestehen eines Tests ist.

Das Bash-Skript:

#! / bin / bash
WRAITH_SLUG = $ (Knoten -pe "require (‘./ package.json’). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
Körper ="{
‘Anfrage’: {
‘travis_event_type’: ‘$ TRAVIS_EVENT_TYPE’,
‘travis_pull_request’: ‘$ TRAVIS_PULL_REQUEST’,
‘travis_repo_slug’: ‘$ TRAVIS_PULL_REQUEST_SLUG’,
‘travis_branch’: ‘$ TRAVIS_PULL_REQUEST_BRANCH’,
‘wraithSlug’: $ WRAITH_SLUG,
‘wraithFail’: $ WRAITH_FAIL,
}}
}}"
Echo "Auslösen des Builds des Zweigs $ TRAVIS_PULL_REQUEST_SLUG
$ TRAVIS_PULL_REQUEST_BRANCH ‘auf Travis."
Ausgabe = $ (Curl -sw "% {http_code}" -X POST \
-H. "Inhaltstyp: application / json" \.
-H. "Akzeptieren: application / json" \.
-H. "Travis-API-Version: 3" \.
-d "$ {body // \ ‘/ \"}}" \.
‘http://wraith.themeisle.com’)
http_code ="$ {output: $ {# output} -3}"
if [$ {# output} -eq 3]; dann
Körper =""
sonst
Körper ="$ {output: 0: $ {# output} -3}"
fi

if [$ http_code! = 200]; dann
Echo "$ output";;
Ausfahrt 1
sonst
Echo "$ output";;
Ausfahrt 0
fi

Kurz gesagt, dieses Skript erstellt eine JSON-Nutzlast, die Standard-Travis-Umgebungsvariablen und benutzerdefinierte Variablen enthält. Außerdem liest es packages.json und erhält den Theme Slug.

Der zweite Teil des Skripts führt eine POST-Anforderung über aus "locken" an Pirate Wraith und analysiert die Antwort, um den HTTP / 1.1-Statuscode der Antwort abzurufen.

Wir verwenden den Statuscode um "Scheitern" oder "bestehen" der Build. Die Pirate Wraith-API gibt für jede verarbeitete Anforderung gültige HTTP / 1.1-Codes zurück.

  • Es wird der Code 200 für vollständige, bestandene Tests zurückgegeben.
  • Für alles andere wird der Build mit einem Exit-Code von 1 (Exit 1) fehlgeschlagen.

Sie fragen sich vielleicht, was Wraith vergleicht. Die Antwort ist einfach; Es vergleicht die Mandantenbereitstellung der aktuellen Pull-Anforderung von Pirate Bootstrap mit der Demo des Zielthemas.

Zum besseren Verständnis des Lebenszyklus von GitHub – Travis – Pirate Bootstrap – Pirate Wraith ist hier ein Diagramm dargestellt, das den Workflow dieser Dienste veranschaulicht:

Pirate Bootstrap / Pirate Wraith Workflow

Wie du siehst, GitHub benachrichtigt beide Piraten-Bootstrap und Travis über eine neue Pull-Anfrage. Bootstrap beginnt mit der Bereitstellung eines Mandanten, fragt Travis Piratengeist um die Tests zu starten.

Piratengeist vergleicht die Tenant-Version der Demo mit der ThemeIsle Demo und gibt die Ergebnisse an zurück Travis, damit es geht bestehen oder Scheitern der Build.

Locker

Zusätzlich zur Travis-Unterstützung verfügt Pirate Wraith über einen Endpunkt für die Integration in Slack.

Nachdem ein Build von Travis abgeschlossen wurde (bestanden oder nicht bestanden), wird im #eyepatch-Kanal ein Bericht erstellt, der einen Link zur generierten Galerie und eine Zusammenfassung der gefundenen Unterschiede enthält.

Außerdem sind einige nützliche Slack-Befehle integriert, die Sie in jedem Kanal verwenden können (Hinweis: Die Pirate Wraith-API antwortet in diesem Kanal mit einer öffentlichen Antwort, daher empfehlen wir, die Befehle im Selbstchat zu verwenden). Hier sind die Befehle für Slack:

Zurücksetzen der Verlaufsaufnahmen eines Themas

/ wraith-history [themenschnecke]

Beispiel:

/ wraith-history zerif-lite |

Vergleich mit den Verlaufsaufnahmen eines Themas

/ wraith-latest [theme-slug] [url]

Beispiel:

/ wraith-latest zerif-lite http: //forks.url/pb/zerif-lite |

Dieser Befehl verwendet den bereitgestellten Slug, um die angegebene URL mit dem Verlauf dieses Slugs zu vergleichen.

Zwei URLs vergleichen

/ wraith-compare [url] vs [url]

Beispiel:

/ wraith-compare http://url.one vs http: //url.two 

Piratengeist – Tipps & Tricks und andere nützliche Informationen

Zurücksetzen der Verlaufsaufnahmen eines Themas

Geist zurücksetzen Geschichte [Thema-Schnecke]

Dieser Befehl setzt den Verlauf für den angegebenen Slug zurück.

Vergleich mit den Verlaufsaufnahmen eines Themas

Wraith Check neuesten [Theme-Slug] [URL]

Dieser Befehl verwendet den bereitgestellten Slug, um die angegebene URL mit dem Verlauf dieses Slugs zu vergleichen.

Zwei URLs vergleichen

Geist vergleichen URLs [URL-eins] [URL-zwei]

Anzeigen der Protokolle

Der Befehl lautet show logs. Dieser Befehl ist nützlich, wenn Sie die Protokolldateien überprüfen müssen. Es funktioniert genauso wie in Pirate Bootstrap.

Deine Einstellung?

Dies fasst unsere beiden neuen Dienste ziemlich gut zusammen und wie sie zur Automatisierung der Bereitstellung von WordPress-Designs verwendet werden können.

Wir haben sowohl Pirate Bootstrap als auch Pirate Wraith entwickelt, um unseren eigenen Anforderungen gerecht zu werden. Wir sind jedoch der Ansicht, dass diese Konzepte auch für jeden nützlich sein können, der an ähnlichen Entwicklungsprojekten arbeitet. Insbesondere, wenn Sie abgeleitete Produkte erstellen (wie in unserem Fall Pro- und Lite-WordPress-Themes) und prüfen möchten, welche Auswirkungen bestimmte Codeänderungen auf deren Erscheinungsbild haben.

Die Sache mit WordPress-Themes ist, dass die Codebasen der meisten modernen Themes ziemlich schnell wachsen und einige spezifische Elemente dieser Codebasen einen unvorhersehbaren Einfluss auf das Erscheinungsbild anderer Elemente des Themas haben können. Der Versuch, all das manuell zu erfassen – nur indem Sie die Dinge mit Ihren eigenen menschlichen Augen betrachten – kann eine echte Herausforderung sein. Daher ist es immer eine große Hilfe, eine Art Algorithmus / Automatisierung in den Mix einzuführen.

Aber was denkst du? Sehen Sie den Wert solcher Tools auch für andere Projekte??

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map