Come preparare un ambiente di sviluppo PHP completo su Windows 10 (WSL2 + Docker + Devilbox + XDebug) - Step 5

Come sviluppiamo i progetti digitali in Masiorama? Con la parte di oggi si conclude il nostro tutorial su come replicare il nostro stesso ambiente di sviluppo sui vostri PC: parliamo di Visual Studio Code su Windows 10 in remoto tramite WSL2.
di
Marco Masi

Configurare sul proprio PC un ambiente di sviluppo completo e flessibile

Eccoci giunti allo step 5 del nostro tutorial: come usare VSCODE su Windows 10 e WSL2.

Visual Studio Code 1 35 icon svg
Il logo di Visual Studio Code.

Nell ultime settimane, con le parti precedenti di questa guida, abbiamo preparato il terreno per quest'ultimo step, quello che più spesso ha a che fare con il nostro lavoro quotidiano, cioè l'uso di un editor di codice e di tutti gli strumenti di sviluppo configurati per lavorare sui nostri progetti in PHP (e non solo).

Se finora infatti abbiamo installato tanti software da riga di comando (WSL, Ubuntu, Docker, Docker Compose, Devilbox), adesso è giunto il momento di lavorare con un'interfaccia grafica meno spartana di quanto visto finora tramite il terminale.

Sfrutteremo infatti quanto preparato con l'uso di un IDE (ambiente di sviluppo integrato) molto usato e gratuito (che non guasta mai), cioè Visual Studio Code (VSCode per brevità), un software creato da Microsoft.

Perché la scelta di VSCode

La scelte di VSCode è totalmente soggettiva e aderente alle mie necessità: esistono infatti decine di soluzioni alternative (gratuite e a pagamento), ma nessuna, secondo la mia opinione, che raggiunga il livello di VSCode per funzionalità e flessibilità a costo zero (almeno fino ad oggi).

Installare Visual Studio Code su Windows 10

Il software su cui passeremo la stragrande maggioranza del nostro tempo da sviluppatori.

Contrariamente a quanto fatto finora non installeremo VSCode su WSL2, bensì direttamente su Windows 10, poiché faremo in modo che il nostro editor sia in grado di interfacciarsi con WSL e tutti gli strumenti presenti in esso.

Per avere VSCode sul proprio PC basta navigare sulla pagina ufficiale di download di Visual Studio Code, procedere al download e alla successiva installazione. Tutto molto semplice.

Una volta installato il software (questione di pochi istanti) servirà installare alcuni moduli utili a permettere a VSCode di dialogare, come detto pocanzi, direttamente con WSL2 e con gli strumenti in esso contenuti.

I moduli necessari sono:

  • Remote - WSL, che permette di aprire qualunque cartella di WSL come se fosse una normale cartella navigabile in Esplora Risorse di Windows).
  • Remote Containers, che permette di aprire qualunque cartella o repository all'interno di container di Docker,

Installare i plugin è semplicissimo: basta infatti, all'interno dell'editor, cliccare sull'icona dedicata nel menu laterale e effettuare la ricerca dei moduli per nome.

Vscode extensions
Selezionare e installare le estensioni di VSCode.

Da questo momento VSCode sarà in grado di rilevare la presenza di WSL2 e potrà interagire da remoto con Ubuntu, permettendoci di usare tutto quello che abbiamo predisposto nelle scorse settimane.

Clicchiamo sull'icona verde in basso a sinistra e selezioniamo "Open Folder in WSL" e navighiamo selezionando la cartella development.

VSCode può anche aprire un terminale WSL permettendoci di eseguire comandi shell direttamente dall'interno del nostro editor tramite il menu Terminal -> New Terminal.

Vscode terminal
VSCode connesso da remoto a Ubuntu tramite WSL (da notare l'etichetta verde in basso a sinistra).

Adesso è tutto pronto, ed è giunto il momento di creare il nostro primo progetto PHP!

Creare un progetto in PHP nel nostro ambiente di sviluppo

Prepariamo una cartella dedicata dentro cui salvare i file sorgenti del progetto.

Creare un nuovo progetto in Devilbox

La creazione di un nuovo progetto PHP in modo che sia disponibile su Devilbox (installato su Ubuntu via WSL) è estremamente semplice, e possiamo farlo direttamente da Windows.

Assicuriamoci prima però che Devilbox sia spento.

Accediamo tramite Esplora Risorse di Windows 10 alla struttura di cartelle di WSL (tipicamente basta inserire nella la barra di navigazione

\\wsl$ 

e poi navigare all'interno cercando la home del nostro utente, nel mio caso:

\\wsl$\Ubuntu-20.04\home\masiorama\development

Fatto questo procediamo come segue:

  • creiamo all'interno una cartella con il nome del progetto che preferiamo, ad esempio hello-world (è importante non inserire spazi),
  • all'interno di questa cartella aggiungiamo anche un'ulteriore cartella cui daremo il nome htdocs.
  • infine, tramite VSCode, apriamo la cartella appena creata e creiamo un file denominato index.php, al cui interno scriviamo il codice che segue.
php
<html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html>
Hello world!

I semplici passi descritti poco sopra nascondono delle convenzioni di Devilbox che ci permetteranno di dare una uniformità di struttura a tutti i nostri progetti e permetteranno a Devilbox, una volta attivo, di sfruttare alcuni automatismi molto comodi.

Devilbox creerà infatti per noi un virtual host di progetto che ci permetterà di isolarlo accedendovi via browser tramite un nome di dominio locale dedicato.

Come ultimo step serve rendere disponibile su Windows il dominio locale appena creato salvandolo sul file hosts di Windows, che si può trovare navigando nel percorso:

C:\Windows\System32\drivers\etc

Servirà aprire il file con privilegi d'amministratore e poi modificarlo aggiungendo la seguente riga tramite cui istruiamo il sistema operativo ad accettare richieste locali dal dominio indicato:

127.0.0.1 hello-world.loc

Ora possiamo avviare (o riavviare) WSL e attivare Devilbox con lo STACK che abbiamo deciso di usare per il progetto.

Fatto! Verifichiamo ora che tutto funzioni.

Grazie al nome della nostra cartella (hello-world nel mio caso), verrà creato un virtual host con un server name ereditato dal nome di cartella, che permetterà la navigazione via browser all'indirizzo

http://hello-world.loc

mostrerà a schermo Hello World.

Hello world
Accedere via browser al nostro progetto PHP.

Nota: all'avvio di WSL viene sempre sincronizzato il file hosts di Windows con il corrispettivo di Ubuntu, cosa necessaria perché il tutto funzioni a dovere, quindi in caso non si riesca a visualizzare a browser il proprio progetto bisogna ricordarsi di riavviare WSL.

Fatto!

4 Step per lavorare sul proprio progetto

Per ricapitolare, da adesso in poi per lavorare sul nostro progetto ci basterà:

  • accedere a WSL e attivare il servizio di Docker via Terminal
  • attivare Devilbox via Terminal,
  • aprire VSCode puntando alla nostra cartella di progetto,
  • modificare i nostri file sorgente php,
  • divertirci!

XDebug: Debuggare dentro WSL con VSCODE

Il passo successivo (abbastanza grande per la verità e totalmente opzionale), è l'utilizzo di un debugger che permetta di analizzare il codice durante l'esecuzione dello stesso. È molto utile nel caso in cui il nostro codice sia troppo complesso e abbia dei bug che non riusciamo a risolvere.

Si tratta di un'operazione comune per i professionisti, molto meno invece per chi approccia lo sviluppo come hobby, nel tempo libero.

Grazie a Devilbox, contrariamente al passato, è diventato semplice attivare uno dei debugger PHP più famosi, XDebug, e usarlo per debuggare il nostro codice.

Ci servirà installare un'ulteriore estensione di VSCode:

A seguire creiamo nella nostra cartella di progetto (hello-world) la cartella .vscode e al suo interno creiamo un file denominato launcher.json, al cui interno inseriamo il codice che segue:

{
 "version": "0.2.0",
 "configurations": [
 {
 "name": "Listen for XDebug",
 "type": "php",
 "request": "launch",
 "port": 9003,
 "pathMappings": {
 "/shared/httpd/hello-world": "${workspaceRoot}/htdocs"
 }
 }
 ]
} 

Da notare come serva indicare il nome della cartella del nostro progetto nella sezione PathMappings per permettere a VSCode di interrogare XDebug, disponibile dentro Devilbox ma non ancora attivo.

Procediamo quindi alla configurazione di XDebug su Devilbox.

Dato che XDebug si aggancia direttamente a PHP, ci serve attivarlo sulla nostra versione di PHP (e su tutte le versioni di PHP che si vogliono usare), sfruttando il sistema di configurazione di Devilbox.

Nel nostro caso, dato che vogliamo attivare XDebug per PHP 7.4 ci serve creare il file xdebug.ini nel path:

~/devilbox/cfg/php-ini-7.4/xdebug.ini

e inserire all'interno la seguente configurazione:

[PHP]
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9003
xdebug.client_host = docker.for.lin.host.internal
xdebug.idekey = VSCODE
xdebug.log = /var/log/php/xdebug.log

Avendo modificato un file di configurazione ci serve spegnere e riavviare Devilbox con i comandi che ben conosciamo dai precedenti step del tutorial.

Da adesso in poi sarà possibile usare il debugger integrato dentro VSCode per interfacciarsi da remoto con XDebug dentro Devilbox!

Nota importante: il debugger sembra non funzionare se nel progetto sono inclusi link simbolici (così come ad esempio suggerito nella documentazione di Devilbox per puntare alla webroot di progetto), e in tal caso serve rimuoverli prima di procedere al debugging.

Bonus

Come piccola aggiunta, aggiungiamo anche un modulo che faccia code formatting per PHP al posto nostro, per poter avere il codice sempre pulito e leggibile.

  • Installiamo l'estensione PHP Intelephense,
  • dentro VSCode, nel menu delle estensioni, inseriamo nel campo di ricerca @builtin php e disabilitiamo PHP Language Features (non PHP Language Basics),
  • riavviamo VSCode.

Da adesso usando lo shortcut "ALT + Shift + F" saremo in grado di formattare automaticamente il nostro codice.

Pronti a sviluppare via @Glenn Carstens-Peters - Unsplash
Siamo pronti a sviluppare! - via @Glenn Carstens-Peters - Unsplash

Si conclude così questo tutorial, nella speranza che se non utile sia stato interessante da leggere.

Come al solito, qualora qualcuno fosse interessato ad avere maggiori dettagli o un aiuto di qualunque tipo può scriverlo nella sezione dei commenti, disponibile a fondo pagina.

Alla prossima e Happy Coding!

Commenti

Scrivi un commento e condividi il tuo pensiero con noi!