🧪 Pràctica: Configuració d’un entorn de desenvolupament amb VirtualHosts a Apache2

<div style="width: 30%; margin-left: auto;"> ![](https://hackmd.io/_uploads/HJiR4eGJT.png) ![image](https://hackmd.io/_uploads/By3ai4Bolx.png) </div> <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Llicència de Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />Aquesta obra està subjecta a una llicència de <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Reconeixement-CompartirIgual 4.0 Internacional de Creative Commons</a> # Pràctica: Configuració d’un entorn de desenvolupament amb VirtualHosts a Apache2 ![image](https://hackmd.io/_uploads/SJcrrxRgWx.png) Ets l’administrador/a d’un equip de desenvolupament que necessita crear un **entorn web local** per treballar en una futura aplicació composta per: - Un **lloc web principal** d’accés públic, amb interfície gràfica: **www.localhost** - Un **servei d’API REST** intern utilitzat per la web: **api.localhost** El departament et demana configurar aquest entorn local en un servidor GNU/Linux utilitzant **Apache2** i VirtualHosts. L’objectiu és que els desenvolupadors puguin treballar amb els dos serveis com si fossin dominis independents. ## Configurar dos **servidors virtuals Apache** al mateix sistema: ### 🔹 Host 1: www.localhost - **DocumentRoot:** `/var/www/www` - Ha de mostrar una pàgina HTML amb el text: *"Això és el lloc web principal (www.localhost)"* ```html= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pàgina principal</title> </head> <body> <p>Això és el lloc web principal (www.localhost)</p> </body> </html> ``` ### 🔹 Host 2: api.localhost - **DocumentRoot:** `/var/www/api` - Ha de mostrar una pàgina HTML amb el text: *"Això és el servei d’API (api.localhost)"* ```html= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>API</title> </head> <body> <p>Això és el servei d’API (api.localhost)</p> </body> </html> ``` Els dos llocs han de ser accessibles amb un navegador web local. Lliureu un document PDF amb la explicació i les captures necessàries per a demostrar la realització de l'activitat. ## Requisits previs ![image](https://hackmd.io/_uploads/ryBCNlAgbx.png) - Ubuntu mínim versió 20.04 - Apache2 instal·lat: ```bash sudo apt update sudo apt install apache2 ``` ## Desenvolupament de la pràctica pas a pas ![image](https://hackmd.io/_uploads/HkJqseAebg.png) 1. Creació dels directoris necessaris al host. 2. Creació dels fitxers de configuració. Es valorarà la creació d'un fitxer per a cada virtual host. És una bona pràctica que ens permet activar i desactivar cada subdomini de manera individual. 3. Activar els nous subdominis alhora que desactivem el fitxer de configuració per defecte. 4. Verificar la configuració abans de reiniciar el servidor web. Hem de minimitzar al màxim els temps que no estem oferint servei. 5. Comprovació del bon funcionament. 6. Assigna la següent pàgina d'error personalitzada per al domini 'www.localhost'. ```html= <!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <title>Pàgina no trobada - www.localhost</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f8f8; color: #333; text-align: center; padding-top: 50px; } .container { max-width: 600px; margin: auto; } img { max-width: 100%; border-radius: 10px; margin-bottom: 20px; } h1 { font-size: 3em; margin-bottom: 10px; } p { font-size: 1.2em; } a { color: #007BFF; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } </style> </head> <body> <div class="container"> <img src="https://http.cat/404" alt="Mitxi no trobat"> <h1>404</h1> <p><strong>Ups! Aquesta pàgina no existeix.</strong></p> <p>Sembla que t’has perdut. No pateixis, fins i tot els millors navegadors s’equivoquen.</p> <p><a href="http://www.localhost">Tornar a l’inici</a></p> </div> </body> </html> ```