Yuav ua li cas thiaj ua tau qhov chaw zoo li qub ntawm Cloudflare Workers Sites

Nyob zoo! Kuv lub npe yog Dima, Kuv yog tus kws tshaj lij rau pab pawg SysOps ntawm Wrike. Hauv tsab xov xwm no kuv yuav qhia koj yuav ua li cas thiaj li ua kom lub vev xaib ze li sai tau rau tus neeg siv thiab ua kom nws siv tau rau hauv 10 feeb thiab 5 las ib hlis. Cov kab lus yuav luag tsis muaj dab tsi cuam tshuam nrog cov teeb meem uas peb daws hauv peb pab neeg. Qhov no yog qhov kuv tus kheej kev paub thiab kev xav paub txog kev paub txog kev siv tshuab tshiab rau kuv. Kuv sim piav qhia cov kauj ruam kom ntxaws kom ntau li ntau tau kom cov lus qhia yuav muaj txiaj ntsig zoo rau cov neeg uas muaj kev sib txawv. Kuv vam tias koj yuav txaus siab rau. Mus!

Yuav ua li cas thiaj ua tau qhov chaw zoo li qub ntawm Cloudflare Workers Sites

Yog li, tej zaum koj twb pom ib txoj hauv kev yooj yim thiab pheej yig los tuav lub vev xaib. Tej zaum txawm tias dawb, raws li tau piav qhia hauv qhov no tsab xov xwm zoo.

Tab sis mam li nco dheev koj tseem dhuav thiab xav kov lub siab tawv lub ntiaj teb tshiab ntawm technology? Wb hais tias koj tab tom xav txog kev xa mus rau automating thiab xav kom koj lub xaib kom sai li sai tau? Hauv kab lus no peb yuav siv Hugo, tab sis qhov no yog xaiv tau.

Peb siv Gitlab CI / CD rau automation, tab sis li cas txog acceleration? Cia peb xa lub xaib ncaj qha rau Cloudflare siv Cov chaw ua haujlwm.

Yuav tsum pib li cas:

Part 1: Txhim kho Hugo

Yog tias koj twb tau teeb tsa Hugo, lossis yog tias koj xav tau lub tshuab hluav taws xob zoo li qub (lossis tsis siv ib qho), ces koj tuaj yeem hla qhov no.

  1. Download Hugo los ntawm https://github.com/gohugoio/hugo/releases

  2. Peb tso cov ntaub ntawv Hugo executable raws li ib qho ntawm cov tau teev tseg hauv PATH txoj kev

  3. Tsim ib qhov chaw tshiab: hugo new site blog.example.com

  4. Hloov cov npe tam sim no mus rau qhov tsim tshiab: cd blog.example.com

  5. Xaiv lub ntsiab lus tsim (https://github.com/budparr/gohugo-theme-ananke/releases los yog dab tsi)

  6. Cia peb tsim thawj tus ncej: hugo new posts/my-amazing-post.md

  7. Ntxiv cov ntsiab lus rau cov ntaub ntawv tsim: cov ntsiab lus/posts/my-amazing-post.md.
    Thaum txhua yam ua tiav, hloov tus nqi nqes mus rau cuav

  8. Tsim cov ntaub ntawv zoo li qub: hugo -D

Tam sim no peb qhov chaw zoo li qub nyob hauv ib phau ntawv ./public thiab npaj rau koj thawj phau ntawv xa mus.

Ntu 2: Kev teeb tsa Cloudflare

Tam sim no cia saib qhov pib teeb tsa ntawm Cloudflare. Cia peb xav tias peb twb muaj tus sau rau lub xaib. Cia peb ua piv txwv blog.example.com.

Kauj ruam 1: Tsim DNS nkag

Ua ntej, xaiv peb lub npe, thiab tom qab ntawd cov ntawv qhia zaub mov DNS. Peb tsim blog A-cov ntaub ntawv thiab qhia qee qhov tsis tseeb IP rau nws (qhov no yog tus nom kev pom zoo, tab sis lawv tuaj yeem ua kom nws zoo nkauj me ntsis).

Yuav ua li cas thiaj ua tau qhov chaw zoo li qub ntawm Cloudflare Workers Sites

Kauj ruam 2: Cloudflare Token

  1. kuv Profile -> API tokens tab-> Tsim Token -> Tsim Custom Token

Yuav ua li cas thiaj ua tau qhov chaw zoo li qub ntawm Cloudflare Workers Sites

Ntawm no koj yuav tsum txwv tsis pub lub token rau cov nyiaj thiab cov cheeb tsam, tab sis tawm hauv kev xaiv Kho kom raug rau cov kev tso cai teev hauv daim duab.

Txuag lub token rau yav tom ntej, peb yuav xav tau nws nyob rau hauv thib peb.

Kauj ruam 3: Tau accountid thiab zoneid

sau β†’ Txheej txheem cej luam β†’ [txoj cai sidebar]

Yuav ua li cas thiaj ua tau qhov chaw zoo li qub ntawm Cloudflare Workers SitesCov no yog kuv li, tsis txhob siv lawv thov :)

Txuag lawv ib sab ntawm lub token, peb kuj yuav xav tau lawv nyob rau hauv peb feem.

Kauj Ruam 4: Qhib cov neeg ua haujlwm

sau β†’ Cov neeg ua haujlwm β†’ Tswj Cov Neeg Ua Haujlwm

Peb xaiv lub npe tshwj xeeb thiab tus nqi se Cov Neeg Ua Haujlwm β†’ Tsis txwv ($ 5 ib hlis hnub no). Yog tias koj xav tau, tom qab ntawd koj tuaj yeem hloov kho mus rau qhov dawb version.

Ntu 3: Kev xa tawm thawj zaug (kev xa tawm phau ntawv)

Kuv tau ua thawj phau ntawv xa mus kom paub tias dab tsi tshwm sim nyob rau ntawd. Txawm hais tias tag nrho cov no tuaj yeem ua tau yooj yim dua:

  1. Nruab wrangler: npm i @cloudflare/wrangler -g

  2. Cia peb mus rau qhov directory ntawm peb blog: cd blog.example.com

  3. Tua tawm wrangler: wrangler init β€” site hugo-worker

  4. Tsim ib tug config rau wrangler (sau lub token thaum nug): wrangler config

Tam sim no cia peb sim hloov pauv cov ntaub ntawv tsim tshiab wrangler.toml (no Daim ntawv teev tag nrho ntawm qhov ua tau teeb tsa):

  1. Peb qhia tau accountid thiab zoneid

  2. Hloov txoj kev rau ib yam dab tsi zoo li *blog.example.com/*

  3. Peb qhia tau cuav rau neeg ua hauj lwmdev

  4. Hloov lub thoob rau ./public (los yog qhov chaw koj qhov chaw zoo li qub nyob)

  5. Yog tias koj muaj ntau tshaj ib lub npe hauv txoj kev, ces koj yuav tsum kho txoj hauv kev ua haujlwm: neeg ua haujlwm-site/index.js (saib function handleEvent)

Zoo heev, nws yog lub sijhawm los xa lub xaib siv pab pawg wrangler publish.

Part 4: Deployment automation

Cov lus qhia no tau sau rau Gitlab, tab sis nws khaws cov ntsiab lus thiab yooj yim ntawm kev xa mus rau qhov dav dav.

Kauj ruam 1: Tsim thiab teeb tsa peb qhov project

  1. Tsim ib qhov tshiab GitLab project thiab upload lub site: directory blog.example.com nrog tag nrho cov ntsiab lus yuav tsum tau nyob rau hauv qhov project root directory

  2. Peb teem sib txawv CFAPITOKEN ntawm no: chaw β†’ CI / CD β†’ ntau yam

Kauj ruam 2: Tsim cov ntaub ntawv .gitlab-ci.yml thiab khiav thawj qhov kev xa tawm

Tsim ib cov ntaub ntawv .gitlab-ci.yml hauv paus nrog cov ntsiab lus hauv qab no:

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 #

Peb tso thawj qhov kev xa tawm manually (CI/CD β†’ Cov raj xa dej β†’ Khiav Pipeline) los yog los ntawm kev cog lus rau tus tswv ceg. Voila!

xaus

Zoo, tej zaum kuv yuav tau understated nws me ntsis, thiab tag nrho cov txheej txheem siv li kaum feeb xwb. Tab sis tam sim no koj muaj qhov chaw nrawm nrog kev xa tawm tsis siv neeg thiab qee cov tswv yim tshiab txog dab tsi ntxiv koj tuaj yeem ua nrog Cov Neeg Ua Haujlwm.

 Cov neeg ua haujlwm Cloudflare    Hugo    GitLab Ci

Tau qhov twg los: www.hab.com

Ntxiv ib saib