🥇Jak stworzyć statyczną stronę w Cloudflare Workers Sites

Cześć! Mam na imię Dima, jestem liderem zespołu SysOps w Wrike. W tym artykule opowiem, jak w ciągu 10 minut i za 5 dolarów miesięcznie stworzyć stronę maksymalnie zbliżoną do użytkownika i zautomatyzować jej wdrożenie. Artykuł ten ma niewiele wspólnego z problemami, które rozwiązujemy w naszym zespole. To raczej moje osobiste doświadczenia i wrażenia z odkrywania nowej dla mnie technologii. Postarałem się opisać kroki jak najdokładniej, aby instrukcja była przydatna dla osób o różnym poziomie doświadczenia. Mam nadzieję, że ci się spodoba. Zaczynajmy!

Tak więc, być może już znalazłeś prosty i tani sposób na hostowanie strony. Może nawet darmowy, jak opisano w tej wspaniałej artykule.

Ale nagle czujesz się znudzony i chcesz dotknąć cudownego nowego świata technologii? Powiedzmy, że myślisz o automatyzacji wdrożenia i chciałbyś maksymalnie przyspieszyć swoją stronę? W tym artykule użyjemy Hugo, ale nie jest to konieczne.

Do automatyzacji używamy Gitlab CI/CD, ale co zrobić z przyspieszaniem? Stwórzmy stronę bezpośrednio w Cloudflare za pomocą Worker Sites.

Co jest potrzebne do rozpoczęcia:

Gitlab (twój własny lub chmurowy)
Konto na Cloudflare
Zainstalowany nodejs/npm

Część 1: Instalacja Hugo

Jeśli masz już zainstalowane Hugo lub preferujesz inny generator stron statycznych (lub w ogóle ich nie używasz), możesz pominąć tę część.

Pobieramy Hugo z https://github.com/gohugoio/hugo/releases
Umieszczamy plik wykonywalny Hugo w jednym z określonych w ŚCIEŻKA ścieżek
Tworzymy nową stronę: hugo new site blog.example.com
Zmiana bieżącego katalogu na właśnie utworzony: cd blog.example.com
Wybieramy motyw (https://github.com/budparr/gohugo-theme-ananke/releases lub cokolwiek innego)
Tworzymy pierwszy post: hugo new posts/my-amazing-post.md
Dodajemy treść do utworzonego pliku: content/posts/my-amazing-post.md.
Kiedy wszystko jest gotowe, zmieniamy wartość draft na false
Generujemy pliki statyczne: hugo -D

Teraz nasza strona statyczna znajduje się w katalogu ./public i jest gotowa do pierwszego ręcznego wdrożenia.

Część 2: Konfiguracja Cloudflare

Teraz zajmiemy się początkową konfiguracją Cloudflare. Zakładamy, że mamy już domenę dla strony. Jako przykład weźmy blog.example.com.

Krok 1: Tworzymy rekord DNS

Najpierw wybieramy naszą domenę, a następnie z menu wybieramy DNS. Tworzymy rekord A dla blog i podajemy mu jakiś fikcyjny adres IP (to oficjalna rekomendacja, ale mogliby to zrobić jakoś ładniej).

Krok 2: Token Cloudflare

Mój Profil -> Tokeny API zakładka-> Utwórz Token -> Utwórz niestandardowy token

Tutaj musisz ograniczyć token do kont i stref, ale zachować możliwość Edytowania dla wymienionych na obrazku uprawnień.

Zachowaj token na przyszłość, będzie nam potrzebny w trzeciej części.

Krok 3: Uzyskiwanie accountid i zoneid

Domena → Overview → [prawa boczna panel]

To są moje, proszę ich nie używać 🙂

Przechowuj je obok tokena, również będą potrzebne w trzeciej części.

Krok 4: Aktywacja Workers

Domena → Robots → Zarządzaj Workers

Wybieramy unikalną nazwę i plan Workers → Unlimited (5 $ miesięcznie na dzisiaj). W późniejszym czasie możesz przejść na wersję darmową.

Część 3: Pierwsze wdrożenie (ręczne wdrożenie)

Wykonałem pierwsze wdrożenie ręcznie, aby dowiedzieć się, co tak naprawdę się dzieje. Chociaż można to zrobić prościej:

Instalujemy wranglera: npm i @cloudflare/wrangler -g
Przechodzimy do katalogu naszego bloga: cd blog.example.com
Uruchamiamy wranglera: wrangler init — site hugo-worker
Tworzymy konfigurację dla wranglera (wprowadź token, gdy zostaniesz o niego poproszony): wrangler config

Teraz spróbujmy wprowadzić zmiany w właśnie stworzonym pliku wrangler.toml (tutaj pełna lista możliwych ustawień):

Ustawiamy accountid i zoneid
Zmiana trasa na coś w rodzaju *blog.example.com/*
Ustawiamy false do workersdev
Zmieniamy bucket na . /public (lub gdzie znajduje się twój statyczny site)
Jeśli masz więcej niż jedną domenę w trasie, powinieneś poprawić ścieżkę w skrypcie roboczym: workers-site/index.js (zob. funkcję handleEvent)

Świetnie, czas wdrożyć stronę za pomocą polecenia wrangler publish.

Część 4: Automatyzacja wdrożenia

Ta instrukcja została stworzona dla Gitlab, ale oddaje istotę i prostotę zautomatyzowanego wdrożenia ogólnie.

Krok 1: Tworzymy i konfigurujemy nasz projekt

Tworzymy nowy projekt GitLab i przesyłamy stronę: katalog blog.example.com ze wszelkim zawartością powinien znajdować się w głównym katalogu projektu
Ustalamy zmienną CFAPITOKEN tutaj: Ustawienia → CI/CD → Zmienne

Krok 2: Tworzymy plik .gitlab-ci.yml i uruchamiamy pierwsze wdrożenie

Tworzymy plik .gitlab-ci.yml w katalogu głównym z następującą zawartością:

etapy:
  - budować
  - wdrożyć

budować:
  obraz: monachus/hugo
  etap: budować
  zmienne:
    GIT_SUBMODULE_STRATEGY: rekurencyjny
  skrypt:
    - cd blog.example.com/
    - hugo
  artefakty:
    ścieżki:
      - blog.example.com/public
  tylko:
    - master # ta praca wpłynie tylko na gałąź 'master'
  tagi:
    - gitlab-org-docker #


dowozić:
  obraz: timbru31/ruby-node:2.3
  etap: wdrożenie
  skrypt:
    - 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
  artefakty:
    ścieżki:
      - blog.example.com/public
  tylko:
    - master # ta praca wpłynie tylko na gałąź 'master'
  tagi:
    - gitlab-org-docker #

Rozpoczynamy pierwsze wdrożenie ręcznie (CI / CD → Pipelines → Uruchom pipeline) lub wysyłając commit do gałęzi master. Voilà!

Podsumowanie

Cóż, być może trochę to zminimalizowałem, a cały proces zajął trochę więcej niż dziesięć minut. Ale teraz masz szybkie strony z automatycznym wdrożeniem i kilka świeżych pomysłów na to, co jeszcze można zrobić za pomocą Workers.

Cloudflare Workers Hugo GitLab CI

Źródło: habr.com