🥇Ինչպես ստեղծել ստատիկ կայք Cloudflare Workers Sites-ում

Բարեւ Ձեզ! Ես Դիմա եմ, ես Wrike-ի SysOps թիմի տեխնիկական ղեկավարն եմ: Այս հոդվածում ես ձեզ կասեմ, թե ինչպես կարելի է վեբկայքը հնարավորինս մոտեցնել օգտատիրոջը և ավտոմատացնել դրա տեղակայումը ամսական 10 րոպեում և 5 դոլարով: Հոդվածը գրեթե կապ չունի այն խնդիրների հետ, որոնք մենք լուծում ենք մեր թիմի ներսում։ Սա ավելի շուտ իմ անձնական փորձն ու տպավորություններն են՝ ծանոթանալով ինձ համար նոր տեխնոլոգիայի հետ: Ես փորձեցի հնարավորինս մանրամասն նկարագրել քայլերը, որպեսզի հրահանգները օգտակար լինեն տարբեր փորձ ունեցող մարդկանց համար: Հուսով եմ՝ կվայելեք։ Գնա՛

Այսպիսով, միգուցե դուք արդեն գտել եք կայք հյուրընկալելու պարզ և էժան միջոց: Գուցե նույնիսկ անվճար, ինչպես նկարագրված է սրա մեջ հիանալի հոդված.

Բայց հանկարծ դուք դեռ ձանձրանում եք և ցանկանում եք շոշափել տեխնոլոգիայի նոր խիզախ աշխարհը: Ենթադրենք, դուք մտածում եք տեղակայման ավտոմատացման մասին և կցանկանայիք հնարավորինս արագացնել ձեր կայքը: Այս հոդվածում մենք կօգտագործենք Ուգո, բայց սա ընտրովի է:

Մենք օգտագործում ենք Gitlab CI/CD ավտոմատացման համար, իսկ ինչ վերաբերում է արագացմանը: Եկեք տեղակայենք կայքը անմիջապես Cloudflare-ում՝ օգտագործելով Աշխատողների կայքեր.

Ինչ է պահանջվում սկսելու համար:

Gitlab (ձեր սեփական կամ ամպամած)
Հաշիվ Cloudflare-ում
Տեղադրվել nodejs/npm

Մաս 1. Hugo-ի տեղադրում

Եթե դուք արդեն տեղադրել եք Hugo-ն, կամ եթե նախընտրում եք այլ ստատիկ կայքի գեներատոր (կամ ընդհանրապես չեք օգտագործում), ապա կարող եք բաց թողնել այս մասը:

Ներբեռնեք Hugo-ից https://github.com/gohugoio/hugo/releases
Մենք տեղադրում ենք Hugo գործարկվող ֆայլը ըստ սահմանվածներից մեկի PATH ուղիներ
Նոր կայքի ստեղծում. hugo new site blog.example.com
Փոխեք ընթացիկ գրացուցակը նոր ստեղծվածին. cd blog.example.com
Ընտրեք դիզայնի թեմա (https://github.com/budparr/gohugo-theme-ananke/releases կամ ինչ)
Եկեք ստեղծենք առաջին գրառումը. hugo new posts/my-amazing-post.md
Ստեղծված ֆայլին բովանդակություն ավելացրեք. բովանդակություն/գրառումներ/my-amazing-post.md.
Երբ ամեն ինչ ավարտված է, փոխեք նախագծի արժեքը սուտ
Ստատիկ ֆայլերի ստեղծում. hugo -D

Այժմ մեր ստատիկ կայքը գտնվում է գրացուցակի ներսում ./հանրային և պատրաստ է ձեր առաջին ձեռքով տեղակայմանը:

Մաս 2. Cloudflare-ի կարգավորում

Այժմ եկեք նայենք Cloudflare-ի նախնական կարգավորումներին: Ենթադրենք, որ մենք արդեն ունենք տիրույթ կայքի համար։ Որպես օրինակ վերցնենք blog.example.com.

Քայլ 1. Ստեղծեք DNS մուտք

Նախ ընտրեք մեր տիրույթը, այնուհետև ցանկի տարրը DNS. Մենք ստեղծում ենք բլոգի A-record և դրա համար նշում ենք ինչ-որ մտացածին IP (սա պաշտոնական առաջարկություն, բայց նրանք կարող էին մի փոքր ավելի գեղեցիկ դարձնել):

Քայլ 2. Cloudflare Token

Իմ էջը -> API նշաններ ներդիր-> Ստեղծեք նշան -> Ստեղծեք հատուկ նշան

Այստեղ դուք պետք է սահմանափակեք նշանը հաշիվներով և գոտիներով, բայց թողեք Խմբագրել տարբերակը նկարում նշված թույլտվությունների համար:

Պահպանեք նշանը ապագայի համար, այն մեզ պետք կգա երրորդ մասում:

Քայլ 3. Ստացեք հաշիվ և գոտի

Դոմեյն → Overview → [աջ կողագոտ]

Սրանք իմն են, խնդրում եմ, մի օգտագործեք :)

Պահպանեք դրանք նշանի կողքին, երրորդ մասում մեզ նույնպես պետք կգան։

Քայլ 4. Ակտիվացրեք աշխատողներին

Դոմեյն → Աշխատողներ → Կառավարեք աշխատողներին

Մենք ընտրում ենք եզակի անուն և սակագին Workers → Unlimited ($5 ամսական այսօր): Ցանկության դեպքում կարող եք հետագայում թարմացնել անվճար տարբերակին:

Մաս 3. Առաջին տեղակայում (ձեռքով տեղակայում)

Ես առաջին ձեռքով տեղակայումն արեցի՝ պարզելու, թե իրականում ինչ է կատարվում այնտեղ: Չնայած այս ամենը կարելի է անել ավելի պարզ.

Տեղադրեք wrangler. npm i @cloudflare/wrangler -g
Եկեք գնանք մեր բլոգի գրացուցակը. cd blog.example.com
Գործարկել wrangler: wrangler init — site hugo-worker
Ստեղծեք կոնֆիգուրացիա wrangler-ի համար (մուտքագրեք նշանը, երբ հարցնում են). wrangler config

Այժմ փորձենք փոփոխություններ կատարել նորաստեղծ ֆայլում wrangler.toml (այստեղ հնարավոր պարամետրերի ամբողջական ցանկը):

Մենք նշում ենք հաշվային և զոնիդային
Մենք փոխվում ենք երթուղին նման մի բանի *blog.example.com/*
Մենք նշում ենք սուտ համար աշխատողներդև
Փոխել դույլը ./public (կամ որտեղ է գտնվում ձեր ստատիկ կայքը)
Եթե դուք ունեք մեկից ավելի տիրույթ ուղու վրա, ապա դուք պետք է ուղղեք ուղին աշխատանքային սցենարում. Workers-site/index.js (տես գործառույթ handleEvent)

Հիանալի է, ժամանակն է տեղակայել կայքը՝ օգտագործելով թիմը wrangler publish.

Մաս 4. Տեղակայման ավտոմատացում

Այս ուղեցույցը գրված է Gitlab-ի համար, սակայն այն արտացոլում է ընդհանուր առմամբ ավտոմատացված տեղակայման էությունն ու հեշտությունը:

Քայլ 1. Ստեղծեք և կազմաձևեք մեր նախագիծը

Ստեղծեք նոր GitLab նախագիծ և վերբեռնեք կայքը՝ գրացուցակը blog.example.com ամբողջ բովանդակությամբ պետք է տեղակայվի ծրագրի արմատային գրացուցակում
Մենք սահմանել ենք փոփոխական CFAPITOKEN այստեղ: Կարգավորումներ → CI / CD → Փոփոխականների

Քայլ 2. Ստեղծեք .gitlab-ci.yml ֆայլ և գործարկեք առաջին տեղակայումը

Ստեղծեք ֆայլ .gitlab-ci.yml արմատում՝ հետևյալ բովանդակությամբ.

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 #

Մենք գործարկում ենք առաջին տեղակայումը ձեռքով (CI/CD → Խողովակաշարեր → Գործարկել խողովակաշարը) կամ հանձնվելով գլխավոր մասնաճյուղին: Voila!

Ամփոփում

Դե, ես գուցե մի փոքր թերագնահատեցի, և ամբողջ գործընթացը տևեց տասը րոպեից մի փոքր ավելի: Բայց հիմա դուք ունեք արագ կայք՝ ավտոմատ տեղակայմամբ և որոշ թարմ գաղափարներ այն մասին, թե ուրիշ ինչ կարող եք անել Workers-ի հետ:

Cloudflare-ի աշխատողներ Ուգո GitLab Ci

Source: www.habr.com

Ինչպես ստեղծել ստատիկ կայք Cloudflare Workers Sites-ում