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!
Kaya, marahil nakahanap ka na ng simple at murang paraan upang mag-host ng isang website. Baka libre pa, gaya ng inilarawan ditomahusay 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 natinHugo, 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 gamitMga Worker Site.
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.
Gawin natin ang unang post: hugo new posts/my-amazing-post.md
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
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 opisyalrekomendasyon, ngunit maaari nilang gawin itong medyo mas maganda).
Hakbang 2: Cloudflare Token
Aking Profile -> Mga token ng API tab-> Lumikha ng Token -> Lumikha ng Custom na Token
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.
Akin 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:
I-install ang wrangler: npm i @cloudflare/wrangler -g
Pumunta tayo sa direktoryo ng aming blog: cd blog.example.com
Ilunsad ang wrangler: wrangler init β site hugo-worker
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):
Ipinapahiwatig namin accountid at zoneid
Nagbabago kami ruta sa isang bagay tulad ng *blog.example.com/*
Ipinapahiwatig naminhindi totoopara sa manggagawadev
Palitan ang bucket sa ./public (o kung saan matatagpuan ang iyong static na site)
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 teamwrangler 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
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
Nag set kamivariable 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.