init

74826c06 · Adrian Stöckli · 74826c06 · 74826c06 · 74826c06 · 74826c06
Commit 74826c06 authored 2 months ago by Adrian Stöckli
--- a/Dockerfile
+++ b/Dockerfile
+# Verwende Nginx als Basis-Image
+FROM nginx:alpine
+
+# Kopiere die Website-Dateien in das richtige Verzeichnis
+COPY index.html /usr/share/nginx/html/index.html
+COPY style.css /usr/share/nginx/html/style.css
+COPY pic1.jpg /usr/share/nginx/html/pic1.jpg
+COPY pic2.jpg /usr/share/nginx/html/pic2.jpg
+COPY nginx.conf /usr/nginx/nginx.conf
+
+# Exponiere Port 80 für den Webserver
+EXPOSE 80
+
+# Starte Nginx als Hauptprozess
+CMD ["nginx", "-g", "daemon off;"]
--- a/docker-compose.yml
+++ b/docker-compose.yml
+version: '3.8'
+
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "80:80"
+    # Since files are copied in Dockerfile, we only need to mount nginx.conf
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    networks:
+      - web-network
+
+networks:
+  web-network:
+    driver: bridge
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bilder Galerie</title>
+
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f8ff;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        header {
+            background-color: #007BFF;
+            color: white;
+            text-align: center;
+            padding: 50px 0;
+        }
+
+        header h1 {
+            font-size: 3em;
+            margin: 0;
+        }
+
+        .container {
+            flex-grow: 1;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .image-section {
+            text-align: center;
+            margin-top: 40px;
+        }
+
+        .image-section img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .text-section {
+            margin-top: 40px;
+            text-align: center;
+        }
+
+        .text-section p {
+            font-size: 1.2em;
+            line-height: 1.6;
+            color: #555;
+        }
+
+        footer {
+            background-color: #333;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Willkommen zu meiner BilderGalerie</h1>
+    </header>
+
+    <div class="container">
+        <div class="image-section">
+            <img src="./pic1.jpg" alt="Bild1">
+        </div>
+        <div class="image-section">
+            <img src="./pic2.jpg" alt="Bild2">
+        </div>
+
+        <div class="text-section">
+            <p>Weitere Inhalte folgen.</p>
+        </div>
+    </div>
+
+    <footer>
+        <p>&copy; 2025 Meine Website</p>
+    </footer>
+</body>
+</html>
+
--- a/nginx.conf
+++ b/nginx.conf
+worker_processes auto;
+events { worker_connections 1024; }
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    
+    server {
+        listen 80;
+        server_name localhost;
+        
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ =404;
+        }
+
+        # Stelle sicher, dass statische Dateien wie CSS richtig ausgeliefert werden
+        location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|otf|eot|ttc|mp4|webm|ogg|mp3|wav|txt|pdf|doc|xls|csv)$ {
+            root /usr/share/nginx/html;
+            expires max;
+            log_not_found off;
+        }
+    }
+}
--- a/pic1.jpg
+++ b/pic1.jpg
--- a/pic2.jpg
+++ b/pic2.jpg
--- a/style.css
+++ b/style.css
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bilder Galerie</title>
+
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f8ff;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        header {
+            background-color: #007BFF;
+            color: white;
+            text-align: center;
+            padding: 50px 0;
+        }
+
+        header h1 {
+            font-size: 3em;
+            margin: 0;
+        }
+
+        .container {
+            flex-grow: 1;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .image-section {
+            text-align: center;
+            margin-top: 40px;
+        }
+
+        .image-section img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .text-section {
+            margin-top: 40px;
+            text-align: center;
+        }
+
+        .text-section p {
+            font-size: 1.2em;
+            line-height: 1.6;
+            color: #555;
+        }
+
+        footer {
+            background-color: #333;
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Willkommen zu meiner BilderGalerie</h1>
+    </header>
+
+    <div class="container">
+        <div class="image-section">
+            <img src="./pic1.jpg" alt="Bild1">
+        </div>
+        <div class="image-section">
+            <img src="./pic2.jpg" alt="Bild2">
+        </div>
+
+        <div class="text-section">
+            <p>Weitere Inhalte folgen.</p>
+        </div>
+    </div>
+
+    <footer>
+        <p>&copy; 2025 Meine Website</p>
+    </footer>
+</body>
+</html>
+