Inde i Dev House: Sådan håndterer vi automatisk temadistribution til LITE og PRO WordPress-temaer

Inde i Dev House: Sådan håndterer vi automatisk temadistribution til LITE og PRO WordPress-temaer

Inde i Dev House: Sådan håndterer vi automatisk temadistribution til LITE og PRO WordPress-temaer
СОДЕРЖАНИЕ
02 июня 2020

Som du kunne forestille dig, er temaudvikling noget vi gør ret meget her hos virksomheden. Med omkring 4-5 nye temaprojekter i værkerne på ethvert givet tidspunkt og 80 temaer i vores bibliotek i alt (hvilket også betyder aktiv vedligeholdelse og videreudvikling af dem), har vi vores hænder temmelig fulde.


I en sådan indstilling er en vis optimering og endda automatisering, når det er muligt, nøglen.

Så i dag vil vi invitere dig gennem vores husdør kl ThemeIsle, så at sige og vise dig to specifikke stykker af vores temaudviklingspuslespil.

Jeg vil ikke skjule, at denne type indlæg er et eksperiment. Hvis du nyder det, vil vi sørge for at få flere ting som dette frem i fremtiden.

Specifikt er emnet i dag noget, der kan kaldes, "automatisk implementering og visuel regressionsarkitektur til WordPress-temaudvikling."

Vent, hvad er automatisk temadistribution?

Hvis du ikke taler udvikler, er det, hvad det betyder på engelsk, at du kan udvikle temaer til WordPress, få dem implementeret til en server og derefter visuelt sammenligne forskellene mod en foruddefineret baseline uden at skulle gøre noget manuelt.

Det hele sker automatisk eller rettere, "automagisk."

Hvordan virker det?

Vi udviklede to tjenester til at tage sig af denne automatiske temadistribution: "Pirate Bootstrap" og "Pirate Wraith."

Den første, Pirate Bootstrap, kan aktiveres via Webhooks fra GitHub.

På Pull Request frigøres det en ny WordPress-instans ved hjælp af et givet tema fra et sæt repository + alle pakker og databaseindstillinger taget fra temas standarddemo på ThemeIsle.

Sidstnævnte, Pirate Wraith, udfører en Visual Regression Test (også sammenligne billeder fra to kilder). Testen kontrollerer den nye implementering af temaet mod demoen fra ThemeIsle – visuelt – og genererer derefter en rapport. Baseret på denne rapport kan du hurtigt se, om de nylige ændringer havde nogen indflydelse på temaets udseende.

Med andre ord, når du arbejder på et tema, og du vil sikre dig, at dine seneste kodeændringer ikke har rodet tematets design, kan du bruge Pirate Wraith til at håndtere opgaven på autopilot.

Lad os forklare hver service mere detaljeret:

Pirate Bootstrap – udsætter en ny forekomst af WordPress ved hjælp af et sæt tema

Pirate Bootstrap er vært på forks.themeisle.com

Pirate Bootstrap er bygget oven på WP-CLI og har metoder til at generere komplette WordPress-implementeringer baseret på ThemeIsle-temapakker og afhængigheder.

Elementerne:

GitHub Webhooks

Webhooks bruges til at kalde Pirate Bootstraps API til (åbnet eller synkroniseret) Træk anmodninger ved at sende en JSON nyttelast til http://forks.themeisle.com

Dette kick-start implementeringsarbejdsgang på forks.themeisle.com. Ligesom:

Automatisk temadistribution til LITE og PRO WordPress-temaer

Eksempel på en GitHub Pull-anmodning om nyttelast:

{
"handling": "åbnet",
"nummer": 1,
"pull_request": {

"hoved": {
"etiket": "Preda-bogdan: produktion",
"ref": "produktion",
"sha": "****",

"repo": {
"id": 82166596,
"navn": "zerif-lite",
"fulde navn": "Preda-bogdan / zerif-lite",
"ejer": {
"Log på": "Preda-bogdan",

},
"privat": falsk,

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

}
},

}
}

  • Vi bruger "sha" nøgle for at kontrollere, om det er en gyldig anmodning, og om vi har tilladelse til at behandle nyttelasten.
  • Vi bruger "Log på", "navn" og "ref" at generere en lejer, hvis den ikke findes.

Filstrukturen

Filstrukturen på serveren er indstillet, så vi gemmer hver lejer i sin egen offentlige mappe og har en kerneinstallation af WordPress, som vi bruger til at referere til med en symlink for hver lejer.

Lejers filstruktur er som følger:

lejer/
| _ wp / / ** symlink core installation af WordPress
| _ indhold / / ** lejerindholdsmappe til WordPress
| | _ temaer / / ** lejertema-mappe til WordPress
| | _ plugins / / ** lejeplugins-mappe til WordPress
| _ .htaccess / ** auto-genereret .htaccess for lejer
| _ vhost.conf / ** alias konfigurationsfil til apache
| _ wp-config.php / ** auto-genereret konfigurationsfil for lejer

Wp / folder refererer til kerneinstallationen af ​​WordPress, som deles af alle lejere. På denne måde kan vi have en enkelt installation af WordPress og flere isolerede forekomster af WordPress-websteder, hver med indkapslede indstillinger, filer og ressourcer.

Wp-config.php-kerne- og lejerfiler

Core WordPress wp-config.php eksempel:

/ ** Absolutt sti til WordPress-biblioteket. * /
demand_once ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Opsætter WordPress vars og inkluderede filer. * /
demand_once (ABSPATH. ‘wp-settings.php’);

Lejer wp-config.php eksempel:

(Værdier indeholdt i dobbelt krøllede seler erstattes automatisk ved oprettelse af lejer.)

/ ** TILFØJT AF BOOTSTRAP API * /
{{MYSQL_CONNECTION_TENANT_DATA}}

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

definere (‘WP_DEBUG’, falsk);

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

hvis (! defineret (‘ABSPATH’))
definere (‘ABSPATH’, dirname (__ FILE__). ‘/ wp’);

Efter oprettelsen af ​​lejeren forespørger vi et slutpunkt for at hente pakker, der er nødvendige til temadistribution (plugins, underordnede temaer, database). Pakkerne cache / gemt i en stash-mappe på serveren og opdateres hver sjette time.

Det næste trin er at kontrollere, om det tema, vi vil implementere, er en enkelt distribution eller skal generere yderligere temaer fra basistypen.

  • Hvis det er en enkelt implementering, gør vi bare et git pull ved hjælp af "ssh_url" ind i lejer / indhold / temaer /.
  • I tilfælde af at det ikke er en enkelt implementering, gør vi et git pull in tmp /, kører guntgenerering og kopierer derefter de resulterende mapper til lejer / indhold / temaer /.

Den gunt generere opgave er en standard for os, når vi arbejder med temaer, der har flere versioner (normalt "lite" og "pro") mens du bruger den samme kodebase (depot). For eksempel, hvis vi kører guntgenerering til hestia-pro-arkivet, får vi også lite-versionen automatisk.

Efter håndtering af ovenstående bruger vi WP-CLI til at installere alle påkrævede pakker (plugins og / eller underordnetemaer) og importere databasedumpet fra demo.themeisle.com.

De sidste trin er at skylle .htaccess omskrivningsreglerne, opdatere "SITEURL" og "hjem" med lejer-URL og URL til WordPress Core, opdater links til menupunkter og indlæg, og derefter til sidst genindlæse apache.

Vi sender derefter brugeren en e-mail med deres gaffel-URL til Pull Request og loggen genereret under installationen. (Hver genereret lejer følger denne generelle URL-model: http://forks.themeisle.com/github-login/theme-slug/branch/)

Pirate Bootstrap – tip & tricks og andre nyttige oplysninger

Når du går til forks.themeisle.com, kan du få adgang til en terminallignende grænseflade ved at trykke på "~" (tilde-nøgle) og kør derefter en masse nyttige kommandoer derfra. De mest relevante er:

Nulstilling af en lejerdeposition

Kommandoen er pirate reset tenant [tenant] (* tema-slug) |

Eksempel:

pirat nulstiller lejer preda-bogdan / zerif-lite / udvikling |  

Eller:

pirat nulstiller lejer preda-bogdan / hestia / udvikling hestia-pro |

Reset-kommandoen sætter lejeren tilbage til sin oprindelige implementeringstilstand (database reset, geninstallere plugins og / eller underordnede temaer).

Visning af logfiler

Kommandoen er viser logfiler. Denne kommando er nyttig, hvis du har brug for at kontrollere logfilerne efter en implementering, og du ikke har modtaget en e-mail endnu, eller du har brug for at fejlsøge.

Bemærk: Logfilen roteres, hvis filstørrelsen bliver større end 9000 byte, så hvis du ikke kan finde det, du leder efter, skal du muligvis kontrollere loggarkivet direkte på serveren.

Pirate Wraith – sammenligner to versioner af et tema visuelt

Pirate Wraith er vært på wraith.themeisle.com

Pirate Wraith er bygget oven på Wraith og har endepunkter for at interagere med Slack, Travis og AJAX anmodninger for at udnytte Wraith-kapaciteter og generere Visual Regression Tests and Reports.

Travis

Pirate Wraith udsætter et slutpunkt på wraith.themeisle.com, der lytter til forespørgsler fra en Travis-bygning, og "mislykkes" eller "gennemløb" bygningen i henhold til resultaterne af Visual Regression Test.

Inde i .travis.yml-filen tilføjede vi en ny matrix, der definerer en ny bygning oven på de eksisterende. Dette sætter tilladelser til at køre et bash script inde i projektet og kører det derefter.

Travis YML-fil:

matrix:
omfatte:
– php: "7,0"
before_install: chmod + x wraith.sh
installere:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
script: ./wraith.sh

Det kan du se "installere" og "before_script" efterlades tomt. Dette er med vilje, så build ikke arver handlinger fra tidligere definerede builds. Vi er bare interesseret i at køre bash-scriptet (script: ./wraith.sh) på denne build.

Også at bemærke; vi indstiller en miljøvariabel kaldet WRAITH_FAIL. Denne værdi bruges til at fortælle Pirate Wraith, hvad den maksimalt tilladte procentdelforskel for bestået en test er.

Bash-scriptet:

#! / Bin / bash
WRAITH_SLUG = $ (knude -pe "kræver ( ‘./ package.json’). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
body ="{
‘anmodning’: {
‘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,
}
}"
ekko "Udløsende opbygning af filialen $ TRAVIS_PULL_REQUEST_SLUG
$ TRAVIS_PULL_REQUEST_BRANCH ‘på Travis."
output = $ (krøllet -sw "% {HTTP_CODE}" -X POST \
-H "Indholdstype: ansøgning / json" \
-H "Accepter: ansøgning / json" \
-H "Travis-API-version: 3" \
-d "$ {Krop // \ ‘/ \"}" \
‘Http://wraith.themeisle.com’)
HTTP_CODE ="$ {Output: $ {# output} -3}"
hvis [$ {# output} -ækv 3]; derefter
body =""
andet
body ="$ {Udgang: 0: $ {# output} -3}"
fi

hvis [$ http_code! = 200]; derefter
ekko "$ udgang";
frakørsel 1
andet
ekko "$ udgang";
Afslut 0
fi

Kort sagt opretter dette script en JSON-nyttelast indeholdende standard Travis-miljøvariabler og brugerindstillinger. Det læser også pakker.json og får temasluggen.

Den anden del af scriptet foretager en POST-anmodning via "krølle" til Pirate Wraith og analyserer svaret for at hente HTTP / 1.1-statuskoden for svaret.

Vi bruger statuskoden til "svigte" eller "passere" bygningen. Pirate Wraith API returnerer gyldige HTTP / 1.1-koder for hver anmodning, den behandler.

  • Den returnerer kode 200 for komplette, beståede prøver.
  • For alt andet mislykkes build med en exit-kode på 1 (exit 1)

Du spekulerer måske på, hvad Wraith sammenligner. Svaret er enkelt; det sammenligner lejerdeplacering af den nuværende Pull-anmodning fra Pirate Bootstrap med demoen af ​​målet tema.

For en bedre forståelse af GitHub – Travis – Pirate Bootstrap – Pirate Wraith livscyklus er her et diagram, der illustrerer arbejdsgangen for disse tjenester:

Pirate Bootstrap / Pirate Wraith-arbejdsgang

Som du kan se, GitHub underretter begge Pirate Bootstrap og Travis om en ny Pull Request. Bootstrap begynder at indsætte en lejer, spørger Travis Pirate Wraith for at starte testene.

Pirate Wraith sammenligner lejerversionen af ​​demo med ThemeIsle Demo og returnerer resultaterne til Travis, så det kan passere eller svigte bygningen.

slack

Ud over Travis-støtte har Pirate Wraith et endepunkt for integration med Slack.

Når en build fra Travis er færdig (bestået eller ikke bestået), genereres en rapport i #eyepatch-kanalen, der indeholder et link til det genererede galleri og en oversigt over de fundne forskelle.

Der er også indbygget et par nyttige Slack-kommandoer, som du kan bruge i en hvilken som helst kanal (Bemærk: Pirate Wraith API reagerer i denne kanal med et offentligt svar, så vi anbefaler at bruge kommandoerne i selvchat). Her er kommandoerne til Slack:

Nulstilling af et temas historiske baseline shots

/ wraith-history [theme-slug]

Eksempel:

/ wraith-history zerif-lite |

Sammenligning med et temas historiske billeder

/ wraith-nyeste [tema-slug] [url]

Eksempel:

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

Denne kommando bruger den medfølgende slug til at sammenligne den givne URL med denne slugs historie.

Sammenligning af to webadresser

/ wraith-sammenligne [url] vs [url]

Eksempel:

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

Pirate Wraith – tip & tricks og andre nyttige oplysninger

Nulstilling af et temas historiske baseline shots

wraith nulstille historik [tema-slug]

Denne kommando nulstiller historien for den givne slug.

Sammenligning med et temas historiske billeder

wraith check seneste [tema-slug] [url]

Denne kommando bruger den medfølgende slug til at sammenligne den givne URL med denne slugs historie.

Sammenligning af to webadresser

wraith sammenligne webadresser [url-one] [url-two]

Visning af logfiler

Kommandoen er viser logfiler. Denne kommando er nyttig, hvis du har brug for at kontrollere logfilerne. Det fungerer på samme måde som i Pirate Bootstrap.

Din tage?

Dette opsummerer temmelig vores to nye tjenester, og hvordan de kan bruges til at automatisere WordPress-temadistribution.

Vi skabte både Pirate Bootstrap og Pirate Wraith for at imødekomme vores egne behov, men vi mener, at disse koncepter kan være lige så nyttige for alle, der arbejder på lignende dev-projekter, også. Især hvis du bygger afledte produkter (som pro og lite WordPress-temaer i vores tilfælde), og du vil kontrollere, hvilken slags påvirkningsspecifikke kodeændringer har på deres udseende.

Sagen med WordPress-temaer er, at kodebaserne for de fleste moderne temaer har en tendens til at vokse ganske hurtigt, og nogle specifikke elementer i disse kodebaser kan have en uforudsigelig indflydelse på udseendet af andre elementer i temaet. At prøve at fange alt det manuelt – bare ved at se på ting gennem dine egne menneskelige øjne – kan være virkelig udfordrende, så det er altid en enorm hjælp at introducere en form for en algoritme / automatisering i blandingen.

Men hvad synes du? Ser du værdien af ​​værktøjer som disse også for andre projekter?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector