Paano gumawa ng static na site sa Cloudflare Workers Sites

Kamusta! Ang pangalan ko ay Dima, isa akong technical lead para sa SysOps team sa Wrike. Sa artikulong ito sasabihin ko sa iyo kung paano gumawa ng isang website na mas malapit sa user hangga't maaari sa loob ng 10 minuto at 5 dolyar sa isang buwan at i-automate ang pag-deploy nito. Ang artikulo ay halos walang kinalaman sa mga problemang nalutas namin sa loob ng aming koponan. Ito ay sa halip ang aking personal na karanasan at mga impression ng pagkilala sa isang teknolohiya na bago sa akin. Sinubukan kong ilarawan ang mga hakbang sa pinakamaraming detalye hangga't maaari upang ang mga tagubilin ay maging kapaki-pakinabang para sa mga taong may iba't ibang karanasan. Sana ay mag-enjoy kayo. Go!

Paano gumawa ng static na site sa Cloudflare Workers Sites

Kaya, marahil nakahanap ka na ng simple at murang paraan upang mag-host ng isang website. Baka libre pa, gaya ng inilarawan dito mahusay na artikulo.

Ngunit bigla ka pa ring naiinip at nais na hawakan ang matapang na bagong mundo ng teknolohiya? Sabihin nating iniisip mo ang tungkol sa pag-automate ng deployment at gusto mong pabilisin ang iyong site hangga't maaari? Sa artikulong ito ay gagamitin natin Hugo, ngunit ito ay opsyonal.

Ginagamit namin ang Gitlab CI/CD para sa automation, ngunit paano naman ang acceleration? I-deploy natin ang site nang direkta sa Cloudflare gamit Mga Worker Site.

Ano ang kinakailangan upang magsimula:

Bahagi 1: Pag-install ng Hugo

Kung na-install mo na ang Hugo, o kung mas gusto mo ang ibang static na generator ng site (o hindi na gumamit ng isa), maaari mong laktawan ang bahaging ito.

  1. I-download ang Hugo mula sa https://github.com/gohugoio/hugo/releases

  2. Inilalagay namin ang Hugo executable file ayon sa isa sa mga tinukoy sa PATH mga paraan

  3. Paglikha ng bagong site: hugo new site blog.example.com

  4. Baguhin ang kasalukuyang direktoryo sa bagong nilikha: cd blog.example.com

  5. Pumili ng tema ng disenyo (https://github.com/budparr/gohugo-theme-ananke/releases o anuman)

  6. Gawin natin ang unang post: hugo new posts/my-amazing-post.md

  7. Magdagdag ng nilalaman sa ginawang file: content/posts/my-amazing-post.md.
    Kapag tapos na ang lahat, palitan ang halaga ng draft sa hindi totoo

  8. Pagbuo ng mga static na file: hugo -D

Ngayon ang aming static na site ay matatagpuan sa loob ng isang direktoryo ./publiko at handa na para sa iyong unang manu-manong pag-deploy.

Bahagi 2: Pagse-set up ng Cloudflare

Ngayon tingnan natin ang paunang pag-setup ng Cloudflare. Ipagpalagay natin na mayroon na tayong domain para sa site. Kunin natin bilang isang halimbawa blog.example.com.

Hakbang 1: Gumawa ng DNS entry

Una, piliin ang aming domain, at pagkatapos ay ang menu item DNS. Lumilikha kami ng blog A-record at nagsasaad ng ilang kathang-isip na IP para dito (ito ang opisyal rekomendasyon, ngunit maaari nilang gawin itong medyo mas maganda).

Paano gumawa ng static na site sa Cloudflare Workers Sites

Hakbang 2: Cloudflare Token

  1. Aking Profile -> Mga token ng API tab-> Lumikha ng Token -> Lumikha ng Custom na Token

Paano gumawa ng static na site sa Cloudflare Workers Sites

Dito kakailanganin mong limitahan ang token sa mga account at zone, ngunit iwanan ang opsyon na I-edit para sa mga pahintulot na nakalista sa larawan.

I-save ang token para sa hinaharap, kakailanganin natin ito sa ikatlong bahagi.

Hakbang 3: Kumuha ng accountid at zoneid

Domain β†’ Pangkalahatang-ideya β†’ [kanang sidebar]

Paano gumawa ng static na site sa Cloudflare Workers SitesAkin ang mga ito, mangyaring huwag gamitin ang mga ito :)

I-save ang mga ito sa tabi ng token, kakailanganin din natin ang mga ito sa ikatlong bahagi.

Hakbang 4: I-activate ang Mga Manggagawa

Domain β†’ Manggagawa β†’ Pamahalaan ang Mga Manggagawa

Pumili kami ng natatanging pangalan at taripa Mga Manggagawa β†’ Walang limitasyon ($5 bawat buwan ngayon). Kung nais mo, maaari kang mag-upgrade sa ibang pagkakataon sa libreng bersyon.

Bahagi 3: Unang pag-deploy (manu-manong pag-deploy)

Ginawa ko ang unang manu-manong pag-deploy upang malaman kung ano talaga ang nangyayari doon. Kahit na ang lahat ng ito ay maaaring gawin nang mas simple:

  1. I-install ang wrangler: npm i @cloudflare/wrangler -g

  2. Pumunta tayo sa direktoryo ng aming blog: cd blog.example.com

  3. Ilunsad ang wrangler: wrangler init β€” site hugo-worker

  4. Gumawa ng config para sa wrangler (ipasok ang token kapag tinanong): wrangler config

Ngayon subukan nating gumawa ng mga pagbabago sa bagong likhang file wrangler.toml (dito buong listahan ng mga posibleng setting):

  1. Ipinapahiwatig namin accountid at zoneid

  2. Nagbabago kami ruta sa isang bagay tulad ng *blog.example.com/*

  3. Ipinapahiwatig namin hindi totoo para sa manggagawadev

  4. Palitan ang bucket sa ./public (o kung saan matatagpuan ang iyong static na site)

  5. Kung mayroon kang higit sa isang domain sa landas, dapat mong itama ang landas sa gumaganang script: workers-site/index.js (tingnan ang function handleEvent)

Mahusay, oras na para i-deploy ang site gamit ang team wrangler publish.

Bahagi 4: Deployment automation

Ang gabay na ito ay isinulat para sa Gitlab, ngunit nakukuha nito ang kakanyahan at kadalian ng awtomatikong pag-deploy sa pangkalahatan.

Hakbang 1: Gumawa at i-configure ang aming proyekto

  1. Gumawa ng bagong proyekto sa GitLab at i-upload ang site: direktoryo blog.example.com kasama ang lahat ng nilalaman ay dapat na matatagpuan sa direktoryo ng ugat ng proyekto

  2. Nag set kami variable CFAPITOKEN dito: Setting β†’ CI / CD β†’ Variable

Hakbang 2: Gumawa ng .gitlab-ci.yml file at patakbuhin ang unang deployment

Gumawa ng file .gitlab-ci.yml sa ugat na may sumusunod na nilalaman:

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 #

Inilunsad namin ang unang deployment nang manu-mano (CI/CD β†’ Pipelines β†’ Patakbuhin ang Pipeline) o sa pamamagitan ng pag-commit sa master branch. Voila!

Konklusyon

Buweno, maaaring maliitin ko ito nang bahagya, at ang buong proseso ay tumagal lamang ng mahigit sampung minuto. Ngunit ngayon ay mayroon ka nang mabilis na site na may awtomatikong pag-deploy at ilang mga sariwang ideya tungkol sa kung ano pa ang maaari mong gawin sa Mga Manggagawa.

 Mga Manggagawa sa Cloudflare    Hugo    GitLab Ci

Pinagmulan: www.habr.com

Magdagdag ng komento