Aufgabe 3: Nginx Webserver

Ziel

Du erstellst einen Nginx Webserver mit Docker Compose und hostest eine eigene HTML-Seite.

Aufgaben

1. Projektstruktur erstellen

mkdir -p nginx-lab/html
cd nginx-lab

2. Eine einfache HTML-Seite erstellen

Erstelle html/index.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docker Lab</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 { color: #333; }
        .info {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        code {
            background: #e0e0e0;
            padding: 2px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Willkommen zum Docker Lab!</h1>
        <p>Diese Seite wird von einem <strong>Nginx Container</strong> ausgeliefert.</p>

        <div class="info">
            <h3>Container Info</h3>
            <ul>
                <li>Webserver: <code>nginx:alpine</code></li>
                <li>Port: <code>8080</code></li>
                <li>Document Root: <code>/usr/share/nginx/html</code></li>
            </ul>
        </div>

        <p>Bearbeite diese Datei und lade die Seite neu – die Änderungen erscheinen sofort!</p>
    </div>
</body>
</html>

3. Docker Compose Datei erstellen

services:
  nginx:
    image: nginx:alpine
    container_name: nginx-lab
    restart: unless-stopped
    ports:
      - "8080:80"
    volumes:
      - ./html:/usr/share/nginx/html:ro

4. Container starten

docker compose up -d

5. Im Browser öffnen

Öffne http://localhost:8080

Du solltest deine HTML-Seite sehen!

6. Live-Änderungen testen

Ändere etwas in html/index.html und lade den Browser neu – die Änderung erscheint sofort (kein Container-Neustart nötig).

7. Weitere Seiten hinzufügen

Erstelle html/about.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Über uns</title>
</head>
<body>
    <h1>Über diese Seite</h1>
    <p>Dies ist eine weitere Seite auf unserem Nginx Server.</p>
    <a href="/">Zurück zur Startseite</a>
</body>
</html>

Aufruf: http://localhost:8080/about.html

8. Nginx Logs anschauen

# Access Logs (wer hat was aufgerufen)
docker compose logs nginx

# Live verfolgen
docker compose logs -f nginx

9. Container stoppen

docker compose down

Bonus: Custom Nginx Konfiguration

Für mehr Kontrolle kannst du eine eigene nginx.conf einbinden:

mkdir -p nginx-lab/conf

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # Gzip Komprimierung
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;

    # Cache für statische Dateien
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 7d;
    }

    # Error Pages
    error_page 404 /404.html;
}

Erweiterte docker-compose.yml:

services:
  nginx:
    image: nginx:alpine
    container_name: nginx-lab
    restart: unless-stopped
    ports:
      - "8080:80"
    volumes:
      - ./html:/usr/share/nginx/html:ro
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf:ro

Fragen zur Reflexion

Was ist der Unterschied zwischen nginx:latest und nginx:alpine?
Warum verwenden wir :ro (read-only) beim Volume?
Was passiert, wenn du Port 8080 auf 80 änderst?
Wie könntest du HTTPS (SSL) hinzufügen?

Troubleshooting

”Port 8080 is already in use”

ports:
  - "8081:80"  # Anderen Port verwenden

Seite zeigt “403 Forbidden”

Prüfe ob html/index.html existiert:

ls -la html/

Änderungen werden nicht angezeigt

Browser-Cache leeren: Ctrl+Shift+R (Windows/Linux) oder Cmd+Shift+R (Mac)

Nächste Schritte

Zurück zur Lab-Übersicht →