Staatilise veebisaidi hostimine Yandex.Cloud Object Storage abil

Tere Habr!

Selles artiklis räägin teile, kuidas staatilist veebisaiti Yandexi tehnoloogiate abil lihtsalt ja lihtsalt majutada Objekti salvestamine.

Lõpuks on teil veebimajutatud veebisait, millele pääseb juurde välise lingi kaudu.

See artikkel on kasulik, kui

• Algaja arendaja, kes alles õpib programmeerima;
• Arendaja, kes on teinud portfelli ja soovib selle avalikustada, et seda sõpradele ja tööandjatele näidata.

Minust

Hiljuti töötasin välja SaaS-i teenust, omamoodi turgu, kust inimesed leiavad personaaltreeninguteks sporditreenereid. Kasutas Amazon Web Services stacki (edaspidi AWS). Mida sügavamale aga projekti sukeldusin, seda rohkem nüansse sain startupi organiseerimise erinevatest protsessidest teada.

Mul tekkisid järgmised probleemid:

• AWS kulutas palju raha. Olles töötanud 3 aastat Enterprise ettevõtetes, harjusin selliste rõõmudega nagu Docker, Kubernetes, CI/CD, sinine roheline juurutamine ja pürgiva startup programmeerijana tahtsin seda sama rakendada. Selle tulemusena jõudsin järeldusele, et AWS tarbis 300–400 dollarit kuus. Kubernetes osutus kõige kallimaks, umbes 100 dollariks, ühe klastri ja ühe sõlme miinimumpalgaga.
  PS Seda pole vaja alguses teha.
• Järgmiseks, mõeldes juriidilisele poolele, õppisin tundma seadust 152-FZ, mis ütles umbes järgmist: "Vene Föderatsiooni kodanike isikuandmeid tuleb säilitada Vene Föderatsiooni territooriumil", muidu trahvid, mida ma ei tahtnud. Otsustasin nende probleemidega tegeleda enne, kui see ülevalt minuni jõudis :).

Inspireeritud artikliga infrastruktuuri Amazon Web Servicesilt Yandex.Cloudi migreerimise kohta otsustasin Yandexi virna üksikasjalikumalt uurida.

Minu jaoks olid Yandex.Cloudi põhifunktsioonid järgmised:

• 2-3 korda soodsam (vastavalt ülaltoodud artiklile ja avalikele hinnakirjadele)
• Kasutajate isikuandmete säilitamine Vene Föderatsiooni territooriumil, mida suur Amazon ei suuda veel saavutada.

Uurisin teisi selle teenuse konkurente, kuid sel ajal võitis Yandex.

Rääkisin teile endast, et saaksime asja kallale asuda.

Samm 0. Valmistage sait ette

Esiteks vajame veebisaiti, mille tahame Internetti paigutada. Kuna olen Angulari arendaja, siis teen lihtsa SPA rakenduse malli, mille panen siis internetti üles.

PS Kes Angularist aru saab või selle dokumentatsioonist teab https://angular.io/guide/setup-local, minema Samm 1.

Installime Angular-CLI, et luua Angularis SPA-saite:

npm install -g @angular/cli

Loome Angular rakenduse, kasutades järgmist käsku:

ng new angular-habr-object-storage

Järgmisena minge rakenduste kausta ja käivitage see, et kontrollida selle funktsionaalsust:

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

Rakendus on loodud, kuid pole veel hostimiseks valmis. Paneme rakenduse kokku väikeseks ehituseks (Tootmine), et eemaldada kõik mittevajalikud asjad ja jätta alles vaid vajalikud failid.
Angularis saate seda teha järgmise käsuga:

ng build --prod

Selle käsu tulemusena ilmus rakenduse juure kaust dist meie veebisaidiga.

Töötab. Liigume nüüd hostimise juurde.

Samm 1.

Läheme saidile https://console.cloud.yandex.ru/ ja klõpsake nuppu "Ühenda".

Märkus:

• Yandexi teenuse kasutamiseks võite vajada Yandexi posti (kuid see pole kindel)
• Mõne funktsiooni jaoks peate oma isikliku konto kontole raha sisse kandma (minimaalselt 500 rubla).

Pärast edukat registreerimist ja autoriseerimist oleme teie isiklikul kontol.

Järgmisena tuleb menüüst vasakult leida teenus “Objektide salvestus”, mida kasutame saidi majutamiseks.

Lühidalt öeldes:

• Object Storage on failisalvestusruum, mis ühildub Amazoni sarnase AWS S3 tehnoloogiaga, millel on ka oma API koodisalvestuse haldamiseks ja mida saab sarnaselt AWS S3-ga kasutada staatilise saidi hostimiseks.
• Object Storage'is loome "ämbrid" (ämbrid), mis on meie failide jaoks eraldi salvestusalad.

Loome neist ühe. Selleks klõpsake teeninduskonsoolis nuppu "Loo kopp".

Ämbri loomise vormil on järgmised väljad, käime need läbi:

• Ämbri nimi. Nimetagem lihtsuse huvides projekti samaks kui Angular - angular-habr-object-storage
• Max suurus. Panustame nii palju, kui meie sait kaalub, kuna saiti ei salvestata tasuta ja iga eraldatud gigabaidi eest maksame Yandexile päris senti.
• Juurdepääs objektide lugemiseks. Seadsime selle olekusse “Avalik”, kuna kasutaja peab saama meie staatilise saidi iga faili, et sellele saaks õigesti küljendust joonistada, skripte töödelda jne.
• Juurdepääs objektide loendile ja juurdepääs sätete lugemiseks. Jätke see "Piiratud". See on vajalik selleks, et kasutada ämbrit rakenduste sisemise failimäluna.
• Ladustamisklass. Jätke see "Standardseks". See tähendab, et meie saiti külastatakse sageli ja seetõttu laaditakse saidi moodustavad failid sageli alla. Lisaks mõjutab üksus toimivust ja makset (sisesta link).

Klõpsake "Loo ämber" ja kopp on loodud.

Nüüd peame oma saidi ämbrisse üles laadima. Lihtsaim viis on avada läheduses olev kaust dist meie saiti ja lohistage see käepidemete abil otse lehele. See on mugavam kui klõpsata nupul “Laadi objektid”, sest sel juhul kaustu ei edastata ja peate need käsitsi õiges järjekorras looma.

Seega laaditakse sait salvestusruumi, nii et saame pakkuda kasutajatele võimaluse juurdepääsu salvestusruumile veebisaidina.
Selleks klõpsake menüü vasakus servas vahekaarti "Veebisait".

Valige saidina ämbri seadistamise lehel vahekaart „Hosting”. Siin näitame saidi avalehte, tavaliselt index.html. Kui sul on SPA rakendus, siis ilmselt töödeldakse kõiki vigu ka pealehel, seega märgime vealehel ka index.html.

Näeme kohe, millise lingi kaudu meie saidile pääseb. Klõpsake Salvesta.

Umbes 5 minuti pärast lingil klõpsates näeme, et meie sait on nüüd kõigile kättesaadav.

Aitäh kõigile, kes lõpuni lugesid! See on minu esimene artikkel; kavatsen täpsemalt kirjeldada teisi Yandexi teenuseid ja nende integreerimist esi- ja taustatehnoloogiatega.

Kirjutage kommentaaridesse, kui huvitatud olete teiste Yandexi teenuste või Angulari kasutamise kohta kaasaegses arenduses.

Allikas: www.habr.com