Dins del Dev House: Com gestionem el desplegament automàtic de temes de WordPress de LITE i PRO

Com podríeu imaginar, el desenvolupament de temes és una cosa que fem aquí a la companyia. Amb aproximadament 4-5 nous projectes temàtics a les obres en un moment donat i 80 temes en el nostre directori en total (el que significa manteniment actiu i desenvolupament també d’aquestes), tenim les mans més aviat plenes.


En un entorn com aquest, sempre és possible una certa optimització i fins i tot automatització.

Per tant, avui volem convidar-vos a través de la porta de casa nostra TemaIsle, Per dir-ho així, us mostrarem dues peces concretes del nostre trencaclosques de desenvolupament de temes.

No amagaré que aquest tipus de publicacions siguin un experiment. Si t’agrada, ens assegurem que en el futur puguem treure més coses com aquesta.

Concretament, el tema d’avui és quelcom que es pot anomenar, "desplegament automàtic i arquitectura de regressió visual per al desenvolupament de temes de WordPress."

Espereu, què és el desplegament automàtic de temes?

Si no parleu de desenvolupador, el que vol dir en anglès és que podeu desenvolupar temes per a WordPress, tenir-los desplegats a un servidor i comparar visualment les diferències amb una línia de referència predefinida sense haver de fer res manualment..

Tot passa automàticament, o millor dit, "automàticament."

Com funciona?

Hem desenvolupat dos serveis per cuidar aquest desplegament automàtic de temes: "Pirata Bootstrap" i "Pirata Wraith."

El primer, Pirate Bootstrap, es pot activar mitjançant Llocs web de GitHub.

A Pull Request, desplega una nova instància de WordPress, utilitzant un tema donat d’un repositori de conjunt + tots els paquets i la configuració de la base de dades presos a la demostració predeterminada del tema a ThemeIsle.

Aquest últim, Pirate Wraith, fa un Test de Regressió Visual (també conegut per comparar imatges de dues fonts). El test comprova el nou desplegament del tema amb la demostració de ThemeIsle (visualment) i després genera un informe. A partir d’aquest informe, podeu veure ràpidament si els canvis recents van tenir algun impacte en l’aparença del tema.

Dit d’una altra manera, sempre que treballeu un tema i vulgueu assegurar-vos que els vostres últims canvis de codi no han desordenat el disseny del tema, podeu fer servir Pirata Wraith per gestionar la tasca del pilot automàtic..

Expliquem cada servei amb més detall:

Pirate Bootstrap: desplega una nova instància de WordPress mitjançant un tema definit

Pirate Bootstrap està allotjat a forks.themeisle.com

El pirata Bootstrap està construït al damunt WP-CLI i té mètodes per generar desplegaments complets de WordPress basat en paquets de temes i dependències de ThemeIsle.

Els elements:

Webhooks de GitHub

Els lligams web s’utilitzen per cridar l’API del pirata Bootstrap a (obrir o sincronitzar) Tull Requests enviant una càrrega útil de JSON a http://forks.themeisle.com

Aquesta iniciació inicia el flux de treball de desplegament a forks.themeisle.com. Així:

Desplegament automàtic de temes per a temes WordPress LITE i PRO

Exemple de càrrega útil de la sol·licitud de GitHub Pull:

{
"acció": "obert",
"núm": 1,
"pull_request": {

"cap": {
"etiqueta": "preda-bogdan: producció",
"ref": "producció",
"sha": "****",

"Repo": {
"íd": 82166596,
"nom": "zerif-lite",
"nom complet": "preda-bogdan / zerif-lite",
"propietari": {
"iniciar Sessió": "preda-bogdan",

},
"privat": fals,

"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",

}
},

}
}

  • Utilitzem el "sha" clau per comprovar si és una sol·licitud vàlida i si tenim permès processar la càrrega útil.
  • Fem servir "iniciar Sessió", "nom" i "ref" per generar un llogater si no existeix.

L’estructura del fitxer

L’estructura de fitxers del servidor està configurada de manera que emmagatzemem cada inquilí a la seva pròpia carpeta pública i tinguem una instal·lació bàsica de WordPress que fem servir per fer referència amb un enllaç enllaç per a cada inquilí.

L’estructura del fitxer arrendatari és la següent:

Llogater/
| _ wp / / ** symlink core install de WordPress
| _ continguts / / ** carpeta de contingut arrendatari per a WordPress
| | _ theme / / ** carpeta de temes per arrendatari per a WordPress
| | _ carpeta / / ** arrendatària plugins plugins per a WordPress
| _ .htaccess / ** generat automàticament .htaccess per a arrendatari
| _ vhost.conf / ** alias fitxer de configuració per a apache
| _ wp-config.php / ** fitxer de configuració generat automàticament per al llogater

La wp / carpeta fa referència a la instal·lació bàsica de WordPress, que comparteixen tots els inquilins. D’aquesta manera, podem tenir una sola instal·lació de WordPress i diverses instàncies aïllades de llocs de WordPress, cadascuna amb configuració, fitxers i recursos encapsulats.

Els fitxers wp-config.php i arrendatari

Exemple principal de WordPress wp-config.php:

/ ** Ruta absoluta al directori de WordPress. * /
require_once ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Configura els URL de WordPress i els fitxers inclosos. * /
require_once (ABSPATH. ‘wp-settings.php’);

Exemple del llogater wp-config.php:

(Els valors inclosos en les claves de doble arrissat es substitueixen automàticament a la creació d’un arrendatari.)

/ ** AGREGAT PER L’API BOOTSTRAP * /
{{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”, fals);

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

if (! definit (‘ABSPATH’))
define (‘ABSPATH’, nom de dir (__ FILE__). ‘/ wp’);

Després de la creació del llogater, consultem un punt final per recuperar els paquets necessaris per a la implementació de temes (plugins, temes secundaris, base de dades). Els paquets s’emmagatzemen / s’emmagatzemen en una carpeta stash del servidor i s’actualitzen cada sis hores.

El següent pas és comprovar si el tema que volem implementar és un desplegament únic o necessita generar temes addicionals des de la base.

  • Si es tracta d’un desplegament únic, només cal fer servir un git pull "ssh_url" en arrendatari / contingut / temes /.
  • En cas que no es tracti d’un desplegament únic, fem un recorregut generalitzat a tmp /, executem Grunt generate i, després, copiem les carpetes resultants a inquilí / contingut / temes /.

La tasca de generació gruixuda és un estàndard per a nosaltres quan treballem amb temes que tenen diverses versions (normalment "petit" i "pro") tot utilitzant la mateixa base de codi (repositori). Per exemple, si executem la generació de Grunt per al dipòsit hestia-pro, també obtindrem la versió lite automàticament.

Després de gestionar les indicacions anteriors, utilitzem WP-CLI per instal·lar tots els paquets requerits (plugins i / o temes secundaris) i importar la descàrrega de bases de dades de demo.themeisle.com.

Els darrers passos són eliminar les regles .htaccess de reescriure, actualitzar "siteurl" i "a casa" amb l’URL del llogater i l’URL de WordPress Core, actualitzeu els enllaços per als ítems i publicacions del menú, i després torneu a carregar l’apache.

A continuació, enviem a l’usuari un correu electrònic amb el seu URL bifurcat per a la petició de presa i el registre generat durant el desplegament. (Cada arrendatari generat segueix aquest model d’URL general: http://forks.themeisle.com/github-login/theme-slug/branch/)

Pirata Bootstrap – consells & trucs i altra informació útil

Quan aneu a forks.themeisle.com, podeu accedir a una interfície semblant a un terminal prement la tecla "~" (tecla tilde) i després executeu un munt d’ordres útils. Les més rellevants són:

Restabliment del desplegament d’un arrendatari

La comanda es pirata reset tenant [arrendatari] (* theme-slug) |

Exemple:

el pirata restablir el llogater preda-bogdan / zerif-lite / development |  

O:

pirata restablir arrendatari preda-bogdan / hestia / desenvolupament hestia-pro |

L’ordre de restabliment torna al llogater al seu estat de desplegament original (restabliment de la base de dades, reinstal·lació de plugins i / o temes secundaris).

Visualització de registres

La comanda és mostrar registres. Aquesta ordre és útil si heu de comprovar els fitxers de registre després de la implementació i encara no heu rebut un correu electrònic o si heu de depurar..

Nota: el fitxer de registre es gira si la mida del fitxer supera els 9000 bytes, de manera que si no trobeu el que busqueu, potser haureu de comprovar directament l’arxiu de registre al servidor..

Pirate Wraith: compara visualment dues versions d’un tema

Pirate Wraith està allotjat a wraith.themeisle.com

El pirata Wraith està construït al damunt espectre i té punts finals per interactuar amb les sol·licituds de Slack, Travis i AJAX per aprofitar les capacitats de Wraith i generar proves i informes de regressió visual..

Travis

Pirate Wraith exposa un punt final a wraith.themeisle.com que escolta les sol·licituds d’una creació de Travis i "falla" o "passades" la creació segons els resultats de la prova de regressió visual.

Dins del fitxer .travis.yml, hem afegit una nova matriu que defineix una nova creació a sobre de les existents. Això estableix permisos per executar un script bash dins del projecte i després l’executa.

El fitxer YML de Travis:

matriu:
incloure:
– php: "7.0"
before_install: chmod + x wraith.sh
instal·lar:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
script: ./wraith.sh

Ja ho veieu "instal·lar" i "before_script" es queden en blanc. Es tracta de propòsit, de manera que la creació no hereti accions de construccions definides prèviament. Ens interessa només executar el script bash (script: ./wraith.sh) en aquesta creació.

També a destacar; estem configurant una variable d’entorn anomenada WRAITH_FAIL. Aquest valor s’utilitza per indicar a Pirate Wraith quina és la diferència percentil màxima permesa per superar una prova.

L’script Bash:

#! / bin / bash
WRAITH_SLUG = $ (node ​​-pe "require (“./ package.json”). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
cos ="{
“sol·licitud”: {
“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,
}
}"
ressò "Començament inicial de la sucursal $ TRAVIS_PULL_REQUEST_SLUG
$ TRAVIS_PULL_REQUEST_BRANCH ‘a Travis."
sortida = $ (curl -sw "% {http_code}" -X POST \
-H "Contingut: aplicació / json" \
-H "Accepta: application / json" \
-H "Versió API de Travis: 3" \
-d "$ {body // \ ‘/ \"}" \
‘http://wraith.themeisle.com’)
http_code ="$ {sortida: $ {# sortida} -3}"
si [$ {# sortida} -eq 3]; aleshores
cos =""
més
cos ="$ {sortida: 0: $ {# sortida} -3}"
fi

si [$ http_code! = 200]; aleshores
ressò "sortida $";
sortida 1
més
ressò "sortida $";
sortida 0
fi

En resum, aquest script crea una càrrega útil JSON que conté les variables d’entorn de Travis per defecte i les d’us definides per l’usuari. A més, llegeix packages.json i obté la trama de temes.

La segona part del script realitza una sol·licitud POST mitjançant "rínxol" a Pirate Wraith i analitza la resposta per recuperar el codi d’estat HTTP / 1.1 de la resposta.

Utilitzem el codi d’estat per a "falla" o "passar" la construcció. L’API Pirate Wraith retorna codis HTTP / 1.1 vàlids per a cada sol·licitud que processi.

  • Tornarà el codi 200 per fer proves completes i superades.
  • Per a la resta, la generació fallarà amb un codi de sortida d’1 (sortida 1)

Potser us estareu preguntant què és la comparació de Wraith. La resposta és senzilla; compara el desplegament de l’arrendatari de la petició actual Pull de Pirate Bootstrap amb la demostració del tema objectiu.

Per una millor comprensió del cicle de vida de GitHub – Travis – Pirate Bootstrap – Pirate Wraith, aquí es mostra un esquema que il·lustra el flux de treball d’aquests serveis:

Flux de treball Pirate Bootstrap / Pirate Wraith

Com pots veure, GitHub notifica tots dos Pirata Bootstrap i Travis sobre una nova petició Pull. Bootstrap comença a desplegar un inquilí, pregunta Travis Pirata Wraith per començar les proves.

Pirata Wraith compara la versió del llogater de la demostració amb la TemaIsle Demostració i retorna els resultats a Travis, perquè pugui passar o falla la construcció.

Fluix

A més del suport de Travis, Pirate Wraith té un punt final per integrar-se amb Slack.

Després de finalitzar la creació de Travis (passar o fallar), es genera un informe al canal #eyepatch que conté un enllaç a la galeria generada i un resum de les diferències trobades.

També s’inclouen algunes comandes útils de Slack que podeu utilitzar en qualsevol canal (Nota: L’API Pirate Wraith respondrà en aquest canal amb una resposta pública, per la qual cosa us recomanem que utilitzeu les ordres en un xat propi). Aquí teniu les ordres de Slack:

Restabliment de les fotografies bases de la història base d’un tema

/ wraith-history [tema-llima]

Exemple:

/ wraith-history zerif-lite |

Comparant-vos amb les fotografies de l’historial d’un tema

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

Exemple:

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

Aquesta ordre utilitza la barra proporcionada per comparar l’URL indicat amb l’historial de les llimes.

Comparació de dos URL

/ wraith-compare [url] vs [url]

Exemple:

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

Pirata Wraith – consells & trucs i altra informació útil

Restabliment de les fotografies bases de la història base d’un tema

wraith restableix l’historial [theme-slug]

Aquesta ordre restableix l’historial de l’escorcoll donat.

Comparant-vos amb les fotografies de l’historial d’un tema

wraith check latest [tema-llima] [url]

Aquesta ordre utilitza la barra proporcionada per comparar l’URL indicat amb l’historial de les llimes.

Comparació de dos URL

wraith compare urls [url-one] [url-two]

Visualització de registres

La comanda és mostrar registres. Aquesta ordre és útil si heu de comprovar els fitxers de registre. Funciona de la mateixa manera que a Pirate Bootstrap.

La seva presa?

Resumeix pràcticament els dos nous serveis que oferim i com es poden utilitzar per automatitzar el desplegament de temes de WordPress.

Vam crear Pirate Bootstrap i Pirate Wraith per satisfer les nostres pròpies necessitats, però creiem que aquests conceptes també poden ser útils per a qualsevol persona que treballi en projectes de desenvolupament similars. Sobretot si creeu productes derivats (com els temes de WordPress pro i lite en el nostre cas) i voleu comprovar quins tipus d’impacte tenen canvis de codi específics a les seves aparences..

El tema dels temes de WordPress és que les bases de codis de la majoria de temes moderns solen créixer bastant ràpidament, i alguns elements específics d’aquestes bases de codis poden tenir un impacte imprevisible en l’aparició d’altres elements del tema. Tractar d’atrapar tot allò manualment, només mirant les coses pels seus propis ulls humans, pot ser realment difícil, de manera que sempre serà una gran ajuda per introduir alguna forma d’algorisme / automatització en la combinació..

Però, què en penses? Veieu també el valor d’eines com aquestes per a altres projectes?

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