Alla scoperta di Vagrant e VVV per lo sviluppo WordPress

Già altre volte ti abbiamo presentato delle soluzioni che permettono di preparare degli ambienti di sviluppo in poco tempo, Andrea ha usato per anni MAMP e addirittura ci ha mostrato come personalizzarlo per avere dei comodi virtual host da utilizzare durante la creazione dei progetti.

Purtroppo MAMP è una soluzione che si trova soltanto per Mac e questo risulta limitante per tutti coloro che non utilizzano questo sistema operativo e soprattutto ci rende dipendenti da un’applicazione che non rispecchia la configurazione di un server comune.

Allo stesso tempo la mia intenzione non è quella di spiegarti in un singolo articolo come poter configurare da zero un server web, non ne avrei assolutamente lo spazio e stiamo preparando un corso proprio per questo motivo.

Quello che faremo oggi è parlare di una soluzione a riga di comando compatibile per tutti i sistemi operativi in circolazione che ci permette di creare degli ambienti di sviluppo in pochissimo tempo e andremo a conoscere nello specifico una sua configurazione dedicata a noi sviluppatori WordPress.

Se i webinar che stiamo trasmettendo, avrai notato la nostra tendenza a presentarti sempre più strumenti da riga di comando; è perché siamo un po’ troppo geek? Forse. Ma in tutta onestà è sopratutto perché crediamo fermamente che questi strumenti sono più completi e rapidi da utilizzare.

Oltre a questo scoprire come usare il terminale ti aiuterà anche a gestire i tuoi server online e utilizzare strumenti avanzati per lo sviluppo frontend come Grunt o Gulp. So già che Andrea sta preparando qualche articolo dove ti presenterà degli strumenti dedicati al mondo Mac veramente interessanti, mentre abbiamo Eugenio che sta terminando il corso dedicato al terminale. Quindi per il momento non mi resta altro che sbizzarrirmi e spiegarti immediatamente come creare un server web sul tuo sistema operativo in una manciata di minuti.

Piattaforme di Sviluppo con Vagrant

La prima applicazione da terminale che ti voglio presentare prende il nome di Vagrant ed è stata una vera e propria rivoluzione nel mondo dello sviluppo perché ci permette di creare delle macchine virtuali in pochissimo tempo, basta attendere il download dell’immagine del sistema operativo e una volta installato sei pronto a partire!

La cosa bella di Vagrant è che è possibile specificare tutta la configurazione all’interno di un singolo file che possiamo condividere con i nostri colleghi in modo da poter creare la stessa macchina con gli stessi software al posto di passare pesanti immagini di sistema.

Tutto quello che devi fare è installare Vagrant sul tuo sistema e sarai pronto a tirare su tante macchine virtuali senza dover andare al negozio a comprare nuovi componenti 🙂 Le istruzioni presenti sul sito sono molto chiare e sono presenti dei pacchetti per qualsiasi sistema operativo; io credo che te la caverai ma se hai qualche problema non esitare a commentare qua in basso.

Configurazione per Sviluppare in WordPress con VVV

Adesso che conosci Vagrant è giunto il momento di presentarti una sua configurazione molto particolare che ti permetterà di avere un ambiente di sviluppo eccellente per il tuo WordPress: VVV.

L’acronimo significa Varying Vagrant Vagrants e non è altro che una configurazione particolare di Vagrant che ci permette di avere i seguenti software installati all’interno della nostra macchina virtuale:

• server web Nginx e un server MySQL gestibile con PHPmyAdmin;
• l’applicazione da terminale WP-CLI che permette di gestire la nostra installazione da terminale;
• sistemi di cache da creare con OpCache o con Memcache e PHPMemcachedAdmin per la sua gestione;
• il sistema di debug offerto da xDebug, molto più potente dello standard PHP e consultabile grazie a WebGrind;
• la possibilità di creare dei test grazie all’uso di PHPUnit;
• un completo server mail gestibile con MailCatcher;
• e la possibilità di controllare il codice che scriviamo con PHPCodeSniffer che ci permette di scoprire se rispettiamo gli standard.

Oltre a tutte queste applicazioni, all’interno di VVV vengono inserite anche 3 instanze di WordPress che rappresentano la versione stabile, la versione in trunk (la successiva release in arrivo) e la nightly che implementa le modifiche salvate dal giorno precedente.

Tutti questi software installati sono giá pronti e funzionanti, ma potrebbe essere necessaria una modifica manuale al file /etc/hosts perché Vagrant (non essendo eseguito con permessi di root) non puó modificare questo file per aggiungere i riferimenti DNS dei nuovi siti.

Per installare tutto questo non dovrai far altro che eseguire i seguenti comandi una volta installato Vagrant sul sistema operativo:

#Usa questo comando per clonare il repository di VVV nel tuo sistema 
$ git clone git@github.com:Varying-Vagrant-Vagrants/VVV.git wp-dev/ 

#Apri la cartella creata dalla clonazione 
$ cd wp-dev/ 

#Avvia l'installazione della macchina virtuale VVV 
$ vagrant up

Inserisci i comandi precedenti uno a uno all’interno del tuo terminale, ignora le sezioni che iniziano con un # perché sono soltanto dei commenti che ti ho lasciato per farti capire le azioni che stai svolgendo. All’avvio di vagrant up è probabile aspettare diversi minuti perché sta scaricando l’immagine completa di un sistema operativo (basato su Ubuntu) che pesa poco più di 400MB, quindi il tempo varierà in base alla tua installazione.

Terminate le operazioni di installazione e di avvio della macchina virtuale, è giunto il momento di andare a scoprire come si presenta il server web che abbiamo appena installato. Per assicurarci che tutto sia andato a buon fine, ti consiglio di aprire il tuo vile /etc/hosts e inserire quanto segue: 192.168.50.4 vvv.dev local.wordpress.dev local.wordpress-trunk.dev src.wordpress-develop.dev build.wordpress-develop.dev.

Inserendo queste stringhe hai reso noto al tuo sistema operativo quali saranno le URL dedicate al tuo sviluppo in WordPress e per vedere lo stato dei tuoi server non devi fare altro che controllare su http://vvv.dev per entrare nel tuo pannello di controllo.

Sicuramente non è il pannello di controllo più eccitante che tu possa avere, ma almeno possiamo raggiungere da un unico posto tutti i nostri strumenti e le installazioni WordPress presenti sul nostro sistema.

Potrei concludere qua l’articolo e augurarti buona fortuna, ma ho deciso di fare qualcosa in più e andarti a presentare un altro paio di strumenti utili e il mio workflow personale nella speranza di poterti facilitare ulteriormente il tuo lavoro.

Installiamo un Generatore e una nuova Bacheca

Se stai continuando a leggere molto probabilmente è perché ti interessa scoprire delle soluzioni che ti permetteranno di velocizzare il tuo lavoro nella configurazione di questi sistemi. In fin dei conti adesso hai tre installazioni WordPress nel tuo sistema grazie a Vagrant, ma se ci riflettiamo per un attimo anche se questa soluzione ci permette di virtualizzare qualsiasi tipologia di server web al momento ci sta lasciando con pochissime installazioni di questo CMS…

Sono sicuro che sul tuo sistema ci sono ben più di 3 progetti WordPress che stai sviluppando per te o per qualche cliente, non è vero?

Di sicuro avere Vagrant e saperlo configurare creando anche macchine diverse da VVV ci permette di testare velocemente il nostro WordPress sia su Apache che su Nginx, ma allo stesso tempo sembra che non ci sia un semplice modo per poter creare delle nuove istanze di WordPress magari scegliendo anche il suo dominio.

Desideri scoprire come farlo facilmente?

Come già discusso anche all’interno del nostro webinar su GitHub, poter lavorare all’interno di questo social network dedicato al codice ci permette di scoprire moltissime soluzioni intelligenti e anche open source. Ed è per questo stesso motivo che oggi mi trovo a presentarti Variable VVV o come lo chiamano gli amici vv.

Questo è un altro comando per il tuo terminale che ti permetterà di creare in pochi secondi delle nuove istanze WordPress grazie al semplice comando vv create.

Se vuoi installare questa applicazione su Windows ti lascio seguire le istruzioni presenti sul suo repository GitHub, se vuoi installarla in OSX Andrea mi ha consigliato di seguire la via di Homebrew mentre se non vuoi seguire il suo consiglio o vuoi installare vv a mano non devi fare altro che seguire i seguenti passaggi:

#Apri la cartella temporale del tuo sistema 
$ cd /tmp 

#Clona al suo interno il repository di vv 
$ git clone git@github.com:bradp/vv.git 

#Entra nella cartella appena creata 
$ cd vv 

#Aggiungi i permessi di esecuzione 
$ chmod +x vv 

#Muovi tutto all'interno della cartella contenente i tuoi eseguibili 
$ cd ../ & mv vv /usr/local/bin

Adesso che hai installato questa applicazione nel tuo sistema non devi far altro che dire dove si trova la cartella in cui è installato il tuo VVV e rispondere alle domande di configurazione che ti verranno fatte per creare tutte le installazioni WordPress sfruttando un’unica macchina virtuale.

Abbiamo quindi risolto il problema delle installazioni WordPress e dei domini da utilizzare, non è che sbirciando su GitHub è possibile trovare qualche script in grado di migliorare la bacheca che ci viene presentata quando visitiamo hhtp://vvv.dev? Ovviamente questa è una domanda retorica perché conosco già la risposta, per fortuna nostra qualcuno ha pensato a migliorare la situazione.

La soluzione prende il nome di VVV Dashboard ed è un semplice script PHP che ci permette di avere una bacheca molto più semplice da consultare e che potrà offrirci delle scorciatoie per l’uso delle componenti più interessanti.

Come puoi vedere labacheca assume tutto un’altro aspetto e oltre a elencare le istanze WordPress che vengono installate di default, come ad esempio local.wordpress.dev, possiamo trovare anche quelle nuove create grazie a vv, come andmore.dev dove sviluppiamo i nostri progetti interni.

Installare questa bacheca è incredibilmente semplice, tutto quello che devi fare è clonare il seguente repository dentro la tua cartella VVV/www/default/ (sostituisci VVV con la cartella dove è stato installato). Ecco i semplici passi che devi seguire:

#Apri la cartella default del tuo vagrant 
$ cd VVV/www/default/ 

#Clona il repository della nuova bacheca 
$ git clone http://github.com/topdown/VVV-Dashboard.git dashboard 

#Sposta la nuova bacheca 
$ cp dashboard/dashboard-custom.php ./

Adesso che tutto è stato configurato non ti resta altro che aggiornare la pagina http://vvv.dev per osservare la nuova bacheca. Se desideri tornare indietro, anche se non ne vedo motivo, puoi sempre cancellare il file dashboard-custom.php dalla tua cartella default/ e il gioco è fatto.

Due consigli sul Workflow

Seguendo questo articolo hai già raggiunto gran parte del mio workflow. Ogni volta che devo lavorare su un nuovo progetto creo una nuova istanza WordPress con vv create e grazie agli strumenti offerti da Vagrant posso collegarmi alla mia macchina virtuale tramite SSH e modificare i file aprendoli facilmente con gli editor installati sul mio sistema.

La comodità di poter rimuovere un sito web con un semplice comando (vv delete nome_sito) al posto che eseguire molteplici passaggi all’interno di alcune applicazioni è sicuramente un sollievo che vale la pena di provare, ma non è soltanto questo il motivo per il quale voglio condividere il mio workflow.

Quando lavoriamo con vv i siti che creiamo si trovano all’interno di VVV/www/nome_sito/htdocs e potremo accedere ai suoi file con qualsiasi editor installato, ovviamente modificando i vari file e applicando le nostre modifiche è sempre probabile fare qualche errore; ecco perché lo stesso vv ci chiede se vogliamo attivare le funzionalità di debug durante la configurazione dell’installazione.

Personalmente preferisco rispondere di no e aggiungere il seguente blocco di codice che ho scoperto in questo articolo all’interno del mio wp-config.php.:

define ('JETPACK_DEV_DEBUG', true ); 
define( 'WP_DEBUG_LOG', true ); 
define( 'SCRIPT_DEBUG', true ); 

if ( defined( 'DOING_AJAX' ) && DOING_AJAX || defined( 'DOING_CRON' ) && DOING_CRON ) { 
	define( 'WP_DEBUG_DISPLAY', false ); 
	@ini_set( 'display_errors', 0 ); 
} else { 
	define( 'WP_DEBUG_DISPLAY', true ); 
}

Queste sono configurazioni leggermente avanzate per il debug WordPress ma ci permetterà di nascondere gli errori se sono in esecuzione dei processi Ajax o Cron, in modo da non sporcare queste risposte, mentre verranno attivati per tutti gli altri casi.

Se non ti interessa leggere da ogni parte gli errori o gli warning che scateni con il tuo codice, puoi sempre disattivarli:

define( 'WP_DEBUG_DISPLAY', false ); 
@ini_set( 'display_errors', 0 );

In questo modo nessun errore sarà visibile nel browser ma sarà sempre possibile scoprirli andando a consultare il file di log presente in VVV/www/nome_sito/htdocs/wp-content/debug.log. Ovviamente aprire un file di log non è un’attività interattiva perché gli errori li troviamo anche dopo che sono successi e non è facile averli aggiornati una volta aperti.

Per questo motivo prima ancora di concludere ti lascio con un piccolo trucco che puoi avviare nel tuo terminale e ricevere gli errori di debug direttamente al suo interno mentre accadono nella pagina, ottimo per seguire dal vivo la presenza di errori su determinate pagine.

tail -f /var/www/VVV/www/nome_sito/htdocs/wp-content/debug.log

Conclusioni

Ebbene siamo arrivati alla fine di un articolo bello pieno di novità. Non soltanto ti ho presentato una serie di strumenti che ti permetteranno di creare ambienti di sviluppo in un batter d’occhio, ma ho condiviso con te anche gran parte del mio workflow.

Ad essere onesto mi sono tenuto per me tutti i processi che utilizzo con Git perché saremmo andati sicuramente fuori traccia, ma spero vivamente che le informazioni che hai trovato in questo articolo potranno essere di aiuto nel lavoro che svolgi.

Devo confessarti che Vagrant non è l’unica soluzione che potrai utilizzare per creare ambienti di sviluppo, ultimamente si sente molto parlare di Docker, ma io ti ho presentato questo strumento perché è quello che noi stessi utilizziamo e appreziamo in azienda.

Tu usi altre soluzioni? Fammelo sapere all’interno dei commenti e non dimenticarti di condividere questo articolo con i tuoi colleghi, sono sicuro che tra loro c’è qualche sviluppatore che sarà pronto a offrirti da bere 😉