Come creare un virtual host in locale con MAMP

Se sei giunto su questa pagina, voglio dare per scontato che tua sia una persona che realizza siti web.

Quindi, molto probabilmente (se ancora non conosci che cos’è un virtual host), il tuo modo di lavorare si può distinguere in due opzioni:

1. Compri dominio ed hosting per il tuo cliente e ci installi WordPress. Poi scarichi un plugin per la manutenzione in maniera tale che mentre ci lavori nessuno possa vedere i contenuti del sito. Sebbene possa sembrare più immediato, questo non è il modo migliore di lavorare.

2. Se sei, invece, un po’ più navigato potresti aver scaricato MAMP sul tuo computer MAC per creare un server direttamente sulla tua macchina. Questo ti permette di essere più veloce e di spostare tutti i file sull’hosting del cliente solo quando hai finito.

Ovviamente fra le due opzioni, la migliore è la seconda. Tuttavia, non è ancora il modo migliore per lavorare. E ti spiego perché.

Probabilmente stai inserendo i siti dei tuoi clienti all’interno di cartelle separate dentro Applications/MAMP/htdocs.

E per accedervi devi digitare sulla barra degli indirizzi del tuo browser qualcosa come http://localhost/cartella_cliente/.

Ecco, questo funziona, ma non è il modo più elegante di lavorare e potrebbe creare qualche piccolo intoppo nella realizzazione del sito al quale stai lavorando.

Lavorare in questo modo è come se il tuo sito avesse questo indirizzo: http://www.nomedominio.it/cartella_sito/. Non è proprio il massimo non credi?

Quindi come ci può venire in aiuto il virtual host? Cercherò di spiegartelo in maniera molto semplice, le parole complesse le lascio a Wikipedia.

È una configurazione di MAMP (che è a tutti gli effetti un server web come quello che ospita il tuo sito online) che ti permette di creare un nome di dominio fittizio per gestire ed accedere più facilmente al tuo sito in lavorazione.

Quindi, una volta che avrai configurato correttamente il tuo virtual host, potrai accedere al sito in questione digitando un indirizzo simile a http://sito_cliente.dev (potrai decidere tu in quale cartella inserire il sito) piuttosto che http://localhost/sito_cliente/.

Un altro aspetto fondamentale di questa configurazione è la root del sito, ovvero la cartella radice del server. La root è molto importante in quanto è la cartella dove vengono cercati i file quando vengono utilizzati link assoluti senza, però, la parte del nome a dominio (es. /wp-content/plugins/hello.php).

Questo tipo di link, con il “/” messo all’inizio, porta alla cartella principale del sito, ovvero la root.

Ti faccio qualche esempio:

Esempio http://localhost/sito_cliente/

In questo caso tutti i tuoi siti sono all’interno della cartella htdocs. Allo stesso tempo la root è sempre htdocs. Quindi se, all’interno del sito, avessi un link assoluto tipo /wp-content/uploads/2017/03/immagine.jpg, questo non funzionerebbe.

Non funziona perché andrebbe a cercare il file nella root ovvero: http://localhost/wp-content/uploads/2017/03/immagine.jpg. Mentre il file si trova in http://localhost/sito_cliente/wp-content/uploads/2017/03/immagine.jpg.

Esempio http://sito_cliente.dev

In questo caso la directory principale è esattamente quella dove risiede il nostro sito e il problema non sussiste. Vedremo fra poco come funziona il tutto.

Ora vediamo nei dettagli come fare ad impostare il virtual host. Nello specifico ti spiegherò come farlo se utilizzi macOS. Più avanti aggiornerò questo articolo per aiutare anche gli utenti Windows.

Creare un virtual host in 8 step

MAMP ha una versione pro che ti permette di creare virtual host dalla sua interfaccia grafica senza mettere mano al codice.

Se non hai voglia di spendere 39€ allora continua a leggere, è sufficiente fare delle piccole modifiche ad alcuni file ed il gioco è fatto.

Step 1 (da fare una sola volta)

Se ancora non l’hai fatto, scarica ed installa Mamp. Lo puoi trovare qui.

Step 2 (da fare una sola volta)

Ti consiglio di scaricare anche BBEdit, un editor di testo che ti permette di modificare alcuni file in qualità di amministratore senza dover per forza utilizzare il terminale del mac. Lo puoi scaricare da qui.

Step 3 (da fare una sola volta)

Ora dobbiamo abilitare i virtual host dal file di configurazione di Mamp. Il file che ci interessa si trova in Applications/MAMP/conf/apache/httpd.conf.

Aprilo con BBEdit.

È un file piuttosto corposo quindi ti consiglio di fare una ricerca all’interno per “Virtual Hosts”. Le righe che ci interessano dovrebbero essere circa le 584-585.

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

In questo tipo di file, il codice commentato inizia con un cancelletto (#), quindi in questo caso, quello che dobbiamo fare è rimuovere il cancelletto (come nell’esempio sottostante) e salvare.

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

Questi primi tre step vanno fatti solo la prima volta. In futuro, quando vorrai aggiungere altri virtual host per siti diversi, potrai saltare direttamente allo step 4.

Step 4

Ora bisogna modificare il file Macintosh HD/private/etc/hosts. Apri BBEdit. Dal menu file, scegli “Open File by Name…”.

Nella finestra, che compare, scrivi /private/etc/hosts e poi premi invio o clicca su Open.

Step 5

Una volta aperto il file di sistema hosts, dovresti trovare all’incirca il seguente codice:

##
# 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

Posiziona il cursore alla fine dell’ultima riga e premi invio. Ti apparirà una finestra che ti chiederà se vuoi sbloccare il file hosts. Clicca su “Unlock”.

Step 6

Sulla prossima riga inserisci il seguente codice:

127.0.0.1	nomesito.dev

127.0.0.1 rappresenta l’ip locale del tuo computer, mentre nomesito.dev è il dominio fittizio che assocerai al tuo sito.

In pratica, con questa riga di codice, stiamo dicendo al nostro computer: ogni volta che qualcuno digita nomesito.dev nella barra degli indirizzi del browser lo devi portare all’ip 127.0.0.1.

Ovviamente dovrai sostituire nomesito.dev con il nome del tuo sito.

Quando hai finito salva il file con CMD+S oppure da File -> Save.

A questo punto il sistema ti chiederà di inserire la tua password. Inseriscila e premi invio.

Step 7

A questo punto, se il server di MAMP è acceso, digitando http://nomesito.dev nella barra degli indirizzi dovresti essere in grado di vedere il contenuto della cartella htdocs (/Applications/MAMP/htdocs).

Questo succede perché non abbiamo ancora impostato alcun virtual host e l’indirizzo ip 127.0.0.1 punta al server locale, la cui directory principale è proprio htdocs.

Per creare il virtual host, quindi, devi aprire il file /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf.

Copia ed incolla questo codice alla fine della pagina. Fra poco ti spiegherò a che cosa serve.

<VirtualHost *:80>
    DocumentRoot "/Users/eduard/Desktop/siti/nome_sito/www"
    ServerName nome_sito.dev
    ErrorLog "/Users/eduard/Desktop/siti/nome_sito/logs/error.log"
    CustomLog "/Users/eduard/Desktop/siti/nome_sito/logs/access.log" common
    
    <Directory "/Users/eduard/Desktop/siti/nome_sito/www">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>
</VirtualHost>

DocumentRoot
Questa riga indica la cartella all’interno del tuo computer dove risiederà il sito web.

ServerName
Qui devi indicare che cosa bisogna digitare nella barra degli indirizzi per accedere al sito che devi sviluppare.

ErrorLog e CustomLog
Con queste righe indichiamo il percorso dove salvare i file di log del virtual host. Possono tornare molto utili quando si verificano degli errori nel web server e dobbiamo capire come risolvere.

Il blocco Directory è una configurazione che permette il corretto funzionamento dei permalinks di WordPress. Anche qui è necessario indicare la cartella dove risiede il sito.

Come puoi vedere dall’esempio sopra, non è necessario che i file dei tuoi siti risiedano per forza all’interno della cartella htdocs.

Io ti suggerisco di utilizzare una struttura come quella nella figura seguente che ti permette di essere più organizzato:

All’interno della cartella “www” inserirai i file del sito, in “logs” verranno creati i log del server, mentre “materiale” la puoi utilizzare per tutto ciò di cui hai bisogno per portare a termine il tuo progetto.

Ti consiglio di non nominare le cartelle con degli spazi all’interno in quanto il server potrebbe non funzionare correttamente.

Step 8

Per attivare il nuovo virtual host, ora devi riavviare MAMP. Una volta fatto, e se hai seguito tutti i passaggi correttamente, dovresti riuscire ad accedere al sito in locale digitando http://nome_sito.dev nella barra degli indirizzi.

Come risolvere eventuali problemi che possono insorgere durante la creazione del tuo virtual host

Bravo, se sei arrivato fino a questo punto, vuol dire che sei riuscito a configurare con successo il tuo primo virtual host. Se così non fosse, qui di seguito, cercherò di spiegarti come risolvere alcuni problemi comuni.

Cosa fare se, dopo aver cliccato su “Start Servers” all’interno di MAMP, il server MySQL parte mentre quello Apache no? (vedi figura)

In questo caso ti consiglio di verificare attentamente il file /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf e controllare che non ci siano degli errori di battitura. MAMP è molto delicato ed anche una sola lettera fuori posto può impedire il corretto funzionamento del tuo web server.

Assicurati, inoltre, che le cartelle che hai indicato all’interno del virtual host siano state create in precedenza.

Come creare un altro virtual host?

Se vuoi lavorare ad un altro sito web e di conseguenza creare un nuovo virtual host, ti sarà sufficiente seguire di nuovo gli step dal numero 4 al numero 8. Ricordati che non c’è limite ai virtual host che puoi creare.

Conclusioni

Spero che il mio articolo ti sia piaciuto e ti permetta di migliorare il tuo modo di lavorare.

Se hai ancora qualche dubbio, qualche passaggio non ti è molto chiaro o ti sei imbattuto in un ostacolo e non sai come uscirne, fammelo sapere nei commenti e per quanto mi è possibile cercherò di darti una mano.

Ho scritto altri articoli che potrebbero tornarti utili. Eccone alcuni:

• Photoshop per front end developers
• Obiezioni dei clienti sul riutilizzo del know how e del codice prodotto
• Come trovare clienti per te che sei un web developer freelance
• Perché ho scelto SiteGround per il mio sito e quelli dei miei clienti
• Ngrok, come mostrare al cliente il sito in locale sul proprio computer
• 100/100 su Pagespeed Insights con il tuo sito WordPress