Hello, Habr!
I denne artikel vil jeg fortælle, hvordan man nemt og enkelt kan hoste en statisk hjemmeside med Yandex-teknologier, nemlig Object Storage.
Til slut vil du have en hjemmeside, der er tilgængelig online via et eksternt link.
Denne artikel vil være nyttig, hvis du
- Er en nybegynderudvikler, der lige er ved at lære programmering;
- Er en udvikler, der har lavet et portfolio og ønsker at publicere det offentligt for at vise det til venner og arbejdsgivere.
Om mig
For nylig arbejdede jeg på en SaaS-service, der ligner et marketplace, hvor folk kan finde sportstrænere til personlige træninger. Jeg brugte Amazon Web Services (AWS). Men jo mere jeg dykkede ned i projektet, jo flere nuancer lærte jeg om forskellige processer i organisationen af en startup.
Jeg stødte på følgende problemer:
- AWS var meget dyrt. Efter at have arbejdet 3 år i storvirksomheder er jeg vant til glæder som Docker, Kubernetes, CI/CD, blue green deployment, og som en nybegynderprogrammerer-startuper ønskede jeg også at implementere det samme. I sidste ende kom jeg til den konklusion, at AWS kostede 300-400 dollars om måneden. Det dyreste viste sig at være Kubernetes, omkring 100 dollars, med minimum med én klynge og én node.
P.S. I starten er det ikke nødvendigt at gøre sådan. - Derefter, efter at have tænkt over de juridiske aspekter, blev jeg bekendt med lov 152-FZ, som sagde cirka følgende: "Personlige data fra borgere i Rusland skal opbevares på russisk område", ellers risikerer man bøder, hvilket jeg gerne ville undgå. Jeg besluttede at tage fat på disse spørgsmål, inden der kom noget "ovenfra" til mig :).
Inspirationen kom fra om migration af infrastruktur fra Amazon Web Services til Yandex.Cloud, og jeg besluttede at studere Yandex-stakken nærmere.
For mig var de centrale funktioner ved Yandex.Cloud følgende:
- Billigere med 2-3 gange (ifølge ovenstående artikel og offentlige prislister)
- , noget som store Amazon endnu ikke kan realisere.
Jeg undersøgte andre konkurrenter til denne service, men på det tidspunkt vandt Yandex.
Nu har jeg præsenteret mig selv, lad os komme til sagen.
Trin 0. Forbered hjemmesiden
For at starte har vi brug for en hjemmeside, som vi ønsker at publicere på internettet. Da jeg er Angular-udvikler, vil jeg lave en simpel skabelon til en SPA-applikation, som jeg senere vil offentliggøre på internettet.
P.S. Hvis du kender noget til Angular eller ved om dets dokumentation , gå til .
Lad os installere Angular-CLI for at skabe SPA-websteder med Angular:
npm install -g @angular/cliLad os oprette et Angular-program med følgende kommando:
ng new angular-habr-object-storageDerefter går vi ind i programmet mappen og kører det for at teste det:
cd angular-habr-object-storage
ng serve --open
Programmet er oprettet, men er endnu ikke klar til at blive hostet. Lad os samle programmet i et lille build (Production) for at fjerne alt overskydende og kun efterlade de nødvendige filer.
I Angular kan dette gøres med følgende kommando:
ng build --prodSom et resultat af denne kommando vises mappen dist med vores websted.
Det virker. Nu går vi videre til hosting.
Trin 1.
Gå til webstedet og klik på knappen "Tilslut".
Bemærk:
- For at bruge Yandex-tjenesten kan det være nødvendigt at have en Yandex-mail (men det er ikke sikkert)
- For nogle funktioner skal du indsætte penge på kontoen i din personlige konto (minimum 500 rubler).
Efter succesfuld registrering og login er vi i den personlige konto.
Derefter skal vi finde tjenesten "Object Storage" i menuen til venstre, som vi netop skal bruge til hosting af webstedet.
Kort om termer:
- Object Storage er et filopbevaringssystem, der er kompatibelt med den tilsvarende teknologi fra Amazon AWS S3, som også har sin egen API til at styre opbevaring fra koden og kan, ligesom AWS S3, bruges til hosting af et statisk websted.
- I Object Storage opretter vi "buckets", som er separate opbevaringspladser for vores filer.
Lad os oprette en af dem. For dette klikker vi på knappen "Opret bucket" i tjenestens konsol.
I formularen til oprettelse af en bucket er der følgende felter, lad os se på dem:
- Bucketnavn. For enkelhedens skyld kalder vi det det samme som Angular-projektet —
angular-habr-object-storage - Maks. størrelse. Vi sætter det til, hvor meget vores websted vejer, da webstedet ikke opbevares gratis, og for hver tildelt gigabyte vil vi betale Yandex en smule.
- Adgang til læsning af objekter. Vi sætter det til "Offentlig", da brugeren skal kunne hente hver fil fra vores statiske websted for at få korrekt layout, skripter mv. til at fungere.
- Adgang til objektlisten og Læsning af indstillinger. Vi lader "Begrænset" være. Dette er nødvendigt for at bruge bucket som et internt lager for filer til applikationer.
- Opbevaringsklasse. Vi lader "Standard" være. Dette betyder, at vores hjemmeside ofte vil blive besøgt, og derfor også ofte vil få downloadet filer, der udgør hjemmesiden. Desuden påvirker dette punkt ydeevne og betaling (indsæt link).
Klik på "Opret bucket" og bucketen er oprettet.
Nu skal vi uploade vores hjemmeside til bucketen. Den nemmeste måde er at åbne en mappe ved siden af dist vores hjemmeside og trække den direkte ind på siden. Det er lettere end at klikke på knappen "Upload objekter", fordi i så fald mappene ikke overføres, og de skal oprettes manuelt i den rigtige rækkefølge.
Så hjemmesiden er uploadet til lageret, og vi kan give brugerne mulighed for at tilgå lageret som en hjemmeside.
For dette klikker vi på fanen "Hjemmeside" til venstre i menuen.
På siden for indstillinger af bucketen som hjemmeside vælger vi fanen "Hosting". Her angiver vi startsiden for hjemmesiden, normalt index.html. Hvis du har en SPA-applikation, vil det sandsynligvis være, at alle fejl også håndteres på startsiden, så vi angiver index.html på fejl siden.
Vi kan straks se, hvilken link der vil være tilgængelig til vores hjemmeside. Klik på gem.
Efter cirka 5 minutter, når vi følger linket, ser vi, at vores hjemmeside nu er tilgængelig for alle interesserede.
Tak til alle der læste til slut! Dette er min første artikel, og jeg planlægger at beskrive andre Yandex-tjenester og deres integration med frontend- og backend-teknologier.
Skriv i kommentarerne, hvor interessant det er for dig at lære om andre Yandex-tjenester eller brugen af Angular i moderne udvikling.
Kilde: habr.com
