🥇Com crear un lloc web estàtic a Cloudflare Workers Sites

Hola! Em dic Dima, sóc responsable tècnic de l'equip SysOps de Wrike. En aquest article us explicaré com fer que un lloc web sigui el més proper possible a l'usuari en 10 minuts i 5 dòlars al mes i automatitzar-ne el desplegament. L'article no té gairebé res a veure amb els problemes que resolem dins del nostre equip. Aquesta és més aviat la meva experiència i impressions personals de conèixer una tecnologia que és nova per a mi. Vaig intentar descriure els passos amb el màxim de detall possible perquè les instruccions fossin útils per a persones amb experiència diferent. Espero que gaudiu. Va!

Per tant, potser ja heu trobat una manera senzilla i econòmica d'allotjar un lloc web. Potser fins i tot gratuït, tal com es descriu aquí gran article.

Però, de sobte, encara estàs avorrit i vols tocar el nou món valent de la tecnologia? Suposem que esteu pensant a automatitzar el desplegament i voleu accelerar el vostre lloc tant com sigui possible? En aquest article utilitzarem Hugo, però això és opcional.

Utilitzem Gitlab CI/CD per a l'automatització, però què passa amb l'acceleració? Despleguem el lloc directament a Cloudflare mitjançant Llocs dels treballadors.

El que cal per començar:

Gitlab (el vostre o ennuvolat)
Compte a Cloudflare
Instal·lat nodejs/npm

Part 1: instal·lació d'Hugo

Si ja teniu Hugo instal·lat, o si preferiu un generador de llocs estàtic diferent (o no en feu servir cap), podeu ometre aquesta part.

Descarrega Hugo de https://github.com/gohugoio/hugo/releases
Col·loquem el fitxer executable Hugo segons un dels definits a CAMÍ maneres
Creació d'un lloc nou: hugo new site blog.example.com
Canvieu el directori actual pel nou creat: cd blog.example.com
Seleccioneu un tema de disseny (https://github.com/budparr/gohugo-theme-ananke/releases o el que sigui)
Creem la primera publicació: hugo new posts/my-amazing-post.md
Afegeix contingut al fitxer creat: contingut/publicacions/my-amazing-post.md.
Quan tot estigui fet, canvieu el valor de l'esborrany a false
Generació de fitxers estàtics: hugo -D

Ara el nostre lloc estàtic es troba dins d'un directori ./públic i llest per al vostre primer desplegament manual.

Part 2: Configuració de Cloudflare

Ara mirem la configuració inicial de Cloudflare. Suposem que ja tenim un domini per al lloc. Prenguem com a exemple blog.exemple.com.

Pas 1: creeu una entrada DNS

Primer, seleccioneu el nostre domini i després l'element del menú DNS. Creem un bloc A-record i li indiquem alguna IP fictícia (aquesta és la versió oficial recomanació, però ho podrien haver fet una mica més bonic).

Pas 2: testimoni de Cloudflare

El meu perfil -> Fitxes de l'API pestanya-> Crea un testimoni -> Crea un testimoni personalitzat

Aquí haureu de limitar el testimoni als comptes i zones, però deixeu l'opció Edita per als permisos que es mostren a la imatge.

Guarda el testimoni per al futur, el necessitarem a la tercera part.

Pas 3: obteniu accountid i zoneid

domini → Descripció → [barra lateral dreta]

Aquests són meus, no els feu servir si us plau :)

Deseu-los al costat de la fitxa, també els necessitarem a la tercera part.

Pas 4: activa els treballadors

domini → Treballadors → Treballadors de gestió

Triem un nom i una tarifa únics Treballadors → Il·limitat (5 dòlars al mes avui). Si ho desitja, més endavant podeu actualitzar a la versió gratuïta.

Part 3: primer desplegament (desplegament manual)

Vaig fer el primer desplegament manual per esbrinar què hi passava realment. Tot i que tot això es pot fer de manera més senzilla:

Instal·leu wrangler: npm i @cloudflare/wrangler -g
Anem al directori del nostre blog: cd blog.example.com
Llançar wrangler: wrangler init — site hugo-worker
Creeu una configuració per a wrangler (introduïu el testimoni quan se us demani): wrangler config

Ara intentem fer canvis al fitxer creat recentment wrangler.toml (aquí llista completa de configuracions possibles):

Ho indiquem accountid i zoneid
Canviem ruta a alguna cosa com *blog.example.com/*
Ho indiquem false per treballadorsdev
Canvia el dipòsit a ./public (o on es troba el vostre lloc estàtic)
Si teniu més d'un domini al camí, hauríeu de corregir el camí a l'script de treball: Workers-site/index.js (veure funció handleEvent)

Genial, és hora de desplegar el lloc mitjançant l'equip wrangler publish.

Part 4: Automatització del desplegament

Aquesta guia està escrita per a Gitlab, però recull l'essència i la facilitat del desplegament automatitzat en general.

Pas 1: Crear i configurar el nostre projecte

Creeu un nou projecte GitLab i pengeu el directori site: blog.exemple.com amb tot el contingut s'ha d'ubicar al directori arrel del projecte
Ens posem variable CFAPITOKEN aquí: Configuració → CI / CD → Variables

Pas 2: creeu un fitxer .gitlab-ci.yml i executeu el primer desplegament

Creeu un fitxer .gitlab-ci.yml a l'arrel amb el contingut següent:

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 #

Llencem el primer desplegament manualment (CI/CD → Canonades → Executar pipeline) o comprometent-se amb la branca mestra. Voila!

Conclusió

Bé, potser ho he subestimat una mica, i tot el procés va durar poc més de deu minuts. Però ara teniu un lloc ràpid amb un desplegament automàtic i algunes idees noves sobre què més podeu fer amb Workers.

Treballadors de Cloudflare Hugo GitLab Ci

Font: www.habr.com