ProHoster > Blog > Administrim > Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Përshëndetje, Habr!

Në këtë artikull, do t'ju tregoj se si të vendosni një faqe statike lehtësisht dhe thjeshtë duke përdorur teknologjitë e Yandex, konkretisht Object Storage.

Në fund do të keni një faqe të vendosur në rrjet, e cila do të jetë e aksesueshme me një lidhje të jashtme.

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

  • NjĂ« zhvillues i ri, i cili sapo po mĂ«sohet programimin;
  • NjĂ« zhvillues, i cili ka krijuar njĂ« portofol dhe dĂ«shiron ta vendosĂ« atĂ« nĂ« publik, pĂ«r t'ua treguar miqve dhe punĂ«dhĂ«nĂ«sve.

Për vetë

SĂ« fundmi, kam zhvilluar njĂ« shĂ«rbim SaaS, njĂ« lloj tregu, ku njerĂ«zit gjejnĂ« trajnerĂ« sportivĂ« pĂ«r stĂ«rvitje personale. Kam pĂ«rdorur grumbullin Amazon Web Services (mĂ« pas AWS). Por sa mĂ« thellĂ« qĂ« hyja nĂ« projekt — aq mĂ« shumĂ« nuanca zbulova pĂ«r proceset e ndryshme tĂ« organizimit tĂ« njĂ« startup.

U përballa me problemet e mëposhtme:

  • AWS shkaktonte shumĂ« shpenzime. Pas tre vitesh punĂ« nĂ« kompani Enterprise, u zakonisha me gjĂ«rat si Docker, Kubernetes, CI/CD, implementim blej-gjelbĂ«r 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 pĂ«r muaj AWS konsumonte rreth 300-400 dollarĂ«. MĂ« e shtrenjta ishte Kubernetes, rreth 100 dollarĂ«, duke filluar me njĂ« klaster dhe njĂ« nod.
    P.S. Në fillim nuk është nevojshme ta bëni këtë.
  • MĂ« pas, duke menduar pĂ«r anĂ«n juridike, mĂ«sova mbi ligjin 152-FZ, i cili fliste pĂ«rafĂ«rsisht kĂ«shtu: "TĂ« dhĂ«nat personale tĂ« qytetarĂ«ve tĂ« RF duhet tĂ« ruhen nĂ« territorin e RF", pĂ«rndryshe ndĂ«shkimet, qĂ« unĂ« nuk doja. Vendosa t'i merrem kĂ«tyre çështjeve, derisa "nga lart" nuk arrin ndonjĂ«herĂ« :)

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

Për mua, karakteristikat kyçe të Yandex.Cloud ishin si më poshtë:

Kam studiuar konkurentët e tjerë të këtij shërbimi, por në atë moment, Yandex fitonte.

Kam treguar për veten, tani mund të kalojmë te puna.

Hapi 0. Të përgatisim faqen

Në fillim, na nevojitet një faqe, që duam të vendosim në internet. Duke qenë se unë jam zhvillues Angular, do të krijoj një model të thjeshtë të aplikacionit SPA, të cilin më pas do ta vendos në internet.

P.S. Nëse dini për Angular ose e dini 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

Le të krijojmë një aplikacion Angular duke përdorur komandën vijues:

ng new angular-habr-object-storage

Më pas kalojmë në dosjen e aplikacionit dhe e fillojmë atë për të verifikuar funksionimin:

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

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Aplikacioni është krijuar, por ende nuk është gati për vendosje në hosting. Do të krijojmë një build të vogël (Production) për të hequr të gjitha të tepërtat dhe për të lënë vetëm skedarët e nevojshëm.
Në Angular, kjo mund të bëhet me komandën vijues:

ng build --prod

Si rezultat i kësaj komande, në rrënjën e aplikacionit u shfaq një folder dist me sajtin tonë.

Funksionon. Tani kalojmë në hosting.

Hapi 1.

Go to the website https://console.cloud.yandex.ru/ dhe klikojmë në butonin "Konektohu".

VĂ«rejtje:

  • PĂ«r tĂ« pĂ«rdorur shĂ«rbimin e Yandex, mund tĂ« nevojitet njĂ« email Yandex (por kjo nuk Ă«shtĂ« e sigurtĂ«).
  • PĂ«r disa funksione do tĂ« duhet tĂ« depozitoni para nĂ« llogarinĂ« tuaj personale (minimumi 500 rubla).

Pas regjistrimit dhe autorizimit të suksesshëm, jemi në llogarinë tonë personale.

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Pastaj, në menunë majtas duhet të gjejmë shërbimin "Object Storage", që do të përdorim për hosting-un e sajtit.

Në shkurt rreth terminologjisë:

  • Object Storage Ă«shtĂ« njĂ« ruajtĂ«s skedarĂ«sh qĂ« Ă«shtĂ« i pĂ«rputhshĂ«m me teknologjinĂ« e ngjashme tĂ« Amazon AWS S3, e cila gjithashtu ka API-nĂ« e saj pĂ«r menaxhimin e ruajtjes nga kodi dhe ashtu si AWS S3 mund tĂ« pĂ«rdoret pĂ«r tĂ« vendosur njĂ« sajt statik.
  • NĂ« Object Storage krijojmĂ« "buckets" (kosh) qĂ« janĂ« ruajtĂ«s tĂ« veçantĂ« pĂ«r skedarĂ«t tanĂ«.

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Le të krijojmë një prej tyre. Për këtë, në konsolën e shërbimit klikojmë në butonin "Krijo bucket".

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Në formën e krijimit të bucket-it ka fushat vijues, le të kalojmë shpejt mbi to:

  • Emri i bucket-it. PĂ«r lehtĂ«si, le tĂ« e quajmĂ« po ashtu si projekti Angular — angular-habr-object-storage
  • Maks. madhĂ«sia. Vendosim aq sa peshojnĂ« skedarĂ«t e sajtit sepse sajtin nuk e ruajmĂ« pĂ«r falas dhe pĂ«r çdo gigabajt tĂ« caktuar, do tĂ« paguajmĂ« Yandex-it njĂ« çmim tĂ« vogĂ«l.
  • Aksesi pĂ«r tĂ« lexuar objektet. Vendosim "Publik", sepse pĂ«rdoruesi duhet tĂ« marrĂ« çdo skedar tĂ« sajtit tonĂ« statik, nĂ« mĂ«nyrĂ« qĂ« dizajni tĂ« shfaqet korrekt, skriptet tĂ« kryejnĂ« punĂ«n e tyre etj.
  • Aksesi nĂ« listĂ«n e objekteve dhe Aksesi nĂ« leximin e konfigurimeve. E lĂ«mĂ« "TĂ« kufizuara". Kjo Ă«shtĂ« e nevojshme pĂ«r ta pĂ«rdorur bucket-in si njĂ« ruajtĂ«s tĂ« brendshĂ«m pĂ«r skedarĂ«t e aplikacioneve.
  • Klasa e ruajtjes. LĂ«mĂ« "Standarde". Kjo do tĂ« thotĂ« se faqja jonĂ« do tĂ« vizitohet shpesh, dhe pra, do tĂ« shkarkohen shpesh skedarĂ«t qĂ« pĂ«rbĂ«jnĂ« faqen. Shtesa gjithashtu ndikon nĂ« performancĂ«n dhe pagesĂ«n (shtoni lidhjen).

Klikojmë "Krijo shportë" dhe shporta është krijuar.

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Tnow duhet të ngarkohet faqja jonë në shportë. Mënyra më e lehtë është të hapim një dosje përkrah dist faqes sonë dhe ta tërheqim me dorë direkt në faqe. Kjo është më e përshtatshme se sa të klikoni butonin "Ngarko objekte", sepse në atë rast dosjet nuk trasferohen dhe do të duhet t'i krijoni me dorë në rendin e duhur.

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Pra, faqja u ngarkua në ruajtje, tani mund të ofrojmë përdoruesve mundësinë për t'u qasur në ruajtje si në një faqe.
Për këtë, nga ana e majtë në menu, klikoni në tabin "Faqja e internetit".

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

Në faqen e cilësimeve të shportës si një faqe, zgjidhni tabin "Hostim". Këtu shenoni faqen kryesore të faqes, zakonisht është index.html. Nëse keni një aplikacion SPA, ndoshta të gjitha gabimet trajtohen gjithashtu në faqen kryesore, prandaj në faqen e gabimeve do të shenojmë gjithashtu index.html.

Ne menjëherë shohim se në cilën lidhje do të jetë e aksesueshme faqja jonë. Klikojmë ruaj.

Pas pesë minutash, duke kaluar nëpër lidhjen, shohim se tani faqja jonë është e aksesueshme për të gjithë dëshmitarët.

Si të vendosni një faqe statike me Yandex.Cloud Object Storage

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

Shkruani në komentet se sa të interesuar jeni të dini për shërbime të tjera të Yandex ose për përdorimin e Angular në zhvillimin modern.

Burimi: habr.com

Blini hosting tĂ« besueshĂ«m pĂ«r faqe interneti me mbrojtje nga DDoS, serverĂ« VPS VDS đŸ”„ Blini hosting tĂ« besueshĂ«m pĂ«r faqe interneti me mbrojtje nga DDoS, serverĂ« VPS VDS | ProHoster