Webserver

Wohin mit einer statischen Seite

Eine statische Seite läuft überall, wo ein Webserver Dateien ausliefert: auf einem Shared-Hosting-Paket, auf GitLab Pages, auf einem Objektspeicher mit CDN, auf einer eigenen VM. Diese Plattform liegt auf einem Shared-Apache-Host, weil der vorhanden war und nichts weiter braucht als SSH-Zugang. Im Kurs nimmst du deine Server-VM, das Prinzip ist dasselbe.

Apache installieren

Auf der Server-VM:

Apache installieren und die Module für Kompression, Caching und Header aktivieren:
Server-VM
```
sudo apt install -y apache2
sudo a2enmod deflate expires headers
```
.htaccess-Dateien im Document Root erlauben. In /etc/apache2/apache2.conf den Block für /var/www/ anpassen:
/etc/apache2/apache2.conf
```
<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
```
Das Document Root deinem Benutzer geben, damit rsync ohne sudo schreiben darf:
Server-VM
```
sudo chown -R "$USER":www-data /var/www/html
sudo systemctl reload apache2
```
Im Browser http://IP-der-VM/ öffnen: die Apache-Standardseite.

AllowOverride All ist der Schritt, den man am ehesten vergisst. Ohne ihn ignoriert Apache die .htaccess stillschweigend.

.htaccess

Astro kopiert alles aus public/ unverändert nach dist/. Liegt dort eine .htaccess, landet sie im Document Root und Apache liest sie bei jedem Aufruf. Die Datei dieser Plattform regelt vier Dinge:

# Eigene 404-Seite von Starlight
ErrorDocument 404 /404.html

# Verzeichnis-URLs wie /linux/03-terminal/ liefern index.html aus
DirectoryIndex index.html
Options -Indexes

# Kompression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml
</IfModule>

# Caching: Assets unter /_astro/ tragen einen Hash im Namen und dürfen lange gecacht werden,
# HTML und der Suchindex sollen bei jedem Deploy frisch geladen werden.
<IfModule mod_headers.c>
  <FilesMatch "\.html$">
    Header set Cache-Control "no-cache"
  </FilesMatch>
  <If "%{REQUEST_URI} =~ m#^/_astro/#">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </If>
</IfModule>

Abschnitt	Warum
`ErrorDocument 404`	Starlight baut eine eigene 404-Seite. Ohne die Zeile zeigt Apache seine graue Standardmeldung.
`Options -Indexes`	Kein Verzeichnislisting, falls einmal eine `index.html` fehlt.
Kompression	HTML, CSS und JS werden gezippt übertragen, oft ein Fünftel der Grösse.
Caching	Astro hängt an CSS- und JS-Dateien einen Hash an (`/_astro/index.a1b2c3.css`). Ändert sich der Inhalt, ändert sich der Name. Darum dürfen Browser sie ein Jahr behalten. HTML dagegen muss bei jedem Deploy frisch kommen.

Die <IfModule>-Blöcke sorgen dafür, dass die Datei auch auf einem Server ohne das jeweilige Modul keinen Fehler 500 auslöst.

Hands-on: Lege public/.htaccess in deinem Projekt an, baue und schau in dist/, ob sie da ist. Dann weiter zur nächsten Seite, wo sie auf den Server kommt.

Lösung anzeigen

echo '<h1>Test</h1>' > /var/www/html/test.html
curl -I http://localhost/test.html
curl -I http://localhost/gibtsnicht/

curl -I zeigt nur die Antwort-Header, die erste Zeile enthält den Statuscode 200 oder 404.

Selbstcheck · 3 Fragen

1. Warum darf /_astro/ ein Jahr lang gecacht werden?Weil sich CSS nie ändertWeil der Dateiname einen Hash des Inhalts enthält und sich bei jeder Änderung ändertWeil Apache das vorschreibt

2. Was passiert ohne AllowOverride All?Apache startet nichtDie .htaccess wird ignoriertDie Seite ist nicht erreichbar

3. Wie kommt die .htaccess nach dist/?Von Hand kopierenSie liegt in public/ und Astro kopiert public/ unverändertStarlight erzeugt sie