Sådan hoster du et statisk websted ved hjælp af Yandex.Cloud Object Storage

Hej Habr!

I denne artikel vil jeg fortælle dig, hvordan du nemt og enkelt hoster et statisk websted ved hjælp af Yandex-teknologier, nemlig Objektopbevaring.

I sidste ende vil du have en web-hostet hjemmeside, som vil være tilgængelig via et eksternt link.

Denne artikel vil være nyttig, hvis du

• En begynderudvikler, der lige er ved at lære at programmere;
• En udvikler, der har lavet en portefølje og ønsker at placere den i det offentlige domæne for at vise den til venner og arbejdsgivere.

Om Mig

For nylig var jeg ved at udvikle en SaaS-tjeneste, en slags markedsplads, hvor folk finder sportstrænere til personlig træning. Brugte Amazon Web Services-stakken (herefter benævnt AWS). Men jo dybere jeg dykkede ned i projektet, jo flere nuancer lærte jeg om de forskellige processer ved at organisere en startup.

Jeg stødte på følgende problemer:

• AWS forbrugte mange penge. Efter at have arbejdet i 3 år i Enterprise-virksomheder, vænnede jeg mig til glæder som Docker, Kubernetes, CI/CD, blågrøn implementering, og som en håbefuld startup-programmør ville jeg implementere det samme. Som et resultat kom jeg til den konklusion, at AWS forbrugte 300-400 dollars om måneden. Kubernetes viste sig at være den dyreste, omkring 100 bukke, med en mindsteløn på en klynge og en node.
  PS Der er ingen grund til at gøre dette i starten.
• Dernæst, da jeg tænkte på den juridiske side, lærte jeg om lov 152-FZ, som sagde noget i retning af følgende: "Personlige data om borgere i Den Russiske Føderation skal opbevares på Den Russiske Føderations territorium", ellers bøder, som jeg ikke ville have. Jeg besluttede at tackle disse problemer, før det kom til mig fra oven :).

Inspireret artikel om migrering af infrastruktur fra Amazon Web Services til Yandex.Cloud, besluttede jeg at studere Yandex-stakken mere detaljeret.

For mig var nøglefunktionerne i Yandex.Cloud følgende:

• 2-3 gange billigere (ifølge artiklen ovenfor og offentlige prislister)
• Opbevaring af personlige data om brugere på Den Russiske Føderations territorium, som den store Amazon endnu ikke kan opnå.

Jeg studerede andre konkurrenter til denne tjeneste, men på det tidspunkt vandt Yandex.

Jeg har fortalt dig om mig selv, så vi kan komme i gang.

Trin 0. Forbered webstedet

For det første har vi brug for en hjemmeside, som vi ønsker at placere på internettet. Da jeg er Angular-udvikler, vil jeg lave en simpel SPA-applikationsskabelon, som jeg så lægger ud på internettet.

PS Hvem forstår Angular eller kender til dens dokumentation https://angular.io/guide/setup-local, gå til Trin 1.

Lad os installere Angular-CLI for at oprette SPA-websteder i Angular:

npm install -g @angular/cli

Lad os oprette en Angular-applikation ved hjælp af følgende kommando:

ng new angular-habr-object-storage

Gå derefter til applikationsmappen og start den for at kontrollere dens funktionalitet:

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

Applikationen er oprettet, men er endnu ikke klar til hosting. Lad os samle applikationen til en lille build (Produktion) for at fjerne alle unødvendige ting og kun lade de nødvendige filer blive.
I Angular kan du gøre dette med følgende kommando:

ng build --prod

Som et resultat af denne kommando dukkede en mappe op i programmets rod dist med vores hjemmeside.

Arbejder. Lad os nu gå videre til hosting.

Trin 1.

Gå til webstedet https://console.cloud.yandex.ru/ og klik på knappen "Forbind".

Note:

• For at bruge Yandex-tjenesten har du muligvis brug for Yandex-mail (men det er ikke sikkert)
• For nogle funktioner skal du indsætte penge på din konto på din personlige konto (minimum 500 rubler).

Efter vellykket registrering og godkendelse er vi på din personlige konto.

Næste til venstre i menuen skal du finde tjenesten "Object Storage", som vi vil bruge til at hoste siden.

Kort fortalt:

• Object Storage er et fillager, der er kompatibelt med Amazons lignende AWS S3-teknologi, som også har sin egen API til håndtering af lagring fra kode og kan ligesom AWS S3 bruges til at hoste et statisk websted.
• I Object Storage opretter vi "buckets" (buckets), som er separate lagerområder for vores filer.

Lad os skabe en af ​​dem. For at gøre dette skal du i servicekonsollen klikke på knappen "Opret spand".

Formularen til oprettelse af en bøtte har følgende felter, lad os gennemgå dem:

• Navn på spand. For nemheds skyld, lad os kalde projektet det samme som Angular - angular-habr-object-storage
• Maks. størrelse. Vi satser lige så meget som vores side vejer, da siden ikke gemmes gratis, og for hver tildelt gigabyte betaler vi Yandex en pæn krone.
• Adgang til at læse objekter. Vi indstiller det til "Offentlig", da brugeren skal modtage hver fil på vores statiske websted, så layoutet kan tegnes korrekt på det, scripts kan behandles osv.
• Adgang til listen over objekter og Adgang til læseindstillinger. Lad det være "Begrænset". Dette er nødvendigt for at bruge bøtten som intern fillager til applikationer.
• Opbevaringsklasse. Lad det være "Standard". Det betyder, at vores side vil blive besøgt hyppigt, og derfor vil de filer, der udgør siden, blive downloadet hyppigt. Plus varen påvirker ydeevne og betaling (indsæt link).

Klik på "Opret en bøtte", og bøtten oprettes.

Nu skal vi uploade vores side til bøtten. Den nemmeste måde er at åbne en mappe i nærheden dist vores side og træk den direkte ind på siden ved hjælp af håndtag. Dette er mere praktisk end at klikke på knappen "Indlæs objekter", fordi i dette tilfælde overføres mapperne ikke, og du bliver nødt til at oprette dem manuelt i den korrekte rækkefølge.

Så siden er indlæst i lageret, så vi kan give brugerne mulighed for at få adgang til lageret som et website.
For at gøre dette skal du klikke på fanen "Websted" i venstre side af menuen.

På siden for opsætning af en bucket som et websted skal du vælge fanen "Hosting". Her angiver vi webstedets hovedside, normalt index.html. Hvis du har en SPA-ansøgning, så behandles sandsynligvis alle fejl også på hovedsiden, så vi vil også angive index.html på fejlsiden.

Vi ser med det samme, hvilket link vores side vil være tilgængelig via. Klik på Gem.

Efter cirka 5 minutter, ved at klikke på linket, ser vi, at vores side nu er tilgængelig for alle.

Tak til alle, der læste til ende! Dette er min første artikel; Jeg planlægger yderligere at beskrive andre Yandex-tjenester og deres integration med frontend- og backend-teknologier.

Skriv i kommentarerne, hvor interesseret du er i at lære om andre Yandex-tjenester eller om brugen af ​​Angular i moderne udvikling.

Kilde: www.habr.com