ProHoster > Blog > Administrasyon an > Ki jan yo fè yon sit estatik sou Cloudflare Workers Site

Ki jan yo fè yon sit estatik sou Cloudflare Workers Site

Bonjou! Non mwen se Dima, mwen se yon dirijan teknik pou ekip SysOps nan Wrike. Nan atik sa a mwen pral di w ki jan fè yon sit entènèt pi pre itilizatè a ke posib nan 10 minit ak 5 dola pa mwa ak otomatize deplwaman li yo. Atik la pa gen anyen pou wè ak pwoblèm yo ke nou rezoud nan ekip nou an. Sa a se pito eksperyans pèsonèl mwen ak enpresyon mwen vin konnen yon teknoloji ki nouvo pou mwen. Mwen te eseye dekri etap yo nan plis detay ke posib pou enstriksyon yo ta itil pou moun ki gen eksperyans diferan. Mwen espere ou pral jwi. Ale!

Ki jan yo fè yon sit estatik sou Cloudflare Workers Site

Se konsa, petèt ou te deja jwenn yon fason ki senp ak bon mache pou òganize yon sit entènèt. Petèt menm gratis, jan sa dekri nan sa a gwo atik.

Men, toudenkou w ap toujou anwiye epi ou vle manyen mond lan brav nouvo nan teknoloji? Ann di w ap panse sou otomatize deplwaman epi ou ta renmen akselere sit ou a otank posib? Nan atik sa a nou pral itilize Hugo, men sa a se opsyonèl.

Nou itilize Gitlab CI/CD pou automatisation, men e akselerasyon? Ann deplwaye sit la dirèkteman nan Cloudflare lè l sèvi avèk Sit Travayè yo.

Ki sa ki oblije kòmanse:

Pati 1: Enstale Hugo

Si ou deja enstale Hugo, oswa si ou prefere yon lòt dèlko sit estatik (oswa pa sèvi ak youn nan tout), Lè sa a, ou ka sote pati sa a.

  1. Telechaje Hugo soti nan https://github.com/gohugoio/hugo/releases

  2. Nou mete dosye a ègzèkutabl Hugo dapre youn nan sa yo defini nan CHEMEN fason

  3. Kreye yon nouvo sit: hugo new site blog.example.com

  4. Chanje anyè aktyèl la nan yon sèl ki fèk kreye: cd blog.example.com

  5. Chwazi yon tèm konsepsyon (https://github.com/budparr/gohugo-theme-ananke/releases oswa kèlkeswa sa)

  6. Ann kreye premye pòs la: hugo new posts/my-amazing-post.md

  7. Ajoute kontni nan fichye kreye a: kontni/posts/my-amazing-post.md.
    Lè tout bagay fini, chanje valè bouyon an fo

  8. Jenere fichye estatik: hugo -D

Koulye a, sit estatik nou an sitiye andedan yon anyè ./piblik epi pare pou premye deplwaman manyèl ou.

Pati 2: Mete kanpe Cloudflare

Koulye a, kite a gade nan konfigirasyon inisyal la nan Cloudflare. Ann sipoze ke nou deja gen yon domèn pou sit la. Ann pran kòm egzanp blog.egzanp.com.

Etap 1: Kreye yon antre DNS

Premyèman, chwazi domèn nou an, ak Lè sa a, atik nan meni an dns. Nou kreye yon blog A-dosye epi nou endike kèk IP fiktif pou li (sa a se ofisyèl la rekòmandasyon, men yo te ka fè li yon ti kras pi bèl).

Ki jan yo fè yon sit estatik sou Cloudflare Workers Site

Etap 2: Cloudflare Token

  1. My Profile -> API tokens tab-> Kreye jton -> Kreye siy koutim

Ki jan yo fè yon sit estatik sou Cloudflare Workers Site

La a ou pral bezwen limite siy la nan kont ak zòn, men kite opsyon nan Edit pou otorizasyon ki nan lis nan foto a.

Sove siy la pou tan kap vini an, nou pral bezwen li nan twazyèm pati a.

Etap 3: Jwenn accountid ak zoneid

Domèn → apèsi sou lekòl la → [ba adwat]

Ki jan yo fè yon sit estatik sou Cloudflare Workers SiteSa yo se pou mwen, pa sèvi ak yo tanpri :)

Sove yo akote siy la, nou pral bezwen yo tou nan twazyèm pati a.

Etap 4: Aktive Travayè yo

Domèn → Travayè → Jere Travayè yo

Nou chwazi yon non inik ak tarif Travayè → San limit ($5 pa mwa jodi a). Si ou vle, ou ka pita ajou nan vèsyon an gratis.

Pati 3: Premye deplwaman (deplwaman manyèl)

Mwen te fè premye deplwaman manyèl pou chèche konnen kisa ki te vrèman pase la. Malgre ke tout bagay sa yo ka fè pi senp:

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

  2. Ann ale nan anyè blog nou an: cd blog.example.com

  3. Lanse wrangler: wrangler init — site hugo-worker

  4. Kreye yon konfigirasyon pou wrangler (antre siy la lè yo mande l): wrangler config

Koulye a, an n eseye fè chanjman nan dosye ki fèk kreye a wrangler.toml (isit la lis konplè paramèt posib):

  1. Nou endike accountid ak zoneid

  2. Chanje wout nan yon bagay tankou *blog.example.com/*

  3. Nou endike fo pou travayèdev

  4. Chanje bokit an ./public (oswa kote sit estatik ou a ye)

  5. Si ou gen plis pase yon domèn nan chemen an, Lè sa a, ou ta dwe korije chemen an nan script k ap travay la: travayè-site/index.js (gade fonksyon handleEvent)

Gwo, li lè yo deplwaye sit la lè l sèvi avèk ekip la wrangler publish.

Pati 4: Deplwaman automatisation

Gid sa a ekri pou Gitlab, men li pran sans ak fasilite deplwaman otomatik an jeneral.

Etap 1: Kreye ak konfigirasyon pwojè nou an

  1. Kreye yon nouvo pwojè GitLab epi telechaje sit la: anyè blog.egzanp.com ak tout sa ki dwe lokalize nan anyè rasin pwojè a

  2. Nou mete varyab CFAPITOKEN isit la: Anviwònman → CI / CD → Varyab

Etap 2: Kreye yon fichye .gitlab-ci.yml epi kouri premye deplwaman an

Kreye yon fichye .gitlab-ci.yml nan rasin lan ak kontni sa a:

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 #

Nou lanse premye deplwaman an manyèlman (CI/CD → Pipelines → Kouri tiyo) oswa pa komèt nan branch mèt la. Voila!

Konklizyon

Oke, mwen ka discrete li yon ti kras, ak tout pwosesis la te pran jis plis pase dis minit. Men kounye a ou gen yon sit rapid ak deplwaman otomatik ak kèk nouvo lide sou ki lòt bagay ou ka fè ak Travayè yo.

 Travayè Cloudflare    Hugo    GitLab Ci

Sous: www.habr.com

Add nouvo kòmantè