Quartz 4

Esempio

3 min read

tags: docker esempio

Per creare una pagina web con HTML, CSS e JavaScript all’interno di un Docker container, possiamo configurare un Dockerfile che include un server web leggero, come Nginx o Apache, per servire i file della pagina web. Vediamo un esempio completo usando Nginx:

Passaggi per Creare e Servire una Pagina Web in Docker

  1. Crea la Struttura della Directory:

    • Crea una directory principale, e al suo interno, crea una cartella per i file web e un Dockerfile.

    plaintext

    progetto_web/ ├── Dockerfile └── web/ ├── index.html ├── style.css └── script.js

  2. Scrivi il Codice della Pagina Web:

    • Crea i file index.html, style.css e script.js all’interno della cartella web/.

    index.html:

    html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Login</h2> <form id="loginForm"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <button type="submit">Login</button> </form> <script src="script.js"></script> </body> </html>

    style.css:

    css

    Copy code

    body { font-family: Arial, sans-serif; text-align: center; } form { display: inline-block; margin-top: 20px; } label, input { display: block; margin: 5px 0; }

    script.js:

    javascript

    Copy code

    document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); alert("Form submitted!"); });

  3. Crea il Dockerfile:

    • Nel Dockerfile, configuriamo Nginx per servire questi file web.

    Dockerfile:

    Dockerfile

    Copy code

    # Usa l'immagine base di Nginx FROM nginx:latest # Copia i file della pagina web nella directory predefinita di Nginx COPY web/ /usr/share/nginx/html/ # Espone la porta 80 per accedere al server EXPOSE 80

    • Questo Dockerfile:
      • Usa nginx:latest come immagine base.
      • Copia i file della pagina web nella directory /usr/share/nginx/html/, che è la directory predefinita dove Nginx cerca i file da servire.
      • Espone la porta 80 per accedere al sito web.

  4. Costruisci l’Immagine Docker:

    • Nella directory principale (progetto_web), esegui il comando per costruire l’immagine Docker:

    bash

    Copy code

    docker build -t web_server .

  5. Avvia il Container:

    • Una volta che l’immagine è stata costruita, puoi avviare un container basato su di essa e mapparla alla porta locale per accedere al sito dal browser.

    bash

    Copy code

    docker run -d -p 8080:80 web_server

    • Questo comando mappa la porta 80 del container alla porta 8080 del tuo computer. Così, puoi visualizzare la pagina web aprendo http://localhost:8080 nel browser.

  6. Visualizza la Pagina Web:

    • Apri un browser e vai su http://localhost:8080. Dovresti vedere la tua pagina di login in esecuzione all’interno del Docker container.

Riepilogo Comandi

  1. Build dell’immagine Docker:

    bash

    Copy code

    docker build -t web_server .

  2. Run del container:

    bash

    Copy code

    docker run -d -p 8080:80 web_server

  3. Visualizza la pagina: Apri http://localhost:8080 nel browser.

Con questa configurazione, hai un ambiente Docker che serve una pagina HTML statica con Nginx, perfetto per testare o condividere una semplice applicazione web

Graph View