So hosten Sie eine statische Website auf bunny.net CDN mit automatischem Deployment

Früher habe ich meine Website auf einem Nginx-Server in einem Docker-Container betrieben. Der große Vorteil der Verwendung eines bunny.net ist, dass ich keinen Server warten und aktualisieren muss. Nach der Bereitstellung der Website wird alles durch den Dienst gewartet. Ein netter Nebeneffekt ist, dass er überall auf der Welt sehr schnelle Antwortzeiten hat. Für meine persönliche Seite ist das nicht so wichtig, aber es ist schön, das oben zu haben und für Seiten mit mehr Traffic kann das sehr nützlich sein.

Einrichten von bunny.net

Beginnen Sie damit, ein Konto für bunny.net zu erstellen.

1. Erstellen Sie eine Speicherzone

Zuerst müssen Sie eine Speicherzone erstellen. Während der Bereitstellung werden wir die Website-Datei in dieser Speicherzone speichern.

Gehen Sie in der Navigation auf Storage und klicken Sie auf "Add Storage Zone". Wählen Sie einen Namen, die Hauptregion und die GEO-Replikationsregionen. Die Hauptregion sollte diejenige sein, die Ihnen und Ihren Kunden am nächsten liegt, und die Replikationsregionen sollten alle anderen Regionen abdecken, aus denen der Verkehr kommt. In meinem Fall liegt meine Hauptregion in Europa und zur Sicherheit füge ich Nordamerika hinzu.

Achtung! Wählen Sie die Regionen mit Bedacht, denn es ist derzeit nicht möglich, die Hauptregion zu ändern oder GEO-Replikationsregionen nach der Erstellung der Zone zu entfernen. Es ist möglich, nachträglich Replikationen hinzuzufügen, also versuchen Sie es vielleicht mit weniger und fügen Sie später hinzu.

2. Erstellen Sie eine Pull-Zone

Gehen Sie in der neu erstellten Speicherzone auf " Connected Pull Zones " und klicken Sie auf " Connect pull zone ".

Geben Sie der Pull-Zone einen Namen und wählen Sie die Zonen aus. Klicken Sie auf " Create pull zone".

Fügen Sie den Hostnamen hinzu, unter dem Ihre Website laufen soll. Klicken Sie auf " Add " und legen Sie den CNAME DNS-Eintrag fest.

Wenn Sie die Website wie ich auf einer Root-Domain betreiben möchten, müssen Sie einen ANAME-Eintrag (auch ALIAS genannt) anstelle eines CNAME-Eintrags verwenden. Dies kann die globale Routing-Leistung beeinträchtigen. Wenn Sie die Website nicht auf der Root-Domain betreiben müssen, sollten Sie sie stattdessen auf einer Subdomain wie www mit einem CNAME-Eintrag betreiben. Lesen Sie mehr über dieses Thema hier.

Nachdem der Eintrag gesetzt und das SSL-Zertifikat erstellt wurde, aktivieren Sie "Force SSL", um die Benutzer zu zwingen, HTTPS für alle Anfragen zu verwenden.

3. API-Schlüssel für Speicher und Konto abrufen

Der Edge-Storage und die Pull-Zone sind nun einsatzbereit, aber der Storage ist noch leer. Sie könnten Ihre erstellte Website-Datei über den Uploader in den Edge-Storage hochladen, und die Website würde funktionieren. Um diesen Prozess zu vereinfachen, werden wir die Bereitstellung mit einem CLI-Tool durchführen.

Damit dies funktioniert, benötigen wir zwei API-Schlüssel. Einen für den Edge-Storage, um die Dateien hochzuladen, und einen allgemeinen API-Schlüssel, um den Cache der Pull-Zone zu leeren.

Für den API-Schlüssel des Edge-Storage gehen Sie auf die Seite zum Bearbeiten des Storage und klicken Sie auf "FTP & API Access". Kopieren Sie das Passwort.

Für den allgemeinen API-Schlüssel gehen Sie zu den Kontoeinstellungen und

4. CLI-Tool für das Deployment verwenden

Für das automatische Deployment verwende ich GitlabCI und das Node-CLI-Tool BunnyCDN CLI. Die Befehle haben nur wenige Anforderungen, sodass es für jemanden, der mit einem anderen CI-Tool vertraut ist, kein Problem sein sollte, das Ganze mit wenig Aufwand anzupassen. Es ist auch möglich, die Befehle einfach lokal z.B. in einem Bash-Skript auszuführen.

deploy-production:
  stage: deploy
  image: node:latest
  before_script:
    - npm install -g bnycdn
  script:
    - bnycdn key set default $BUNNY_API
    - bnycdn key set $BUNNY_STORAGE $BUNNY_API_STORAGE --type=storages
    - bnycdn cp -R -s $BUNNY_STORAGE ./public /$BUNNY_STORAGE/
    - bnycdn pz purge -t $BUNNY_PULL_ZONE
  only:
    - main
  dependencies:
    - build-production
  needs:
    - build-production

Vor dem ersten Deployment müssen Sie die Umgebungsvariablen setzen.

BUNNY_API enthält den API-Schlüssel aus den allgemeinen Einstellungen, BUNNY_API_STORAGE den API-Schlüssel des Edge Storage. BUNNY_STORAGE und BUNNY_PULL_ZONE enthalten den Namen des Edge-Storage und der Pull-Zone. In diesem Fall ist es beides constantingraf-at-prod.

Nach dem Ausführen der Pipeline (oder des Bash-Skripts) sollte Ihre Website-Datei im Edge-Storage sichtbar sein und die Website sollte funktionieren.

Geschwindigkeit

Die Ausführung einer statischen Website über ein CDN ist im Allgemeinen bereits sehr schnell. Die Speicherung der Dateien im Edge-Storage in mehreren Regionen der Welt macht eine bereits sehr schnelle Einrichtung noch schneller und stellt außerdem sicher, dass die Cache-Misses schnell bleiben.

Kosten

Bunny.net hat ein sehr günstiges Preismodell. Es gibt keine monatlichen Mindestbeträge und der Traffic ist ziemlich günstig. Für die Registrierung müssen Sie $10 Guthaben hinzufügen.

Die Traffic-Kosten hängen von der Region ab und beginnen bei $0,01/GB in Europa und Nordamerika bis zu $0,06/GB im Nahen Osten und Afrika.

Der Edge-Speicher in Europa und Nordamerika kostet $0,03/GB.

Berechnungsbeispiel: Mit den $10, die Sie Ihrem Konto belastet haben, hosten Sie Websites mit 1 GB Speicherplatz ($0,03) für 3 Jahre mit einem durchschnittlichen Traffic von 25 GB pro Monat.