Agency

HarVue Agency — Website + Admin CMS v7

Կայքը և կառավարման էջը (/admin) մեկ Cloudflare Worker-ում են։ Պահպանված են սև/մանուշակագույն դիզայնը, բիզնեսի ներկայացումը և բջջային կայքը։

Ինչ կարող եք կառավարել

• Կայքի 234 տեքստային հատվածներ՝ բաժիններով և որոնմամբ։
• Չորս հիմնական փաթեթների գները, անունները, նկարագրություններն ու ներառված ծառայությունները։ Հաշվիչը կարդում է հենց այդ գները։
• Աշխատանքների ավելացում, խմբագրում, հեռացում, հերթականություն, նկար/տեսանյութ, նպատակ և ընկերության աշխատանքը։
• Showreel, «Մեր մասին» նկարը, գլխավոր էկրանի չորս մեդիա-տեղերը։
• Նոր տեքստային/մեդիա բաժիններ, դրանց տեղադրությունը կայքում, հերթականությունը և տեսանելիությունը։
• Հիմնական բաժինների տեսանելիություն, SEO վերնագիր/նկարագրություն, Instagram հղում։
• Սևագիր, առանձին հրապարակում, նախորդ 10 հրապարակված տարբերակների վերականգնում։
• JSON պահուստային պատճենի արտահանում և ներմուծում։

Նոր բաժինները կառուցվածքային տեքստ/մեդիա բլոկներ են։ Ազատ HTML/JavaScript/CSS ներարկում չկա։ Հաշվիչի չորս հիմնական փաթեթների քանակը ֆիքսված է։ Կոնտակտային ձևը շարունակում է պատրաստել Instagram հաղորդագրություն, ինքնուրույն չի ուղարկում այն։

Օգտագործում՝ սերվերում տեղադրելուց հետո

1. Բացեք ձեր կայքի /admin հասցեն։ Cloudflare Access-ը կհաստատի ձեր ինքնությունը։
2. Բացեք համապատասխան բաժինը և խմբագրեք դաշտերը։
3. Նկարի/տեսանյութի մոտ սեղմեք «Ընտրել կամ վերբեռնել», ապա ընտրեք վերբեռնված ֆայլը։
4. Սեղմեք «Պահպանել սևագիրը», ապա «Նախադիտում»։
5. Սեղմեք «Հրապարակել» և հաստատեք։ Այցելուների բովանդակությունը փոխվում է միայն այս քայլից հետո։

Ընդունվում են JPG, PNG, WebP, MP4, WebM ֆայլեր՝ մինչև 25 ՄԲ։ Ավելի մեծ ֆայլի համար օգտագործեք ուղղակի HTTPS մեդիա հղում։ YouTube դիտման էջը ուղղակի MP4 հղում չէ։ iPhone MOV ֆայլերը նախ փոխարկեք MP4-ի։ Ֆայլը դաշտից հեռացնելը չի ջնջում այն պահոցից, որպեսզի նախորդ տարբերակները չկոտրվեն։

Տեղական գործարկում

Պահանջվում է Node.js 22+։ Կայքի Worker runtime-ը արտաքին գրադարան չի պահանջում, իսկ տեղադրման համար օգտագործվում է Wrangler CLI։

npm run build
npm test
npm run dev

Բացեք http://localhost:4173/admin։ Տեղական մշակման սերվերը ավտոմատ տրամադրում է փորձնական ադմինի ինքնություն և պահում տվյալները .preview-data/-ում։ Այն միայն տեղական մշակման համար է․ երբեք մի տեղադրեք scripts/dev.mjs-ը հանրային սերվերում։

Cloudflare Workers + GitHub տեղադրում

Այս ZIP-ի համար պետք է օգտագործել Cloudflare Workers, ոչ թե սովորական Cloudflare Pages static deploy։ public/index.html-ը build-ի ընթացքում ներառվում է dist/server/index.js Worker-ի մեջ։ Այդ պատճառով կայքի իրական մուտքը կարգավորում է wrangler.jsonc ֆայլը. առանձին root index.html ստեղծելը պետք չէ։ Worker-ը ինքն է / հասցեն ուղղորդում դեպի ներառված public/index.html, իսկ /admin-ը՝ public/admin.html։

1. Cloudflare R2 պահոց

1. Բացեք Cloudflare Dashboard → R2 Object Storage → Create bucket։
2. Անվանեք այն ճիշտ harvue-cms-media։ wrangler.jsonc-ի BUCKET binding-ը հենց այս անունն է սպասում։
3. Այս պահոցում Worker-ը պահելու է հրապարակված/սևագիր վիճակը (cms/state.json) և վերբեռնված մեդիան (media/)։ Մի ջնջեք կամ մի վերաանվանեք այն, երբ արդեն տվյալներ ունի։

2. Տեղադրեք GitHub-ից

1. Բեռնեք այս թղթապանակի ամբողջ պարունակությունը GitHub repository-ի root-ում։ Մի բեռնեք միայն public/ թղթապանակը։ Root-ում պետք է լինեն package.json, wrangler.jsonc, worker/, public/, scripts/, tests/ և .github/workflows/deploy.yml։
2. Cloudflare Dashboard → Workers & Pages → բացեք/ստեղծեք Worker harvue-visual-studio անունով, կամ առաջին deploy-ը կատարեք GitHub Actions-ով։ Նշում․ harvue-visual-studio-ը Cloudflare-ի տեխնիկական Worker ID-ն է և պահպանված է՝ արդեն միացված domain-ի կապը չխախտելու համար։ Կայքի և ադմինի հանրային բրենդը՝ HarVue Agency։
3. GitHub repository → Settings → Secrets and variables → Actions → New repository secret-ում ավելացրեք՝ CLOUDFLARE_API_TOKEN և CLOUDFLARE_ACCOUNT_ID։ Token-ը ստեղծեք Cloudflare-ում՝ ընտրված հաշվին Worker deploy անելու համար անհրաժեշտ Workers Scripts permissions-ով (և R2 permissions-ով, եթե ձեր հաշվի կարգավորումներով binding-ի ստուգումը դրանք պահանջում է)։
4. Workflow-ն աշխատում է main ճյուղում ամեն push-ից հետո։ Եթե հիմնական ճյուղը master է, .github/workflows/deploy.yml-ում փոխեք branches: [main]-ը։ Առաջին անգամ կարող եք GitHub → Actions-ից գործարկել workflow-ն ձեռքով։
5. Եթե նախընտրում եք տերմինալից տեղադրել՝ Node.js 22+ ունեցող թղթապանակում գործարկեք npm install, հետո npx wrangler login, ապա npm run deploy։

3. Worker-ի միջավայրային կարգավորումներ

Cloudflare Dashboard → Workers & Pages → harvue-visual-studio → Settings → Variables and Secrets բաժնում ավելացրեք հետևյալ Text փոփոխականները։ Մի գրեք դրանց փոխարեն հորինված արժեքներ։

• AUTH_MODE = cloudflare-access
• ADMIN_EMAIL = այն email-ը, որով մուտք եք գործելու ադմին
• CF_ACCESS_TEAM_DOMAIN = https://YOUR-TEAM-NAME.cloudflareaccess.com (փոխարինեք ձեր իրական Cloudflare Zero Trust team հասցեով)
• CF_ACCESS_AUD = /admin* հավելվածի իրական Application Audience (AUD) Tag-ը
• CF_ACCESS_API_AUD = /api/admin* հավելվածի իրական Application Audience (AUD) Tag-ը (եթե երկու ուղիներն օգտագործում են նույն Access հավելվածը, կարող եք նույն AUD արժեքը նշել երկուսում էլ)

wrangler.jsonc-ում միացված է keep_vars: true, որպեսզի dashboard-ում ավելացրած փոփոխականները մնան deploy-ների ժամանակ։ Worker-ը ստուգում է Cloudflare Access JWT-ի ստորագրությունը, issuer-ը, audience-ը, ժամկետը և օգտվողի email-ը. միայն header-ի տեքստին վստահելն այստեղ բավարար չէ։

4. Միացրեք կայքը ձեր տիրույթին

1. Cloudflare Dashboard → Workers & Pages → harvue-visual-studio → Settings → Domains & Routes → Add → Custom Domain։ Ընտրեք ձեր Cloudflare-ում ակտիվ տիրույթը/ենթատիրույթը, օրինակ՝ studio.your-domain.com։ wrangler.jsonc-ում workers_dev: false է, ուստի կայքը նախատեսված է custom domain-ով աշխատելու համար։
2. Մի փոխեք R2 binding-ի անունը BUCKET-ից, քանի որ կոդը հենց այդ անունով է դիմում պահոցին։

5. Պաշտպանեք միայն ադմինի հասցեները Cloudflare Access-ով

Cloudflare Zero Trust → Access controls → Applications → Create application → Self-hosted։ Ստեղծեք երկու հավելված՝ նույն email-ին թույլատրող Allow policy-ով.

• studio.your-domain.com/admin* — ադմինի էջը պաշտպանելու համար։
• studio.your-domain.com/api/admin* — ադմինի API-ն պաշտպանելու համար։

Երկու հավելվածում էլ թույլատրեք միայն ADMIN_EMAIL-ում նշված email-ը։ Access-ում մի պաշտպանեք ամբողջ studio.your-domain.com/* հասցեն, այլապես հանրային գլխավոր էջը նույնպես կպահանջի մուտք։ Access-ի յուրաքանչյուր հավելվածի Settings-ից պատճենեք Application Audience (AUD) Tag-ը․ տեղադրեք էջի հավելվածինը CF_ACCESS_AUD-ում, API հավելվածինը՝ CF_ACCESS_API_AUD-ում։ Եթե dashboard-ը թույլ է տալիս երկու ճանապարհն ավելացնել նույն հավելվածի տակ, երկու փոփոխականներում էլ նշեք այդ մեկ AUD արժեքը։ Քանի որ Worker-ը ինքն էլ ստուգում է ստորագրությունը, Access policy-ի սխալ կարգավորումը չի տալիս ադմինի API-ին ազատ մուտք։

6. Ստուգում

• https://studio.your-domain.com/ — հանրային գլխավոր էջը։
• https://studio.your-domain.com/admin — պետք է հարցնի Cloudflare Access մուտքը, հետո բացի կառավարումը։
• Ադմինում պահպանեք սևագիրը, բացեք նախադիտումը և հրապարակեք։ Հրապարակված փոփոխությունները պետք է երևան գլխավոր էջում։
• Եթե R2 binding-ը կամ ADMIN_EMAIL/Access փոփոխականներից որևէ մեկը բացակայում է, կառավարման API-ն ցույց կտա կարգավորման սխալ։

Կարևոր․ այս նախագիծը մի տեղադրեք Cloudflare Pages-ի սովորական static mode-ով՝ public output directory-ով, եթե ուզում եք աշխատող ադմին։ Այդ ձևով HTML/CSS-ը կբացվի, բայց Worker API-ն ու R2 CMS-ը չեն գործի։

Նախկին managed Sites տեղադրում

AUTH_MODE=sites հին մեխանիզմը մնացել է կոդում՝ նախորդ, հատուկ managed Sites միջավայրի համար։ Cloudflare Workers տեղադրման դեպքում օգտագործեք AUTH_MODE=cloudflare-access և վերևի քայլերը։ Սովորական workers.dev հասցեում AUTH_MODE=sites մի օգտագործեք․ այնտեղ հատուկ վստահելի ChatGPT headers-ները գոյություն չունեն։

Տվյալների պահպանում

R2-ի cms/state.json-ը մեկ ամբողջական բովանդակության փաստաթուղթ է՝ սևագիր, հրապարակված տարբերակ, revision և վերջին 10 տարբերակներ։ ETag պայմանական գրառումը կանխում է երկու պատուհանների փոփոխությունների լուռ փոխարինումը։ Մեդիան պահվում է media/-ում՝ պատահական անուններով։ Upload-ը ստուգում է չափը և ֆայլի տեսակի առաջին bytes-ը։ Video Range/HEAD հարցումները աջակցվում են։ Մուտքը server-side է, գրառումները պահանջում են նույն origin-ը և CMS header-ը։

JSON պատճենը պարունակում է տեքստերն ու մեդիայի հղումները, ոչ մեդիա ֆայլերի bytes-ը։ Նոր պահոց տեղափոխելիս անհրաժեշտ է տեղափոխել նաև media/ ֆայլերը։ Մեդիայի URL-ները նախատեսված են կայքում ցուցադրելու համար․ դրանք գաղտնի ֆայլերի պահոց չեն։

Կոդի կառուցվածք

• public/ — կայք, կառավարման UI, content bootstrap, դիզայն։
• worker/index.js — պաշտպանված API, Cloudflare Access JWT վավերացում, պահպանում, հրապարակում, մեդիա։
• wrangler.jsonc — Cloudflare Worker entrypoint-ը (dist/server/index.js) և R2 binding-ը։
• .github/workflows/deploy.yml — GitHub main ճյուղի push-ից հետո build/test/deploy ավտոմատացում։
• scripts/build.mjs — static assets-ը ներառում է Worker-ում։
• scripts/prepare.py — index.html-ի տեքստերի կատալոգի վերակառուցում։ Կատալոգի բանալիները կապված են HTML տեքստային հանգույցների հերթականությանը․ կառուցվածքի հետագա ծրագրային փոփոխության ժամանակ պետք է տեղափոխել նաև պահպանված text overrides-ը։
• tests/ — auth, CSRF, draft/publish, restore, concurrency, media validation/range ստուգումներ։

Ստուգում

Տեղային ստուգման հրամաններն են npm run check-ը կամ առանձին npm run build, node scripts/validate-artifact.mjs, npm test։ Build-ը ստուգում է Worker-ի մուտքային ֆայլը, իսկ թեստերը՝ բովանդակության API-ն, draft/publish հոսքը, R2 mock-ի մեդիան և basic auth/CSRF կանոնները։ Իրական Cloudflare Access հավելվածները, domain route-ը և R2 bucket-ը հնարավոր է վերջնականից վերջնական ստուգել միայն քո Cloudflare հաշվում տեղադրումից հետո։