Statikus webhely készítése a Cloudflare Workers Sites-en

Helló! A nevem Dima, a Wrike SysOps csapatának műszaki vezetője vagyok. Ebben a cikkben elmondom, hogyan lehet egy webhelyet a felhasználóhoz a lehető legközelebb tenni, és havi 10 perc és 5 dollár alatt automatizálni a telepítést. A cikknek szinte semmi köze azokhoz a problémákhoz, amelyeket csapatunkon belül megoldunk. Ez inkább az én személyes tapasztalatom és benyomásaim egy számomra új technológia megismeréséről. Igyekeztem a lehető legrészletesebben leírni a lépéseket, hogy az instrukciók hasznosak legyenek a különböző tapasztalatokkal rendelkezők számára. Remélem, élvezni fogja. Megy!

Statikus webhely készítése a Cloudflare Workers Sites-en

Szóval, talán már talált egy egyszerű és olcsó módot egy webhely üzemeltetésére. Talán még ingyenes is, ahogy ebben le van írva remek cikk.

De hirtelen még mindig unatkozik, és meg akarja érinteni a technológia bátor új világát? Tegyük fel, hogy az üzembe helyezés automatizálásán gondolkodik, és szeretné a lehető legnagyobb mértékben felgyorsítani webhelyét? Ebben a cikkben fogjuk használni Hugo, de ez nem kötelező.

Az automatizáláshoz Gitlab CI/CD-t használunk, de mi a helyzet a gyorsítással? Telepítsük a webhelyet közvetlenül a Cloudflare-re a használatával Munkáshelyek.

Mi szükséges a kezdéshez:

1. rész: A Hugo telepítése

Ha már telepítette a Hugo-t, vagy más statikus webhelygenerátort szeretne (vagy egyáltalán nem használ), akkor ezt a részt kihagyhatja.

  1. Töltse le a Hugo-t innen https://github.com/gohugoio/hugo/releases

  2. A Hugo futtatható fájlt a pontban meghatározottak valamelyike ​​szerint helyezzük el PATH módokon

  3. Új oldal létrehozása: hugo new site blog.example.com

  4. Módosítsa az aktuális könyvtárat az újonnan létrehozott könyvtárra: cd blog.example.com

  5. Válasszon ki egy tervezési témát (https://github.com/budparr/gohugo-theme-ananke/releases vagy mindegy)

  6. Készítsük el az első bejegyzést: hugo new posts/my-amazing-post.md

  7. Tartalom hozzáadása a létrehozott fájlhoz: content/posts/my-mazing-post.md.
    Ha minden kész, módosítsa a vázlat értékét erre hamis

  8. Statikus fájlok generálása: hugo -D

Statikus oldalunk most egy könyvtárban található ./nyilvános és készen áll az első kézi telepítésre.

2. rész: A Cloudflare beállítása

Most nézzük meg a Cloudflare kezdeti beállítását. Tegyük fel, hogy már van egy domain a webhelyhez. Vegyünk példának blog.example.com.

1. lépés: Hozzon létre egy DNS-bejegyzést

Először válassza ki a domainünket, majd a menüpontot DNS. Létrehozunk egy blog A-rekordot, és megjelölünk benne valamilyen fiktív IP-címet (ez a hivatalos ajánlást, de csinálhatták volna egy kicsit szebb is).

Statikus webhely készítése a Cloudflare Workers Sites-en

2. lépés: Cloudflare token

  1. A profilom -> API tokenek fül-> Token létrehozása -> Hozzon létre egyéni tokent

Statikus webhely készítése a Cloudflare Workers Sites-en

Itt a tokent fiókokra és zónákra kell korlátoznia, de hagyja meg a Szerkesztés opciót a képen felsorolt ​​engedélyekhez.

Mentse el a tokent a jövőre, a harmadik részben szükségünk lesz rá.

3. lépés: Az accountid és a zoneid beszerzése

Domén Áttekintés → [jobb oldalsáv]

Statikus webhely készítése a Cloudflare Workers Sites-enEzek az enyémek, kérlek ne használd :)

Mentse el őket a token mellé, a harmadik részben is szükségünk lesz rájuk.

4. lépés: Aktiválja a dolgozókat

Domén Dolgozók Munkavállalók kezelése

Egyedi nevet és tarifát választunk: Dolgozók → Korlátlan (ma havi 5 USD). Ha szeretné, később frissíthet az ingyenes verzióra.

3. rész: Első üzembe helyezés (kézi telepítés)

Megcsináltam az első kézi telepítést, hogy megtudjam, mi folyik ott valójában. Bár mindez egyszerűbben is megtehető:

  1. Wrangler telepítése: npm i @cloudflare/wrangler -g

  2. Menjünk a blogunk könyvtárába: cd blog.example.com

  3. Wrangler indítása: wrangler init — site hugo-worker

  4. Hozzon létre egy konfigurációt a wrangler számára (kérésre írja be a tokent): wrangler config

Most próbáljuk meg módosítani az újonnan létrehozott fájlt wrangler.toml (itt a lehetséges beállítások teljes listája):

  1. jelezzük accountid és zoneid

  2. változás útvonal olyasmire, mint *blog.example.com/*

  3. jelezzük hamis a munkásdev

  4. Vödör módosítása erre: ./public (vagy ahol a statikus webhelye található)

  5. Ha egynél több tartománya van az elérési útban, akkor javítania kell az elérési utat a működő szkriptben: workers-site/index.js (lásd a funkciót handleEvent)

Remek, ideje üzembe helyezni a webhelyet a csapat segítségével wrangler publish.

4. rész: Telepítési automatizálás

Ez az útmutató a Gitlab számára készült, de általánosságban leírja az automatizált telepítés lényegét és egyszerűségét.

1. lépés: Hozza létre és konfigurálja projektünket

  1. Hozzon létre egy új GitLab projektet, és töltse fel a webhelyet: könyvtár blog.example.com minden tartalommal a projekt gyökérkönyvtárában kell lennie

  2. Beállítjuk változó CFAPITOKEN itt: beállítások CI / CDVáltozók

2. lépés: Hozzon létre egy .gitlab-ci.yml fájlt, és futtassa az első központi telepítést

Hozzon létre egy fájlt .gitlab-ci.yml a gyökérben a következő tartalommal:

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 #

Az első telepítést manuálisan indítjuk (CI/CD Csővezetékek Csővezeték futtatása) vagy a mesterágra vállalva. Voálá!

Következtetés

Nos, lehet, hogy kissé alábecsültem, és az egész folyamat alig több mint tíz percig tartott. Most azonban van egy gyors webhelye, amely automatikus üzembe helyezéssel és néhány friss ötlettel rendelkezik arról, hogy mit tehet még a Workers segítségével.

 Cloudflare dolgozók    Hugo    GitLab Ci

Forrás: will.com

Hozzászólás