🥇Si të vendosni një faqe statike me ndihmën e Yandex.Cloud Object Storage

Përshëndetje, Habr!

Në këtë artikull, do të flas se si të vendosni lehtësisht një faqe statike duke përdorur teknologjitë e Yandex-it, konkretisht Object Storage.

Në fund do të keni një faqe të hostuar në internet, e cila do të jetë e доступshme përmes një lidhje të jashtme.

Ky artikull do të jetë i dobishëm nëse jeni

Një zhvillues i fillestar që sapo po mëson programimin;
Një zhvillues që ka krijuar një portofol dhe dëshiron ta publikojë në mënyrë të hapur për ta treguar miqve dhe punëdhënësve.

Rreth meje

Së fundmi, kam zhvilluar një shërbim SaaS, një llak për tregun, ku njerëzit gjejnë trajnerë sportivë për stërvitje personale. Kam përdorur paketën e Amazon Web Services (AWS). Por sa më thellë të thellohem në projekt — aq më shumë detaje njihja për proceset e ndryshme të organizimit të një startup-i.

U përballa me problemet e mëposhtme:

AWS konsumonte shumë para. Pasi punova 3 vjet në kompanitë Enterprise, u mësova me gjërat si Docker, Kubernetes, CI/CD, blue green deployment, dhe, si një programues i ri në startup, desha të realizoja gjithashtu të njëjtën gjë. Në përfundim, arrita në përfundimin se çdo muaj AWS konsumonte rreth 300-400 dollarë. Më e shtrenjtë ishte Kubernetes, rreth 100 dollarë, me një minimum të vetëm me një klasër dhe një nod.
P.S. Në fillim nuk është e nevojshme të bëni kështu.
Pastaj, pasi mendova për anën ligjore, mësova për ligjin 152-FZ, i cili thoshte diçka si: "Të dhënat personale të qytetarëve të RF duhet të ruhen në territorin e RF", tjetër fare ndëshkimi, gjë që nuk doja. Vendosa të merrem me këto çështje derisa të mos më arrinin nga "lart" :).

I frymëzuar artikullin për migrimin e infrastrukturës nga Amazon Web Services në Yandex.Cloud, vendosa të studioj më në detaje stack-un e Yandex.

Për mua, karakteristikat kryesore të Yandex.Cloud ishin si vijon:

Më i lirë 2-3 herë (sipas artikullit të mësipërm dhe çmimeve publike)
Ruajtja e të dhënave personale të përdoruesve në territorin e RF, gjë që Amazon-i i madh ende nuk mund ta realizojë.

Studova për konkurentët e tjerë të këtij shërbimi, por në atë kohë Yandex po fitonte.

Tani që fola për veten, mund të kalojmë te puna.

Hapi 0. Të përgatitim sajtin

P primero, do të na nevojitet një sajt që dëshirojmë të vendosim në internet. Përqëndrohem si programues Angular, do të krijoj një shabllon të thjeshtë SPA aplikacioni, të cilin më pas do ta publikoj në internet.

P.S. Nëse keni njohuri në Angular apo dini mbi dokumentacionin e tij https://angular.io/guide/setup-local, kaloni te Hapi 1.

Do të instalojmë Angular-CLI për të krijuar faqe SPA në Angular:

npm install -g @angular/cli

Të krijojmë një aplikacion Angular me komandën në vijim:

ng new angular-habr-object-storage

Pastaj kalojmë në dosjen e aplikacionit dhe e nisim atë për të verifikuar funksionimin:

cd angular-habr-object-storage
ng serve --open

Aplikacioni është krijuar, por ende nuk është gati për t'u vendosur në hostim. Do ta mbledhim aplikacionin në një ndërtim të vogël (Production), për të hequr gjithçka të panevojshme dhe për të lënë vetëm skedarët e nevojshëm.
Në Angular, kjo mund të bëhet me komandën në vijim:

ng build --prod

Si rezultat i kësaj komande, në rrënjë të aplikacionit u shfaq një dosje dist me faqen tonë.

Punon. Tani kalojmë te hostimi.

Hapi 1.

Shkoni te faqja https://console.cloud.yandex.ru/ dhe klikojmë butonin "Këtu".

Shënim:

Për të përdorur shërbimin e Yandex-it mund t'ju nevojitet një email i Yandex-it (por kjo nuk është e sigurt).
Për disa funksione, do të duhet të vendosni para në llogarinë tuaj në kabinetin personal (minimumi 500 rubla).

Pas regjistrimit dhe identifikimit të suksesshëm, jemi në kabinetin personal.

Pastaj në menunë e majtë duhet të kërkoni shërbimin "Object Storage", të cilin do ta përdorim për hostimin e faqes.

Për një përmbledhje të terminologjisë:

Object Storage — është një ruajtës skedarësh, i pajtueshëm me teknologjinë e ngjashme të Amazon AWS S3, i cili ka gjithashtu API-në e tij për menaxhimin e ruajtjes nga kodi dhe mund të përdoret si AWS S3 për të hostuar një faqe static.
Në Object Storage krijojmë "bakete" (bucket / Korzhina), të cilat janë depo të veçanta për skedarët tanë.

Le të krijojmë një nga to. Për këtë, në konsolën e shërbimit klikoni butonin "Krijo baket".

Në formularin e krijimit të baketit ka fushat e mëposhtme, le të kalojmë shpejt mbi to:

Emri i baketit. Për lehtësi, do ta emërojmë si projekti Angular — angular-habr-object-storage
Madhësia maksimale. Vendosim aq sa peshojnë skedarët e faqes tonë, pasi faqja nuk ruhet falas dhe për çdo gigabajt të dedikuar, ne do të paguajmë pak ndaj Yandex.
Akses për leximin e objekteve. Vendosim "Publik", pasi përdoruesi duhet të marrë çdo skedar të faqes tonë statike për të shfaqur saktë dizajnin, për të realizuar skriptet etj.
Akses në listën e objekteve dhe Akses në leximin e konfigurimeve. E lëmë "Të kufizuar". Kjo është e nevojshme për të përdorur baketin si një ruajtës të brendshëm skedarësh për aplikacionet.
Klasa e magazinës. E lëmë "Standard". Kjo do të thotë se faqja jonë do të vizitohet shpesh, dhe pra do të shkarkohen shpesh skedarët që përbëjnë faqen. Plus, ky pikë ndikon në performancë dhe pagesë (shtoni linkun).

Shtypim "Krijo bucket" dhe bucket-i është krijuar.

Tani duhet të ngarkojmë faqen tonë në bucket. Mënyra më e thjeshtë është të hapim një dosje përkrah faqes sonë dist dhe ta tërheqim me dorë direkt në faqe. Kjo është më e lehtë se sa të shtypim butonin "Ngarko objekte", sepse në këtë rast dosjet nuk kalojnë dhe do t'i duhet t'i krijojmë me dorë në rendin e duhur.

Tani që faqja është ngarkuar në magazinë, ne mund t'i ofrojmë përdoruesve mundësinë të aksesojnë magazinën si një faqe.
Për këtë, në menunë e majtë, shtypim në skedën "Faqar".

Në faqen e cilësimeve të bucket-it si faqe, zgjidhim skedën "Hostim". Këtu tregojmë faqen kryesore të faqes, zakonisht index.html. Nëse keni një aplikacion SPA, ndoshta të gjitha gabimet trajtohen gjithashtu në faqen kryesore, prandaj do të tregojmë po ashtu index.html në faqen e gabimeve.

Ne menjëherë shohim se për cilin link do të jetë e aksesueshme faqja jonë. Shtypim ruaj.

Pas disa minutash, duke klikuar në lidhje, ne shohim se tani faqja jonë është e aksesueshme për të gjithë të interesuarit.

Faleminderit të gjithëve që e lexuat deri në fund! Kjo është artikulli im i parë, planifikoj të përshkruaj edhe shërbime të tjera të Yandex dhe integrimin e tyre me teknologjitë frontend dhe backend.

Më shkruani në komentet se sa interesante do t’ju duket të dini për shërbime të tjera të Yandex ose për përdorimin e Angular në zhvillimin modern.

Burimi: habr.com