ProHoster > Blog > Verwaltung > So erstellen Sie eine statische Site auf Cloudflare Workers Sites

So erstellen Sie eine statische Site auf Cloudflare Workers Sites

Hallo! Mein Name ist Dima, ich bin technischer Leiter des SysOps-Teams bei Wrike. In diesem Artikel erzähle ich Ihnen, wie Sie in 10 Minuten und 5 Dollar pro Monat eine Website so nah wie möglich am Benutzer erstellen und deren Bereitstellung automatisieren. Der Artikel hat fast nichts mit den Problemen zu tun, die wir in unserem Team lösen. Hierbei handelt es sich eher um meine persönlichen Erfahrungen und Eindrücke beim Kennenlernen einer für mich neuen Technologie. Ich habe versucht, die Schritte so detailliert wie möglich zu beschreiben, damit die Anleitung auch für Menschen mit unterschiedlichen Erfahrungen nützlich ist. Ich hoffe, dass es Ihnen gefällt. Gehen!

So erstellen Sie eine statische Site auf Cloudflare Workers Sites

Vielleicht haben Sie bereits eine einfache und kostengünstige Möglichkeit gefunden, eine Website zu hosten. Vielleicht sogar kostenlos, wie hier beschrieben großartiger Artikel.

Doch plötzlich ist Ihnen immer noch langweilig und Sie möchten in die schöne neue Welt der Technik eintauchen? Nehmen wir an, Sie denken über eine Automatisierung der Bereitstellung nach und möchten Ihre Website so schnell wie möglich beschleunigen? In diesem Artikel werden wir verwenden Hugo, aber das ist optional.

Wir verwenden Gitlab CI/CD zur Automatisierung, aber wie sieht es mit der Beschleunigung aus? Stellen wir die Site mit direkt in Cloudflare bereit Arbeiterstandorte.

Was ist zum Starten erforderlich?:

Teil 1: Hugo installieren

Wenn Sie Hugo bereits installiert haben oder einen anderen statischen Site-Generator bevorzugen (oder überhaupt keinen verwenden), können Sie diesen Teil überspringen.

  1. Laden Sie Hugo herunter von https://github.com/gohugoio/hugo/releases

  2. Wir platzieren die ausführbare Hugo-Datei gemäß einer der in definierten PATH Wege

  3. Erstellen einer neuen Site: hugo new site blog.example.com

  4. Ändern Sie das aktuelle Verzeichnis in das neu erstellte: cd blog.example.com

  5. Wählen Sie ein Designthema (https://github.com/budparr/gohugo-theme-ananke/releases oder Wasauchimmer)

  6. Lasst uns den ersten Beitrag erstellen: hugo new posts/my-amazing-post.md

  7. Fügen Sie der erstellten Datei Inhalte hinzu: content/posts/my-amazing-post.md.
    Wenn alles erledigt ist, ändern Sie den Entwurfswert in falsch

  8. Statische Dateien generieren: hugo -D

Jetzt befindet sich unsere statische Site in einem Verzeichnis ./öffentlich und bereit für Ihre erste manuelle Bereitstellung.

Teil 2: Cloudflare einrichten

Schauen wir uns nun die Ersteinrichtung von Cloudflare an. Nehmen wir an, dass wir bereits eine Domain für die Site haben. Nehmen wir als Beispiel blog.example.com.

Schritt 1: Erstellen Sie einen DNS-Eintrag

Wählen Sie zunächst unsere Domain und anschließend den Menüpunkt aus DNS. Wir erstellen einen Blog-A-Datensatz und geben dafür eine fiktive IP an (dies ist die offizielle). Empfehlung, aber sie hätten es etwas hübscher machen können).

So erstellen Sie eine statische Site auf Cloudflare Workers Sites

Schritt 2: Cloudflare-Token

  1. Mein Profil -> API-Tokens Tab-> Token erstellen -> Erstellen Sie ein benutzerdefiniertes Token

So erstellen Sie eine statische Site auf Cloudflare Workers Sites

Hier müssen Sie das Token auf Konten und Zonen beschränken, aber die Option „Bearbeiten“ für die im Bild aufgeführten Berechtigungen belassen.

Bewahren Sie den Token für die Zukunft auf, wir werden ihn im dritten Teil benötigen.

Schritt 3: Account-ID und Zonen-ID abrufen

Domain → Überblick → [rechte Seitenleiste]

So erstellen Sie eine statische Site auf Cloudflare Workers SitesDas sind meine, bitte nicht benutzen :)

Speichern Sie diese neben dem Token, wir werden sie auch im dritten Teil benötigen.

Schritt 4: Arbeiter aktivieren

Domain → Arbeitskräfte → Mitarbeiter verwalten

Wir wählen einen eindeutigen Namen und Tarif „Arbeiter → Unbegrenzt“ (heute 5 $ pro Monat). Wenn Sie möchten, können Sie später auf die kostenlose Version upgraden.

Teil 3: Erste Bereitstellung (manuelle Bereitstellung)

Ich habe die erste manuelle Bereitstellung durchgeführt, um herauszufinden, was dort wirklich vor sich ging. Obwohl dies alles einfacher gemacht werden kann:

  1. Wrangler installieren: npm i @cloudflare/wrangler -g

  2. Gehen wir zum Verzeichnis unseres Blogs: cd blog.example.com

  3. Wrangler starten: wrangler init — site hugo-worker

  4. Erstellen Sie eine Konfiguration für Wrangler (geben Sie das Token ein, wenn Sie dazu aufgefordert werden): wrangler config

Versuchen wir nun, Änderungen an der neu erstellten Datei vorzunehmen wrangler.toml (hier vollständige Liste der möglichen Einstellungen):

  1. Angeben Konto-ID und Zonen-ID

  2. Wir verändern uns Route zu so etwas wie *blog.example.com/*

  3. Angeben falsch für Arbeiterdev

  4. Ändern Sie den Bucket in ./public (oder wo sich Ihre statische Site befindet)

  5. Wenn der Pfad mehr als eine Domäne enthält, sollten Sie den Pfad im Arbeitsskript korrigieren: Workers-Site/index.js (siehe Funktion handleEvent)

Großartig, es ist Zeit, die Site mithilfe des Teams bereitzustellen wrangler publish.

Teil 4: Bereitstellungsautomatisierung

Dieser Leitfaden wurde für Gitlab geschrieben, erfasst aber das Wesentliche und die Einfachheit der automatisierten Bereitstellung im Allgemeinen.

Schritt 1: Erstellen und konfigurieren Sie unser Projekt

  1. Erstellen Sie ein neues GitLab-Projekt und laden Sie das Verzeichnis site: hoch blog.beispiel.com mit sämtlichem Inhalt muss sich im Projektstammverzeichnis befinden

  2. Legen wir fest Variable CFAPITOKEN hier: Einstellungen → CI / CD → Variablen

Schritt 2: Erstellen Sie eine .gitlab-ci.yml-Datei und führen Sie die erste Bereitstellung aus

Erstellen Sie eine Datei .gitlab-ci.yml im Stammverzeichnis mit folgendem Inhalt:

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  script:
    - 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
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

Wir starten die erste Bereitstellung manuell (CI/CD → Pipelines → Pipeline ausführen) oder durch Festschreiben an den Hauptzweig. Voila!

Abschluss

Nun, ich habe es vielleicht etwas untertrieben, und der gesamte Vorgang hat etwas mehr als zehn Minuten gedauert. Aber jetzt haben Sie eine schnelle Website mit automatischer Bereitstellung und einige neue Ideen, was Sie sonst noch mit Workers machen können.

 Cloudflare-Mitarbeiter    Hugo    GitLab Ci

Source: habr.com

Kommentar hinzufügen