🥇So erstellen Sie eine statische Website mit Cloudflare Workers Sites

Hallo! Mein Name ist Dima, ich bin der technische Leiter des SysOps-Teams bei Wrike. In diesem Artikel werde ich Ihnen zeigen, wie Sie in 10 Minuten und für 5 Dollar pro Monat eine benutzerfreundliche Website erstellen und deren Deployment automatisieren können. Der Artikel bezieht sich nicht direkt auf die Probleme, die wir in unserem Team lösen. Vielmehr basiert er auf meinen persönlichen Erfahrungen und Eindrücken beim Kennenlernen dieser neuen Technologie. Ich habe versucht, die Schritte so detailliert wie möglich zu beschreiben, damit die Anleitung für Menschen mit unterschiedlichem Erfahrungsstand hilfreich ist. Ich hoffe, es gefällt Ihnen. Los geht's!

Also, vielleicht haben Sie bereits einen einfachen und kostengünstigen Weg gefunden, Ihre Website zu hosten. Möglicherweise sogar kostenlos, wie in diesem wunderbaren Artikel.

Aber vielleicht haben Sie trotzdem Langeweile und möchten die faszinierende neue Welt der Technologien erkunden? Angenommen, Sie denken über die Automatisierung des Deployments nach und möchten Ihre Website so schnell wie möglich machen? In diesem Artikel werden wir Hugo, aber das ist nicht zwingend erforderlich.

Für die Automatisierung verwenden wir Gitlab CI/CD, aber was ist mit der Beschleunigung? Lassen Sie uns die Website direkt in Cloudflare mit Hilfe von Worker Sites.

Was wird für den Start benötigt?:

Gitlab (Ihr eigener oder Cloud-)
Account bei Cloudflare
Installiert nodejs/npm

Teil 1: Installation von Hugo

Wenn Sie bereits Hugo installiert haben oder einen anderen statischen Website-Generator bevorzugen (oder sie gar nicht nutzen), können Sie diesen Teil überspringen.

Laden Sie Hugo von https://github.com/gohugoio/hugo/releases
Speichern Sie die ausführbare Datei Hugo in einem der angegebenen PATH Pfad
Erstellen Sie eine neue Website: hugo new site blog.example.com
Ändern Sie das aktuelle Verzeichnis auf das gerade erstellte: cd blog.example.com
Wählen Sie ein Thema aus (https://github.com/budparr/gohugo-theme-ananke/releases oder was auch immer)
Erstellen Sie den ersten Beitrag: hugo new posts/my-amazing-post.md
Fügen Sie dem erstellten Dokument Inhalt hinzu: content/posts/my-amazing-post.md.
Wenn alles erledigt ist, setzen Sie den Wert auf Entwurf auf false
Generieren Sie die statischen Dateien: hugo -D

Jetzt befindet sich unsere statische Website im Verzeichnis ./public und ist bereit für das erste manuelle Deployment.

Teil 2: Cloudflare konfigurieren

Nun gehen wir die ersten Schritte zur Einrichtung von Cloudflare durch. Angenommen, wir haben bereits eine Domain für die Website. Nehmen wir als Beispiel blog.example.com.

Schritt 1: DNS-Eintrag erstellen

Zuerst wählen wir unsere Domain aus und dann den Menüpunkt DNS. Erstellen Sie einen A-Eintrag für blog und geben Sie eine beliebige fiktive IP an (dies ist die offizielle Empfehlung, aber sie könnten es etwas schöner gestalten).

Schritt 2: Cloudflare-Token

Mein Profil -> API-Token Tab-> Token erstellen -> Benutzerdefinierten Token erstellen

Hier müssen Sie den Token auf Konten und Zonen beschränken, aber die Editiermöglichkeit für die im Bild aufgeführten Berechtigungen belassen.

Speichern Sie den Token für die Zukunft, er wird im dritten Teil benötigt.

Schritt 3: Erhalte accountid und zoneid

Domain → Übersicht → [rechte Seitenleiste]

Das sind meine, bitte verwenden Sie sie nicht 🙂

Speichern Sie sie zusammen mit dem Token, sie werden auch im dritten Teil benötigt.

Schritt 4: Aktivierung der Workers

Domain → Workers → Workers verwalten

Wählen Sie einen einzigartigen Namen und Tarif für die Workers → Unbegrenzt (5 $ pro Monat derzeit). Später können Sie zur kostenlosen Version wechseln, wenn Sie möchten.

Teil 3: Erste Bereitstellung (manuelles Deployment)

Ich habe die erste Bereitstellung manuell durchgeführt, um herauszufinden, was dort wirklich vor sich geht. Obwohl es auch einfacher geht:

Wrangler installieren: npm i @cloudflare/wrangler -g
Wechseln Sie in das Verzeichnis unseres Blogs: cd blog.example.com
Wrangler starten: wrangler init — site hugo-worker
Konfigurationsdatei für Wrangler erstellen (Token eingeben, wenn danach gefragt wird): wrangler config

Jetzt versuchen wir, Änderungen an der gerade erstellten Datei vorzunehmen wrangler.toml (hier eine vollständige Liste der möglichen Einstellungen):

Angeben accountid und zoneid
Wir ändern route in etwas wie *blog.example.com/*
Angeben false für workersdev
Ändern Sie den Bucket in ./public (oder wo Ihre statische Website gehostet ist)
Wenn Sie mehr als eine Domain im Einsatz haben, sollten Sie den Pfad im Arbeits-Skript anpassen: workers-site/index.js (siehe Funktion handleEvent)

Perfekt, es ist Zeit, die Website mit dem Befehl wrangler publish.

Teil 4: Automatisierung des Deployments

Diese Anleitung ist für GitLab erstellt, vermittelt jedoch die Essenz und Einfachheit der automatisierten Bereitstellung im Allgemeinen.

Schritt 1: Erstellen und Konfigurieren unseres Projekts

Erstellen Sie ein neues GitLab-Projekt und laden Sie die Website hoch: das Verzeichnis blog.example.com mit allem Inhalt sollte im Stammverzeichnis des Projekts liegen
Setzen Sie die Variable CFAPITOKEN hier: Einstellungen → CI/CD → Variablen

Schritt 2: Erstellen Sie die Datei .gitlab-ci.yml und starten Sie die erste Bereitstellung

Eine Datei erstellen .gitlab-ci.yml im Stammverzeichnis mit folgendem Inhalt:

Stufen:
  - erstellen
  - bereitstellen

Erstellen:
  Bild: monachus/hugo
  Stufe: erstellen
  Variablen:
    GIT_SUBMODULE_STRATEGY: rekursiv
  Skript:
    - cd blog.example.com/
    - hugo
  Artefakte:
    Pfade:
      - blog.example.com/public
  nur:
    - master # Dieser Job hat nur Auswirkungen auf den 'master'-Branch
  Tags:
    - gitlab-org-docker #


Bereitstellen:
  Bild: timbru31/ruby-node:2.3
  Stufe: bereitstellen
  Skript:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  Artefakte:
    Pfade:
      - blog.example.com/public
  nur:
    - master # Dieser Job hat nur Auswirkungen auf den 'master'-Branch
  Tags:
    - gitlab-org-docker #

Starten Sie das erste Deployment manuell (CI / CD → Pipelines → Pipeline ausführen) oder durch das Senden eines Commits an den master-Branch. Voilà!

Fazit

Nun, vielleicht habe ich es etwas untertrieben; der gesamte Prozess dauerte etwas mehr als zehn Minuten. Aber jetzt haben Sie eine schnelle Website mit automatischer Bereitstellung und einige frische Ideen, was Sie mit Workers noch tun können.

Cloudflare Workers Hugo GitLab CI

Quelle: habr.com