🥇So erstellen Sie eine statische Website auf Cloudflare Workers Sites

Hallo! Ich heiße Dima, ich bin der Tech-Lead des SysOps-Teams bei Wrike. In diesem Artikel werde ich erklären, wie man in 10 Minuten und für 5 Dollar im Monat eine benutzerfreundliche Website erstellen und deren Deployment automatisieren kann. Der Artikel hat fast nichts mit den Problemen zu tun, die wir in unserem Team lösen. Es ist vielmehr meine persönliche Erfahrung und Eindrücke von einer mir neuen Technologie. Ich habe versucht, die Schritte so detailliert wie möglich zu beschreiben, damit die Anleitung für Menschen mit unterschiedlichem Erfahrungshorizont hilfreich ist. Ich hoffe, es gefällt euch. Lass uns anfangen!

Also, vielleicht habt ihr bereits einen einfachen und günstigen Weg gefunden, um eine Website zu hosten. Vielleicht sogar kostenlos, wie in diesem wunderbaren Artikel beschrieben.

Aber vielleicht seid ihr dennoch gelangweilt und wollt den wunderbaren neuen Technologien näherkommen? Angenommen, ihr denkt über die Automatisierung des Deployments nach und möchtet die Website so schnell wie möglich machen? In diesem Artikel verwenden 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 (eigenes oder Cloud))
Konto bei Cloudflare
Installiertes nodejs/npm

Teil 1: Hugo Installation

Wenn Sie bereits Hugo installiert haben oder wenn Sie einen anderen Generator für statische Seiten bevorzugen (oder sie überhaupt nicht nutzen), können Sie diesen Teil überspringen.

Laden Sie Hugo von https://github.com/gohugoio/hugo/releases
Herunterladen Sie die ausführbare Datei Hugo in einen der angegebenen PATH Pfad
Erstellen Sie eine neue Website: hugo new site blog.example.com
Ändern Sie das aktuelle Verzeichnis in das gerade erstellte: cd blog.example.com
Wählen Sie ein Design 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 Inhalte in die erstellte Datei ein: content/posts/my-amazing-post.md.
Wenn alles erledigt ist, ändern Sie den Wert draft auf false
Generieren Sie statische Dateien: hugo -D

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

Teil 2: Cloudflare einrichten

Lassen Sie uns nun die ersten Schritte mit Cloudflare klären. Angenommen, wir haben bereits eine Domain für die Website. Nehmen wir als Beispiel blog.example.com.

Schritt 1: Erstellen Sie einen DNS-Eintrag

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-Adresse an (das ist eine offizielle Empfehlung, aber sie könnten es irgendwie ansprechender machen).

Schritt 2: Cloudflare-Token

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

Hier müssen Sie den Token auf Konten und Zonen beschränken, aber die Bearbeitungsmöglichkeiten für die in dem Bild aufgeführten Berechtigungen beibehalten.

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

Schritt 3: Wir erhalten accountid und zoneid

Domain → Übersicht → [rechte Seitenleiste]

Das sind meine, bitte verwenden Sie sie nicht 🙂

Speichern Sie sie zusammen mit dem Token, sie werden ebenfalls in Teil drei benötigt.

Schritt 4: Aktivierung von Workers

Domain → Arbeiter → Workers verwalten

Wählen Sie einen eindeutigen Namen und Tarif für Workers → Unbegrenzt (derzeit 5 $ pro Monat). Später können Sie auf die kostenlose Version umsteigen.

Teil 3: Erster Deployment (manuelle Bereitstellung)

Ich habe das erste Deployment manuell durchgeführt, um herauszufinden, was dort wirklich passiert. Obwohl das alles auch einfacher gemacht werden kann:

Wrangler installieren: npm i @cloudflare/wrangler -g
Wir wechseln in das Verzeichnis unseres Blogs: cd blog.example.com
Wrangler starten: wrangler init — site hugo-worker
Erstellen Sie ein Konfigurationsfile für wrangler (geben Sie das Token ein, wenn Sie dazu aufgefordert werden): wrangler config

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

Geben Sie an accountid und zoneid
Wir ändern Route auf etwas wie *blog.example.com/*
Geben Sie an false für workersdev
Ändern Sie den Bucket auf ./public (oder wo sich Ihre statische Website befindet)
Wenn Sie mehr als eine Domain im Pfad haben, sollten Sie den Pfad im Workers-Skript anpassen: workers-site/index.js (siehe Funktion handleEvent)

Gut, es ist Zeit, die Website mit dem Befehl zu veröffentlichen wrangler publish.

Teil 4: Automatisierung des Deployments

Diese Anleitung wurde für Gitlab erstellt, vermittelt jedoch den Kern und die Einfachheit des automatisierten Deployments insgesamt.

Schritt 1: Unser Projekt erstellen und konfigurieren

Erstellen Sie ein neues GitLab-Projekt und laden Sie die Website hoch: Das Verzeichnis blog.example.com mit all seinen Inhalten sollte sich im Stammverzeichnis des Projekts befinden.
Legen Sie fest Variable CFAPITOKEN hier fest: Einstellungen → CI/CD → Variablen

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

Erstellen Sie eine Datei .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 betrifft nur den 'master'-Zweig
  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 betrifft nur den 'master'-Zweig
  tags:
    - gitlab-org-docker #

Wir starten das erste Deployment manuell (CI / CD → Pipelines → Pipeline ausführen) oder indem wir einen Commit in den Master-Zweig senden. Voilà!

Fazit

Nun, vielleicht habe ich es ein wenig untertrieben, denn der gesamte Prozess hat etwas mehr als zehn Minuten gedauert. Aber jetzt haben Sie eine schnelle Website mit automatischem Deployment und einige frische Ideen, was Sie noch mit Workers machen können.

Cloudflare Workers Hugo GitLab Ci

Quelle: habr.com