🥇Hoe om 'n statiese webwerf te huisves deur Yandex.Cloud Object Storage

Haai Habr!

In hierdie artikel sal ek jou vertel hoe om maklik en eenvoudig 'n statiese webwerf te huisves deur Yandex-tegnologie te gebruik, naamlik Object berging.

Uiteindelik sal u 'n webwerf hê wat deur die web aangebied word wat via 'n eksterne skakel toeganklik sal wees.

Hierdie artikel sal nuttig wees as jy

'n Beginner ontwikkelaar wat net leer programmeer;
'n Ontwikkelaar wat 'n portefeulje geskep het en dit in die publieke domein wil plaas om dit aan vriende en werkgewers te wys.

About Me

Ek het onlangs 'n SaaS-diens ontwikkel, 'n soort markplek waar mense sportafrigters vir persoonlike opleiding vind. Gebruik die Amazon Web Services-stapel (hierna verwys as AWS). Maar hoe dieper ek in die projek geduik het, hoe meer nuanses het ek geleer oor die verskillende prosesse om 'n beginonderneming te organiseer.

Ek het die volgende probleme ondervind:

AWS het baie geld verbruik. Nadat ek vir 3 jaar in ondernemingsmaatskappye gewerk het, het ek gewoond geraak aan sulke vreugdes soos Docker, Kubernetes, CI/CD, blougroen-ontplooiing, en as 'n aspirant-opstartprogrammeerder wou ek dieselfde implementeer. As gevolg hiervan het ek tot die gevolgtrekking gekom dat AWS maandeliks 300-400 dollar verbruik het. Kubernetes blyk die duurste te wees, sowat 100 dollar, met 'n minimum loon van een kluster en een nodus.
NS Dit is nie nodig om dit aan die begin te doen nie.
Toe ek nou aan die wetlike kant dink, het ek geleer van wet 152-FZ, wat iets soos die volgende gesê het: "Persoonlike data van burgers van die Russiese Federasie moet op die grondgebied van die Russiese Federasie gestoor word", andersins boetes, wat ek nie wou hê nie. Ek het besluit om hierdie kwessies aan te pak voordat dit van bo af na my toe gekom het :).

Geïnspireer artikel oor die migrasie van infrastruktuur van Amazon Web Services na Yandex.Cloud, het ek besluit om die Yandex-stapel in meer besonderhede te bestudeer.

Vir my was die belangrikste kenmerke van Yandex.Cloud die volgende:

2-3 keer goedkoper (volgens die artikel hierbo en openbare pryslyste)
Berging van persoonlike data van gebruikers op die grondgebied van die Russiese Federasie, wat die groot Amasone nog nie kan bereik nie.

Ek het ander mededingers van hierdie diens bestudeer, maar op daardie tydstip het Yandex gewen.

Ek het jou van myself vertel, sodat ons aan die gang kan kom.

Stap 0. Berei die webwerf voor

Eerstens het ons 'n webwerf nodig wat ons op die internet wil plaas. Aangesien ek 'n Angular-ontwikkelaar is, sal ek 'n eenvoudige SPA-toepassingsjabloon maak, wat ek dan op die internet sal plaas.

NS Wie verstaan Angular of weet van sy dokumentasie https://angular.io/guide/setup-local, gaan na Stap 1.

Kom ons installeer Angular-CLI om SPA-webwerwe in Angular te skep:

npm install -g @angular/cli

Kom ons skep 'n Angular-toepassing deur die volgende opdrag te gebruik:

ng new angular-habr-object-storage

Gaan dan na die toepassingsgids en begin dit om die funksionaliteit daarvan na te gaan:

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

Die toepassing is geskep, maar is nog nie gereed vir aanbieding nie. Kom ons versamel die toepassing in 'n klein gebou (Produksie) om alle onnodige dinge te verwyder en net die nodige lêers te laat.
In Angular kan jy dit doen met die volgende opdrag:

ng build --prod

As gevolg van hierdie opdrag het 'n gids in die wortel van die toepassing verskyn dist met ons webwerf.

Werke. Kom ons gaan nou oor na gasheer.

Stap 1.

Kom ons gaan na die webwerf https://console.cloud.yandex.ru/ en klik op die "Connect"-knoppie.

Let wel:

Om die Yandex-diens te gebruik, het jy dalk Yandex-pos nodig (maar dit is nie seker nie)
Vir sommige funksies moet u geld in u rekening in u persoonlike rekening deponeer (minimum 500 roebels).

Na suksesvolle registrasie en magtiging is ons in jou persoonlike rekening.

Volgende aan die linkerkant in die kieslys moet jy die "Object Storage"-diens vind, wat ons sal gebruik om die webwerf te huisves.

Kortliks in terme:

Object Storage is 'n lêerberging wat versoenbaar is met Amazon se soortgelyke AWS S3-tegnologie, wat ook sy eie API het vir die bestuur van berging vanaf kode en, soos AWS S3, gebruik kan word om 'n statiese webwerf te huisves.
In Object Storage skep ons "emmers" (emmers), wat aparte stoorareas vir ons lêers is.

Kom ons skep een van hulle. Om dit te doen, klik in die dienskonsole op die "Skep emmer"-knoppie.

Die vorm vir die skep van 'n emmer het die volgende velde, kom ons gaan deur hulle:

Emmer se naam. Vir eenvoud, kom ons noem die projek dieselfde as Angular - angular-habr-object-storage
Maks. grootte. Ons wed soveel as wat ons webwerf weeg, aangesien die webwerf nie gratis gestoor word nie en vir elke toegekende gigagreep, sal ons Yandex 'n mooi sent betaal.
Toegang om voorwerpe te lees. Ons stel dit op "Publiek", aangesien die gebruiker elke lêer van ons statiese webwerf moet ontvang sodat die uitleg korrek geteken kan word, skrifte verwerk kan word, ens.
Toegang tot die lys van voorwerpe en Toegang om instellings te lees. Laat dit as "Beperk". Dit is nodig om die emmer as interne lêerberging vir toepassings te gebruik.
Berging klas. Laat dit as "Standaard". Dit beteken dat ons webwerf gereeld besoek sal word, en daarom sal die lêers waaruit die webwerf bestaan gereeld afgelaai word. Boonop beïnvloed die item prestasie en betaling (voeg skakel in).

Klik op "Skep 'n emmer" en die emmer word geskep.

Nou moet ons ons webwerf na die emmer oplaai. Die maklikste manier is om 'n gids naby oop te maak dist ons webwerf en sleep dit direk na die bladsy met behulp van handvatsels. Dit is geriefliker as om op die "Laai voorwerpe"-knoppie te klik, want in hierdie geval word die dopgehou nie oorgedra nie en jy sal dit met die hand in die regte volgorde moet skep.

Dus, die webwerf word in die berging gelaai, sodat ons gebruikers die geleentheid kan bied om toegang tot die berging as 'n webwerf te verkry.
Om dit te doen, klik aan die linkerkant van die spyskaart op die "Webwerf"-oortjie.

Op die bladsy vir die opstel van 'n emmer as 'n webwerf, kies die "Hosting"-oortjie. Hier dui ons die hoofblad van die webwerf aan, gewoonlik index.html. As jy 'n SPA-toepassing het, dan word waarskynlik alle foute ook op die hoofblad verwerk, so ons sal ook index.html op die foutbladsy aandui.

Ons sien dadelik deur watter skakel ons webwerf toeganklik sal wees. Klik stoor.

Na 5 minute, deur op die skakel te klik, sien ons dat ons webwerf nou vir almal beskikbaar is.

Dankie aan almal wat tot die einde gelees het! Dit is my eerste artikel wat ek beplan om ander Yandex-dienste en hul integrasie met frontend- en backend-tegnologie verder te beskryf.

Skryf in die kommentaar hoe jy belangstel om te leer oor ander Yandex-dienste of oor die gebruik van Angular in moderne ontwikkeling.

Bron: will.com