Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Hej Habr!

Në këtë artikull, unë do t'ju tregoj se si të organizoni lehtësisht dhe thjesht një faqe interneti statike duke përdorur teknologjitë Yandex, domethënë Ruajtja e objekteve.

Në fund, ju do të keni një faqe interneti të strehuar në internet që do të jetë e aksesueshme përmes një lidhjeje të jashtme.

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

  • Një zhvillues fillestar që sapo po mëson të programojë;
  • Një zhvillues që ka krijuar një portofol dhe dëshiron ta vendosë atë në domenin publik për t'ua shfaqur miqve dhe punëdhënësve.

Rreth vetes sime

Kohët e fundit, po zhvilloja një shërbim SaaS, një lloj tregu ku njerëzit gjejnë trajnerë sportivë për stërvitje personale. Përdori grumbullin e Shërbimeve të Uebit të Amazon (në tekstin e mëtejmë të referuar si AWS). Por sa më thellë zhytesha në projekt, aq më shumë nuanca mësova për proceset e ndryshme të organizimit të një startup-i.

Kam hasur në problemet e mëposhtme:

  • AWS po konsumonte shumë para. Duke punuar për 3 vjet në kompanitë Enterprise, u mësova me gëzime të tilla si Docker, Kubernetes, CI/CD, vendosja e gjelbër blu dhe, si një programues aspirues fillestar, doja të zbatoja të njëjtën gjë. Si rezultat, arrita në përfundimin se AWS konsumonte 300-400 dollarë në muaj. Kubernetes doli të ishte më i shtrenjti, rreth 100 dollarë, me një pagë minimale prej një grupi dhe një nyjeje.
    PS Nuk është e nevojshme ta bëni këtë në fillim.
  • Më pas, duke menduar për anën ligjore, mësova për ligjin 152-FZ, i cili thoshte diçka si më poshtë: "Të dhënat personale të qytetarëve të Federatës Ruse duhet të ruhen në territorin e Federatës Ruse", përndryshe gjoba, të cilat nuk i kam dashur. Vendosa t'i trajtoj këto çështje përpara se të më vinte nga lart :).

I frymëzuar artikull në lidhje me migrimin e infrastrukturës nga Shërbimet e Uebit të Amazon në Yandex.Cloud, vendosa të studioj më në detaje pirgun e Yandex.

Për mua, tiparet kryesore të Yandex.Cloud ishin si më poshtë:

Kam studiuar konkurrentë të tjerë të këtij shërbimi, por në atë kohë Yandex po fitonte.

Unë ju kam thënë për veten time, kështu që ne mund të merremi me punë.

Hapi 0. Përgatitni faqen

Së pari, na duhet një faqe interneti që duam ta vendosim në internet. Meqenëse jam një zhvillues Angular, do të bëj një shabllon të thjeshtë aplikacioni SPA, të cilin më pas do ta postoj në internet.

PS Kush kupton Angular ose di dokumentacionin e tij https://angular.io/guide/setup-local, shkoni në Hapi 1.

Le 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 e mëposhtme:

ng new angular-habr-object-storage

Tjetra, shkoni te dosja e aplikacionit dhe niseni për të kontrolluar funksionalitetin e tij:

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

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Aplikacioni është krijuar, por nuk është ende gati për pritje. Le ta grumbullojmë aplikacionin në një ndërtim të vogël (Prodhimi) për të hequr të gjitha gjërat e panevojshme dhe për të lënë vetëm skedarët e nevojshëm.
Në Angular mund ta bëni këtë me komandën e mëposhtme:

ng build --prod

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

Punimet. Tani le të kalojmë te hostimi.

Hapi 1.

Le të shkojmë në sit https://console.cloud.yandex.ru/ dhe klikoni në butonin "Lidhu".

Shenim:

  • Për të përdorur shërbimin Yandex, mund t'ju duhet posta Yandex (por kjo nuk është e sigurt)
  • Për disa funksione do të duhet të depozitoni para në llogarinë tuaj në llogarinë tuaj personale (minimumi 500 rubla).

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

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Më pas në të majtë në meny ju duhet të gjeni shërbimin "Ruajtja e objekteve", të cilin do ta përdorim për të pritur faqen.

Shkurtimisht në terma:

  • Ruajtja e objekteve është një ruajtje skedarësh e pajtueshme me teknologjinë e ngjashme AWS S3 të Amazon, e cila gjithashtu ka API-në e vet për menaxhimin e ruajtjes nga kodi dhe, si AWS S3, mund të përdoret për të pritur një sajt statik.
  • Në Object Storage ne krijojmë "buckets" (buckets), të cilat janë zona të veçanta të ruajtjes për skedarët tanë.

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Le të krijojmë një prej tyre. Për ta bërë këtë, në tastierën e shërbimit, klikoni në butonin "Krijo kovë".

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Formulari për krijimin e një kovë ka fushat e mëposhtme, le t'i kalojmë ato:

  • Emri i kovës. Për thjeshtësi, le ta quajmë projektin njësoj si Angular - angular-habr-object-storage
  • Maks. madhësia. Ne vëmë bast aq sa peshon faqja jonë, pasi faqja nuk ruhet falas dhe për çdo gigabajt të ndarë, ne do t'i paguajmë Yandex një qindarkë të bukur.
  • Qasja për të lexuar objekte. Ne e vendosëm atë në "Public", pasi përdoruesi duhet të marrë çdo skedar të faqes sonë statike në mënyrë që faqosja të vizatohet saktë në të, të mund të përpunohen skriptet, etj.
  • Qasja në listën e objekteve dhe Qasja për të lexuar cilësimet. Lëreni si "të kufizuar". Kjo është e nevojshme për të përdorur kovën si ruajtje të brendshme të skedarëve për aplikacione.
  • Klasa e ruajtjes. Lëreni si "Standard". Kjo do të thotë që faqja jonë do të vizitohet shpesh dhe për këtë arsye skedarët që përbëjnë faqen do të shkarkohen shpesh. Plus, artikulli ndikon në performancën dhe pagesën (fut lidhjen).

Klikoni "Krijo një kovë" dhe kova krijohet.

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Tani duhet të ngarkojmë faqen tonë në kovë. Mënyra më e lehtë është të hapni një dosje afër dist faqen tonë dhe tërhiqeni drejtpërdrejt në faqe duke përdorur doreza. Kjo është më e përshtatshme sesa të klikoni në butonin "Ngarko objektet", sepse në këtë rast dosjet nuk transferohen dhe do t'ju duhet t'i krijoni ato manualisht në sekuencën e duhur.

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Pra, faqja ngarkohet në memorie, kështu që ne mund t'u ofrojmë përdoruesve mundësinë për të hyrë në ruajtje si një faqe interneti.
Për ta bërë këtë, në anën e majtë të menusë, klikoni në skedën "Uebfaqja".

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

Në faqen për konfigurimin e një kovë si sit, zgjidhni skedën "Hosting". Këtu tregojmë faqen kryesore të faqes, zakonisht index.html. Nëse keni një aplikacion SPA, atëherë me siguri të gjitha gabimet përpunohen gjithashtu në faqen kryesore, kështu që ne do të tregojmë gjithashtu index.html në faqen e gabimit.

Ne menjëherë shohim se përmes cilës lidhje do të jetë e aksesueshme faqja jonë. Kliko ruaj.

Pas rreth 5 minutash, duke klikuar në lidhjen, shohim se faqja jonë është tashmë e disponueshme për të gjithë.

Si të organizoni një faqe interneti statike duke përdorur ruajtjen e objekteve Yandex.Cloud

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

Shkruani në komente se sa jeni të interesuar të mësoni për shërbimet e tjera Yandex ose për përdorimin e Angular në zhvillimin modern.

Burimi: www.habr.com

Shto një koment