Anatomia di una Web App
(Parte 1 - Web Servers)
Leonardo Tamiano
Overview Architetturale
Tra tutti i servizi introdotti dall'informatica, il Web è senza dubbio quello che singolarmente ha avuto il maggior impatto nel mondo moderno.
Oramai è possibile accedere a quasi tutte le tipologie di informazioni tramite un browser.
I motori di ricerca sono diventati lo strumento principale utilizzato per soddisfare, nel bene e nel male, ogni nostro dubbio o curiosità.
La programmazione web è il contesto lavorativo più popolare e più ricompensato tra tutti i possibili lavori che hanno a che fare con l'informatica.
Ma quali sono i componenti principali di una applicazione web?
Sono tanti i layers tecnologici associati ad una applicazione web dinamica.
Alcuni sono associati al server:
- Un web server, utilizzato per scambiare files, principalmente pagine html, tra il server e i clients tramite il protocollo http.
- Un backend engine, utilizzato per generare le pagine html dinamiche inviate dal web server ai vari clients.
- Un database, utilizzato per memorizzare in modo persistente le informazioni critiche fornite dall'applicazione.
Sono tanti i layers tecnologici associati ad una applicazione web dinamica.
Alcuni sono associati al client:
- Un browser, utilizzato per visualizzare le pagine html ritornate dal server.
- Un frontend engine, contenuto nel browser e utilizzato per rendere la pagina html dinamica agli occhi dell'utente.
Graficamente,
Cerchiamo adesso di capire in più dettaglio il ruolo di ciascuno di questi componenti, partendo in particolare dai web servers.
Tutti i comandi mostrati fanno riferimento alla seguente versione di
ubuntu.
Web Server
Il compito principale di un web server consiste nel mettere a disposizione delle risorse a tutti i clients in giro per il mondo.
Il mezzo sottostante che si utilizza per mettere in contatto i server web e i clients web è la rete internet.
Per poter comunicare però server e client necessitano di parlare lo stesso linguaggio.
Protocollo HTTP
Il linguaggio principale utilizzato nel web è il protocollo HTTP, abbreviazione di "Hypertext Transfer Protocol".
Il protocollo HTTP definisce
- Il formato dei messaggi che client e server si possono inviare per comunicare.
- Come questi messaggi devono essere interpretati da client e server.
I messaggi definiti dal protocollo HTTP sono semplici da leggere, in quanto non contengono dati in binario, ma sono scritti in plaintext, ovvero utilizzando parole riprese dal linguaggio comune.
Utilizzando il comando curl con la flag --verbose è possibile sia
effettuare delle richieste HTTP, che vedere quali sono i formati
delle richieste e delle risposte.
Ad esempio,
curl --verbose https://leonardotamiano.xyz > /dev/null
osserviamo la seguente richiesta,
GET /index.html HTTP/1.1 Host: leonardotamiano.xyz User-Agent: curl/7.77.0 Accept: */*
a cui il server risponde,
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 26 Aug 2021 22:11:47 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 28869
Last-Modified: Wed, 25 Aug 2021 20:55:33 GMT
Connection: keep-alive
ETag: "6126ae45-70c5"
Accept-Ranges: bytes
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.83.1" />
<title>Leonardo Tamiano's Cyberspace</title>
...
</html>
È possibile leggere tutti i dettagli relativi alle varie versioni del protocollo HTTP nei famosi documenti noti con il nome Request For Comments (RFC).
Il linguaggio HTML
Il linguaggio html (hypertext-markup-language) è un linguaggio di markup e viene utilizzato per rappresentare
- Il contenuto del documento.
- La struttura del documento.
I documenti html infatti sono documenti strutturati ed ipertestuali.
<!DOCTYPE html>
<head>
<title> Titolo Pagina </title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta name="generator"
content="Org-mode">
<meta name="author"
content="Leonardo Tamiano">
</head>
<body>
<div id="content">
<div id="main-content">
<h1> Headline level 1 </h1>
<p> This is a paragraph! </p>
<a href="https://google.com"> this is a link! </a>
</div>
<div id="footer">
<p class="author"><b>Author</b>: Leonardo Tamiano</p>
</div>
</div>
</body>
</html>
I browsers sono dei programmi in grado di leggere i documenti html e processarli in modo da renderli accessibili agli utenti finali.
Uniform Resource Locators (URLs)
Per specificare la risorsa a cui si vuole accedere nel web, il client utilizza un URL (Uniform Resource Locator).
Un URL specifica:
- Il server di interesse.
- Il protocollo che si vuole utilizzare.
- Il particolare file, nel server di interesse.
Alcuni esempi di URLs:
https://leonardotamiano.xyz https://leonardotamiano.xyz/index.html https://leonardotamiano.xyz/ppa/README.html https://leonardotamiano.xyz:80/index.html https://leonardotamiano.xyz:90/index.html
Per poter processare questi URLs e trovare gli effettivi server però è necessario utilizzare anche il protocollo DNS (Domain Name System).
Il DNS si occupa di tradurre i nomi simboli in indirizzi IP.
leonardotamiano.xyz -----> 45.76.93.206
Riassumendo, per il funzionamento di un solo web server sono necessarie le seguenti tecnologie:
- Protocolli
- HTTP, DNS, TCP, IP
- Linguaggio HTML
- Browser
- Web Server
- Internet
- Sistema Operativo
Apache2
Apache2 è uno dei più importanti web servers open-source, ed è
stato fondamentale per lo sviluppo del web.
Per installarlo possiamo procedere come segue
sudo apt update
sudo apt install apache2
Una volta installato lo possiamo attivare
sudo service apache2 start
Per verificare se è stato attivato correttamente possiamo andare
nel seguente URL: http://localhost
A questo punto ci possiamo chiedere:
come possiamo esporre pubblicamente un nuovo file?
Per rispondere a questa domanda è necessario introdurre il concetto della root directory nel contesto dei web servers.
La root directory è una cartella del sistema operativo su cui gira il web server.
Il web server espone ai vari clients proprio le risorse che si trovano nella root directory, o in una sotto-cartella che passa per la root directory.
La root directory di default per apache2 è
/var/www/html
Se vogliamo esporre pubblicamente un nuovo file, dobbiamo copiarlo nella root directory del web server che stiamo configurando.
Nel nostro caso, eseguendo
echo "Hello World" > /var/www/html/esempio.html
creiamo una nuova risorsa, che può essere vista andando al seguente
url http://localhost/esempio.html
Il limite delle pagine statiche
Tramite un web server siamo in grado di fornire ai vari clients delle risorse.
Le risorse che possiamo offrire così però sono risorse statiche, ovvero non cambiano a seconda di chi sta richiedendo la risorsa.
Tutti i client vedono le stesse risorse.
Questo pone dei limiti rispetto a ciò che possiamo fare con delle pagine web.
Per cercare di superare questi limiti è stata introdotta la Common Gateway Interface (cgi), che serve per collegare il server a degli scripts presenti nel file system del server.
Questi scripts possono essere utilizzati per rendere dinamico il contenuto offerto dal sito (1/4)
Questi scripts possono essere utilizzati per rendere dinamico il contenuto offerto dal sito (2/4)
Questi scripts possono essere utilizzati per rendere dinamico il contenuto offerto dal sito (3/4)
Questi scripts possono essere utilizzati per rendere dinamico il contenuto offerto dal sito (4/4)
Col passare del tempo sono stati introdotti dei veri e propri linguaggi, come il linguaggio php, per effettuare questa generazione dinamica della pagine.
L'esempio di prima in php (1/3)
L'esempio di prima in php (2/3)
L'esempio di prima in php (3/3)
Le backend engine servono proprio per questo: generare delle pagine il cui contenuto è dinamico, ovvero cambia a seconda di chi sta facendo la richiesta.