Kapitel 9/Premium Rohtext.md aktualisiert
This commit is contained in:
@@ -336,49 +336,81 @@ Für alle Einträge **Force SSL** aktivieren und Zertifikate anfordern.
|
||||
Jede neue Seite benötigt einen eigenen Projektordner, eine eigene `.conf`-Datei und eine eigene Subdomain.
|
||||
Diese klare Trennung verhindert Konflikte und erleichtert Wartung und Sicherheit.
|
||||
|
||||
## 5. CDN-Integration
|
||||
## 5. Statische Inhalte beschleunigen
|
||||
|
||||
Ein **Content Delivery Network (CDN)** beschleunigt die Auslieferung von statischen Dateien wie Bildern, CSS- und JavaScript-Dateien.
|
||||
Gerade bei internationalen Besuchern oder grafiklastigen Projekten verbessert ein CDN die Ladezeiten erheblich und entlastet den eigenen Webspace-Container.
|
||||
Statische Inhalte wie Bilder, CSS- und JavaScript-Dateien ändern sich selten, werden aber bei jedem Seitenaufruf neu vom Server geladen.
|
||||
Damit diese Dateien schneller ausgeliefert werden und den Webspace-Container nicht unnötig belasten, richten wir ein **lokales Caching** ein.
|
||||
Für größere Projekte mit sehr vielen Medien empfehlen wir später den Einsatz eines eigenen **Asset-LXC** (siehe Kapitel 12).
|
||||
|
||||
### Ziel der Integration
|
||||
- **Schnellere Ladezeiten:** Dateien werden über weltweit verteilte Server ausgeliefert.
|
||||
- **Weniger Serverlast:** Der Webspace muss weniger Daten direkt bereitstellen.
|
||||
- **Bessere Nutzererfahrung:** Besucher erleben kürzere Ladezeiten und stabilere Performance.
|
||||
### Schritt 1 – Cache-Module aktivieren
|
||||
Öffne die Konsole des Webspace-Containers und installiere die benötigten Apache-Module:
|
||||
|
||||
### Schritt 1 – Geeigneten CDN-Anbieter wählen
|
||||
Für die meisten Projekte reicht ein kostenloser Dienst wie **Cloudflare CDN**, der statische Inhalte zwischenspeichert und gleichzeitig DDoS-Schutz bietet.
|
||||
Wer nur Bilder und Videos optimieren möchte, kann auch **Bunny CDN** oder ähnliche Dienste nutzen.
|
||||
```bash
|
||||
apt update
|
||||
apt install -y libapache2-mod-cache libapache2-mod-cache-disk libapache2-mod-deflate
|
||||
a2enmod cache cache_disk deflate expires headers
|
||||
systemctl restart apache2
|
||||
```
|
||||
|
||||
👉 Screenshot geeignet: Konsole nach erfolgreicher Installation und Aktivierung der Module
|
||||
|
||||
Diese Module sorgen dafür, dass häufig verwendete Dateien zwischengespeichert und komprimiert übertragen werden.
|
||||
|
||||
### Schritt 2 – Cache-Regeln für statische Dateien einrichten
|
||||
Öffne die Konfigurationsdatei deiner Live-Seite, z. B.:
|
||||
|
||||
```bash
|
||||
nano /etc/apache2/sites-available/webproject-prod.conf
|
||||
```
|
||||
|
||||
Füge innerhalb des `<VirtualHost *:80>`-Blocks vor `</VirtualHost>` Folgendes hinzu:
|
||||
|
||||
```apache
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresByType image/jpg "access plus 1 month"
|
||||
ExpiresByType image/jpeg "access plus 1 month"
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/gif "access plus 1 month"
|
||||
ExpiresByType text/css "access plus 1 month"
|
||||
ExpiresByType application/javascript "access plus 1 month"
|
||||
</IfModule>
|
||||
|
||||
<IfModule mod_headers.c>
|
||||
Header set Cache-Control "public, max-age=2592000"
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
👉 Screenshot geeignet: geöffnete Apache-Konfigurationsdatei mit eingefügten Cache-Regeln
|
||||
|
||||
Die Regeln teilen Browsern und Apache mit, dass Bilder und Skripte bis zu 30 Tage lang aus dem Cache geladen werden dürfen.
|
||||
|
||||
### Schritt 3 – Apache neu laden
|
||||
Übernimm die Änderungen mit:
|
||||
|
||||
```bash
|
||||
systemctl reload apache2
|
||||
```
|
||||
|
||||
👉 Screenshot geeignet: Konsole nach erfolgreichem Reload
|
||||
|
||||
### Schritt 4 – Funktion prüfen
|
||||
Öffne die Entwicklertools deines Browsers (F12 → Netzwerk-Tab) und lade die Seite neu.
|
||||
Bei den statischen Dateien sollte nun ein Cache-Header mit Ablaufdatum angezeigt werden.
|
||||
|
||||
👉 Screenshot geeignet: Browser-Netzwerkanzeige mit Cache-Headern für Bilder und CSS
|
||||
|
||||
[!TIP]
|
||||
Cloudflare ist für die meisten Einsteiger ideal, da es leicht einzurichten ist und viele Basisfunktionen kostenfrei bereitstellt.
|
||||
Wenn du eine Datei ersetzt und die Änderung sofort sichtbar sein soll, leere den Browser-Cache mit **Strg + F5**.
|
||||
Falls nötig, kannst du auch den Apache-Cache im Container löschen:
|
||||
|
||||
### Schritt 2 – DNS auf das CDN umstellen
|
||||
Melde dich beim gewählten CDN-Anbieter an und folge dem dortigen Einrichtungsassistenten.
|
||||
In der Regel ersetzt der Anbieter die Nameserver deiner Domain durch eigene (z. B. bei Cloudflare).
|
||||
Nach der Umstellung laufen alle Anfragen automatisch über das CDN.
|
||||
```bash
|
||||
rm -rf /var/cache/apache2/*
|
||||
```
|
||||
|
||||
👉 Screenshot geeignet: Cloudflare-Dashboard mit aktivierten CDN- und SSL-Optionen
|
||||
|
||||
### Schritt 3 – HTTPS und Weiterleitungen prüfen
|
||||
Da alle Aufrufe künftig über das CDN gehen, prüfe anschließend die HTTPS-Einstellungen:
|
||||
|
||||
- Im CDN-Dashboard **„Always Use HTTPS“** aktivieren
|
||||
- Sicherstellen, dass im Nginx Proxy Manager weiterhin **Force SSL** aktiv ist
|
||||
- Testen, ob die Seiten weiterhin automatisch auf `https://` umleiten und ein gültiges Zertifikat anzeigen
|
||||
|
||||
### Schritt 4 – Caching und Performance optimieren
|
||||
Passe im CDN die Caching-Regeln für statische Dateien an, z. B.:
|
||||
|
||||
- HTML-Dateien: kurze Cache-Dauer (z. B. 10 Minuten)
|
||||
- Bilder, CSS, JS: lange Cache-Dauer (z. B. 1 Monat)
|
||||
|
||||
Damit werden Änderungen an der Seite zeitnah sichtbar, während selten geänderte Dateien länger im Cache bleiben.
|
||||
|
||||
👉 Screenshot geeignet: CDN-Einstellungen für Cache-Dauer
|
||||
|
||||
[!IMPORTANT]
|
||||
Nach jeder Layout- oder Inhaltsänderung ggf. den CDN-Cache leeren („Purge Cache“), damit Besucher sofort die aktuelle Version der Webseite sehen.
|
||||
Für wachsende Projekte mit vielen Medieninhalten lohnt sich ein eigener **Asset-LXC**.
|
||||
Damit werden große Dateien separat ausgeliefert, die Performance steigt und der Webspace-Container wird entlastet.
|
||||
Die Einrichtung eines solchen Asset-Containers behandeln wir ausführlich in **Kapitel 12**.
|
||||
|
||||
## 6. Sicherheitsmaßnahmen
|
||||
|
||||
|
||||
Reference in New Issue
Block a user