🥇Jak zrobić statyczną stronę internetową w witrynach Cloudflare Workers

Cześć! Nazywam się Dima, jestem kierownikiem technicznym zespołu SysOps w firmie Wrike. W tym artykule opowiem Ci jak w 10 minut i 5 dolarów miesięcznie zrobić stronę internetową jak najbliżej użytkownika i zautomatyzować jej wdrożenie. Artykuł nie ma prawie nic wspólnego z problemami, które rozwiązujemy w naszym zespole. To raczej moje osobiste doświadczenia i wrażenia z poznania technologii, która jest dla mnie nowa. Starałem się opisać poszczególne kroki możliwie szczegółowo, aby instrukcja była przydatna dla osób z różnym doświadczeniem. Mam nadzieję, że Ci się spodoba. Iść!

Być może znalazłeś już prosty i tani sposób na hostowanie strony internetowej. Może nawet za darmo, jak opisano w this świetny artykuł.

Ale nagle nadal jesteś znudzony i chcesz dotknąć nowego, wspaniałego świata technologii? Załóżmy, że myślisz o zautomatyzowaniu wdrożenia i chciałbyś maksymalnie przyspieszyć swoją witrynę? W tym artykule użyjemy Hugo, ale jest to opcjonalne.

Do automatyzacji używamy Gitlab CI/CD, ale co z akceleracją? Wdróżmy witrynę bezpośrednio w Cloudflare za pomocą Witryny pracownicze.

Co jest potrzebne do uruchomienia:

Gitlab (własny lub pochmurny)
Konto na Cloudflare
Zainstalowane nodejs/npm

Część 1: Instalacja Hugo

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

Pobierz Hugo z https://github.com/gohugoio/hugo/releases
Umieszczamy plik wykonywalny Hugo zgodnie z jednym z zdefiniowanych w PATH sposoby
Tworzenie nowej witryny: hugo new site blog.example.com
Zmień bieżący katalog na nowo utworzony: cd blog.example.com
Wybierz motyw projektu (https://github.com/budparr/gohugo-theme-ananke/releases lub cokolwiek)
Stwórzmy pierwszy post: hugo new posts/my-amazing-post.md
Dodaj treść do utworzonego pliku: content/posts/my-amazing-post.md.
Kiedy wszystko zostanie zrobione, zmień wartość wersji roboczej na fałszywy
Generowanie plików statycznych: hugo -D

Teraz nasza statyczna witryna znajduje się w katalogu ./publiczny i gotowy do pierwszego ręcznego wdrożenia.

Część 2: Konfigurowanie Cloudflare

Przyjrzyjmy się teraz początkowej konfiguracji Cloudflare. Załóżmy, że mamy już domenę dla serwisu. Weźmy jako przykład blog.example.com.

Krok 1: Utwórz wpis DNS

Najpierw wybierz naszą domenę, a następnie pozycję menu DNS. Tworzymy blog A-record i wskazujemy dla niego jakieś fikcyjne IP (jest to oficjalne rekomendacje, ale mogli to zrobić trochę ładniej).

Krok 2: Token Cloudflare

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

Tutaj będziesz musiał ograniczyć token do kont i stref, ale pozostaw opcję Edytuj dla uprawnień wymienionych na obrazku.

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

Krok 3: Zdobądź konto i strefę

Domena → Przegląd → [prawy pasek boczny]

To są moje, nie używaj ich, proszę :)

Zapisz je obok żetonu, będą nam potrzebne także w trzeciej części.

Krok 4: Aktywuj pracowników

Domena → Pracownicy → Zarządzaj pracownikami

Wybieramy unikalną nazwę i taryfę Pracownicy → Bez ograniczeń (dziś 5 USD miesięcznie). Jeśli chcesz, możesz później dokonać aktualizacji do wersji darmowej.

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

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

Zainstaluj wranglera: npm i @cloudflare/wrangler -g
Przejdźmy do katalogu naszego bloga: cd blog.example.com
Uruchom wranglera: wrangler init — site hugo-worker
Utwórz konfigurację dla wranglera (wprowadź token, gdy zostaniesz o to poproszony): wrangler config

Spróbujmy teraz dokonać zmian w nowo utworzonym pliku wrangler.toml (tutaj pełna lista możliwych ustawień):

Sprecyzować konto i strefaid
Zmieniamy się trasa do czegoś takiego *blog.example.com/*
Sprecyzować fałszywy dla pracownicydev
Zmień wiadro na ./public (lub gdzie znajduje się Twoja witryna statyczna)
Jeśli w ścieżce masz więcej niż jedną domenę, to powinieneś poprawić ścieżkę w działającym skrypcie: work-site/index.js (patrz funkcja uchwytZdarzenie)

Świetnie, czas wdrożyć witrynę z pomocą zespołu wrangler publish.

Część 4: Automatyzacja wdrożeń

Ten przewodnik został napisany dla Gitlaba, ale ogólnie opisuje istotę i łatwość zautomatyzowanego wdrażania.

Krok 1: Utwórz i skonfiguruj nasz projekt

Utwórz nowy projekt GitLab i prześlij witrynę: katalog blog.example.com z całą zawartością musi znajdować się w katalogu głównym projektu
Ustawiamy zmienny CAPITOKEN tutaj: Ustawienia → CI / CD → Zmienne

Krok 2: Utwórz plik .gitlab-ci.yml i uruchom pierwsze wdrożenie

Utwórz plik .gitlab-ci.yml w katalogu głównym o następującej treści:

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 #

Pierwsze wdrożenie uruchamiamy ręcznie (CI/CD → Rurociągi → Uruchom potok) lub poprzez zatwierdzenie gałęzi głównej. Voila!

wniosek

Cóż, może trochę to zaniżyłem, a cały proces trwał nieco ponad dziesięć minut. Ale teraz masz szybką witrynę z automatycznym wdrażaniem i kilkoma świeżymi pomysłami na temat tego, co jeszcze możesz zrobić z pracownikami.

Pracownicy Cloudflare Hugo GitLab Ci

Źródło: www.habr.com

Jak utworzyć statyczną witrynę w witrynach roboczych Cloudflare