Personalizza MAMP e Apache per un miglior ambiente di sviluppo

Preparare il proprio ambiente di sviluppo è un compito che può intimidire diversi sviluppatori novizi, soprattutto se si fanno delle modifiche al database e dobbiamo esportarlo da locale a online; cosa che richiede la necessità di modificare il dominio presente nel database…

Insomma, per chi è alle prime armi (e anche non), creare un sito WordPress in locale ed esportarlo successivamente online non è una cosa molto semplice. Questa operazione richiede delle conoscenze sulla struttura di WordPress, alcune conoscenze MySQL e un po’ di sangue freddo che non guasta mai.

Tempo fa il nostro Daniele Scasciafratte ci ha aiutato nella sostituzione del dominio locale (che per chi lavora su Mac e MAMP sarà molto probabilmente localhost:8888/cartella) con quello che ospiterà il nostro sito web. Recentemente ho lavorato molto con questo script PHP e devo dire che è molto potente e sicuro.

Ma se devo essere sincero ho iniziato ad impostare il mio lavoro in modo diverso…

Tutto nasce dalla necessità di poter lavorare sul proprio computer senza dover affrontare inutili tempi di attesa, tempi che i programmi FTP o la nostra connessione ci impongono. Allo stesso tempo poter lavorare con un dominio miocliente.it in modo da ridurre i dolori in fase di trasporto del sito è una cosa molto utile dato che tutto quello che devo fare è semplicemente copiare i file nell’hosting del mio cliente e importare il database così come è.

Che cosa devi sapere

Abbiamo già parlato dei problemi di trasporto del proprio progetto e come questi possono essere intimidatori nei confronti di un nuovo utente (tranquillo, fino a qualche mese fa io stesso avevo gli stessi timori!), ma oltre a questo imparare a fare l’operazione che ti sto per descrivere ti permetterà di:

1. conoscere meglio il tuo server e di approfondire qualche conoscenza veramente utile,
2. risparmiare qualche soldo dato che, per queste operazioni, non avrai il bisogno di acquistare MAMP PRO o altri strumenti a pagamento.

Ovviamente per seguire questo percorso dovrai avere installato MAMP sul tuo sistema operativo e anche se sei un utente Windows seguire questo processo ti sarà incredibilmente utile perché se stai utilizzando uno dei molti programmi che ti permettono di installare un server web sul tuo sistema operativo, al 99% stai utilizzando Apache sul quale dovrai fare le stesse modifiche che ti sto per presentare.

Oltre a questi piccoli dettagli ci sono altre cose da sapere:

• su qualsiasi sistema operativo è presente un file hosts che ci permette di indicare al nostro computer un indirizzo IP e il dominio con il quale vogliamo collegarlo;
• il server Apache è in grado di gestire un numero arbitrario di domini grazie alle definizioni dei Virtual Host;
• se il tuo server non è attivo, niente di quello che leggerai potrà funzionare 😉

Descriviamo il progetto

In questo articolo voglio far finta di dover sviluppare un sito web per un nuovo cliente, giusto per rendere le cose più interessanti. Diciamo che questo cliente ha già comprato il dominio fioriepiante.com e vuole che gli prepariamo il sito. La soluzione più rapida alla quale potresti pensare è “apro l’FTP, ci butto dentro i file di WordPress e lo installo. Poi passo allo sviluppo.“

Sbagliato!

Anzi, non è neanche sbagliato come ragionamento, diciamo semplicemente che di sicuro è il metodo per lavorare più lentamente e che porta il maggior numero di problemi. Non mi credi? Vuoi un esempio? Eccoti servito.

Io stesso, nei primi periodi della mia carriera, lavoravo in questo modo; in fin dei conti ero in grado di lanciare un’installazione di WordPress in pochi minuti e tutto quello di cui mi dovevo preoccupare era soltanto lo sviluppo.

Purtroppo, oltre al fatto che questa soluzione sia incredibilmente lenta nella lunga corsa (ad ogni salvataggio bisogna attendere la scrittura del file sul server), c’è anche da dire che non sono state poche le volte che mi sono trovato con un file vuoto per qualche errore di connessione!

Per questo motivo ho iniziato a interessarmi alla procedura: prima in locale e poi online.

Gli errori vengono ridotti al minimo e il salvataggio dei file è pressocché immediato! Se hai letto alcuni dei miei articoli molto probabilmente hai conosciuto la gemma WordMove, un piccolo programma da riga di comando che permette di lavorare in locale e spedire il tutto soltanto a modifiche effettuate senza doversi preoccupare di niente.

Ti confesso che questo strumento è davvero potente, ma se non hai una connessione SSH verso il tuo server, il suo utilizzo diventa limitato e molto più lento…

Ecco allora che per il sito fioriepiante.com mi trovo in questa identica situazione; non ho una connessione SSH e non voglio essere rallentato dalle continue modifiche applicate via FTP, ma come risolvere?

Lascia che ti descriva il mio piano d’attacco:

1. dico al mio computer che se digito `fioriepiante.com` voglio che si diriga sul mio server web locale, in questo modo non mi devo preoccupare di modificare il database quando arriverà il momento di trasferire il progetto online e il mio lavoro sarà molto più veloce;
2. configuro il server web locale in modo che se nel browser viene inserito `fioriepiante.com` si dovrà consultare una specifica cartella presente nel mio sistema (quella dove avremo installato WordPress);
3. applico tutte le modifiche necessarie in locale e successivamente esporto il tutto online, senza dover fare alcuna modifica.

Questi sono i tre passaggi che ci aiuteranno ad avere uno sviluppo più rapido riducendo anche il rischio di problemi.

Dove trovare il file hosts

Ti ricordo che al momento sto facendo riferimento agli utenti Mac (e anche di alcune distribuzioni Linux), quindi se non sai dove trovare il percorso al file hosts presente sul tuo sistema Windows, non devi far altro che aprire Google e cercare file hosts Windows (clicca pure sul link che ho già fatto la ricerca per te).

Se invece usi Linux o Mac il tuo file hosts si trova sicuramente in /etc/hosts (qualcuno dice anche /private/etc/hosts ma se non sbaglio è un clone del precedente), per aprire questo file ti serviranno le credenziali da amministratore e il mio consiglio è quello di modificarlo con un editor di testo come nano che puoi utilizzare direttamente da terminale (ma puoi usarne uno qualsiasi).

Quindi, per modificare questo file con nano non dovrai far altro che aprire il tuo terminale e scrivere:

$ sudo nano /etc/hosts
Password:

Se non conosci il terminale ti basterà sapere che con il comando sudo stai chiedendo al sistema di poter eseguire il comando nano come se tu fossi un amministratore (per questo ti viene richiesta la password). Il percorso che trovi dopo il comando non è altro che il modo di dire al programma quale file intendi aprire.

Inserita la password dovresti aver aperto il tuo file hosts che, molto probabilmente presenta qualcosa come:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0     localhost

Più che focalizzarti sulle ultime righe del file (delle quali ignoro io stesso il significato) vorrei farti porre l’attenzione sulla riga:

127.0.0.1       localhost

Che cosa ci sta dicendo? Per primo che l’indirizzo IP della macchina sulla quale stiamo lavorando è 127.0.0.1 (uno standard) e successivamente ci mostra un alias che è stato creato per questo indirizzo, localhost.

In poche parole, questo non fa altro che dirci che se andremo a fare un ping su localhost (o lo utilizzeremo nella barra degli indirizzi del browser),questo verrà reindirizzato su 127.0.0.1. Informazioni sicuramente utili, ma noi vogliamo inserire il dominio fioriepiante.com!

Per fare questo non devi far altro che aggiungere una nuova riga e scrivere quanto segue:

127.0.0.1       fioriepiante.com

Con il programma nano, per salvare il file puoi premere Ctrl+X (che dirà a nano che vogliamo uscire dal programma), successivamente premi Y per dirgli che vuoi salvare le modifiche effettuate e quindi scrivere la riga appena aggiunta.

Salvato questo file potrebbe essere necessario riavviare il proprio sistema (nel mio caso non lo è stato), ma non abbiamo ancora finito. Con queste modifiche hai detto al tuo sistema che quando cerchi fioriepiante.com vuoi essere redirezionato sul tuo sistema, ma c’è ancora altro…

Creare un Virtual Host in MAMP e Apache

Proprio come ti ho detto poco fa, le mofiche che sarai in grado di fare al tuo file hosts sono in grado di reindirizzare un dominio sul tuo sistema (o su qualsiasi altro IP tu desideri specificare), ma il tuo server web non è ancora in grado di capire quale cartella desideri caricare…

Per fare questo è necessario impostare un Virtual Host.

Non vorrei averti fatto distrarre troppo dal titolo, ma creare un Virtual Host non è una peculiarità di MAMP, bensì di Apache! È proprio il server web Apache che ci permette di dire al nostro sistema qualcosa come “se qualcuno ti chiede fioriepiante.com su questo computer, carica il contenuto della cartella fioriepiante/“.

Ovviamente Apache viene installato con l’applicazione MAMP che ci facilita non poco lo sviluppo web all’interno di sistemi OSX quindi bisogna rispettare la sua struttura per fare in modo che tutto funzioni correttamente.

Il file di configurazione principale per il server Apache si chiama httpd.config e all’interno dei nostri sistemi Mac si può trovare in: /Applications/MAMP/conf/apache/httpd.conf.

Anche se il percorso è in inglese, se il tuo Mac parla italiano, potrai utilizzare il tuo stesso Finder per trovare il file interessato e aprirlo con il tuo editor di testo preferito.

Trovato il file, non dimenticarti di fare una copia di backup (non vogliamo assolutamente rompere il nostro server); fatto questo non devi far altro che fare una veloce ricerca per virtual e se i nostri file sono simili (io sto usando la versione 3 di MAMP) al rigo 569 dovresti trovare qualcosa di simile:

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Come puoi notare MAMP ha configurato Apache per consultare un file specifico nel quale può trovare le informazioni necessarie per impostare i Virtual Host. Per fare in modo che il tuo Apache includa le configurazioni presenti in questo file, non devi far altro che rimuovere il cancelletto (#) di fronte alla riga Include.

Fatto questo basta entrare nella cartella extra/ e aprire il file httpd-vhosts.conf (anche in questo caso non dimenticarti di fare una copia di backup!). Al suo interno dovresti trovare qualcosa come:

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

In poche parole questi non sono altro che una serie di esempi che puoi modificare tranquillamente. Una cosa per la quale devi prestare attenzione sono le porte che vengono utilizzate, nel mio sistema ho detto a MAMP che desidero utilizzare la porta 80 (la porta standard per un server web) al posto di utilizzare la 8888 (che MAMP imposta come default).

Se non vuoi cambiare queste impostazioni, non devi far altro che modificare *:80 in *:8888 e modificare anche il file hosts aggiungendo questa porta, praticamente il dominio indicato in questo file dovrà essere fioriepiante.com:8888.

Personalmente ho preferito impostare la porta 80 perché così non avrò problemi nel momento del trasporto del progetto, ma se preferisci evitare di fare troppe modifiche puoi sempre lasciare le impostazioni standard.

A questo punto hai scoperto dove si trova il file di configurazione di Apache (presente in MAMP) e hai capito che le dichiarazioni dei Virtual Host dovranno essere inserite in un file esterno (non obbligatorio ma sicuramente più ordinato); quello che ti manca da sapere è: come dichiarare un nuovo dominio?

Puoi prendere spunto dai comandi già presenti nel file  httpd-vhosts.conf, ma ho preferito semplificarti un po’ la vita e aggiungerti le configurazioni che io stesso sto utilizzando:

<VirtualHost *:80>
    DocumentRoot "/Percorso/alla/Cartella/htdocs"
    ServerName localhost
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "/Percorso/alla/Cartella/htdocs/fioriepiante"
    ServerName fioriepiante.com
</VirtualHost>

In poche parole non ho fatto altro che dire ad Apache che se qualcuno scrive localhost non dovrà far altro che mostrarmi il contenuto della cartella principale del server web locale, mentre se viene inserito fioriepiante.com dovrà aprire la cartella fioriepiante/ sempre presente in htdocs/.

A questo punto non dovrai far altro che riavviare MAMP e il gioco è fatto!

Cosa Fare Adesso?

A essere sincero… Adesso è il momento buono per installare WordPress ed iniziare a sviluppare 😉

Sono sicuro che questo processo ti potrà sembrare macchinoso e le prime volte può anche esserlo soprattutto se non sai dove mettere le mani. Ti assicuro che dopo pochissimo saprai come muoverti sapientemente e potrai esportare/importare i tuoi progetti in un baleno!

Se poi sei un maniaco delle scoriciatoie e sai come utilizzare WP CLI potrai trovare diversi script del nostro Daniele che ti faciliteranno incredibilmente il compito 😉