Tere, Habr!
Selles artiklis räägin, kuidas lihtsalt ja kiiresti paigutada staatiline veebisait Yandexi tehnoloogiate abil, st Object Storage.
Lõpuks on teil veebisait, mis on kergesti kättesaadav välise lingi kaudu.
See artikkel on kasulik, kui olete
- Algaja arendaja, kes alles õpib programmeerimist;
- Arendaja, kes on loonud portfoolio ja soovib seda avalikult jagada, et näidata sõpradele ja tööandjatele.
Kohal
Hiljuti töötasin välja SaaS-teenuse, mis on midagi sarnast turuplatsile, kus inimesed leiavad sporditreenerid isiklike treeningute jaoks. Kasutasin Amazon Web Services (edaspidi AWS). Kuid mida sügavamale projektisse süvenesin, seda rohkem teada sain erinevatest startupi korraldamise nüanssidest.
Seisin silmitsi järgmiste probleemidega:
- AWS tarbib palju raha. Töödes kolm aastat ettevõttes, harjusin selliste mugavustega nagu Docker, Kubernetes, CI/CD, blue green deployment, ja alustava programmeerijana soovisin samu asju rakendada. Tulemuseks oli see, et AWS tarbimine ulatus 300-400 dollarini kuus. Kõige kallim oli Kubernetes, umbes 100 dollarit, ühe klastriga ja ühe noodiga minimaalselt.
P.S. Alguses ei ole seda vajalik teha. - Järgmisena, mõeldes seadusandlikule poolele, sain teada seadusest 152-FZ, kus öeldi umbes järgmist: "Venemaa Föderatsiooni kodanike isikuandmeid tuleb hoida Venemaa territooriumil", muidu ootavad mind karistused, mida ma ei soovinud. Otsustasin nendega tegeleda seni, kuni "ülemus" mulle midagi ei öelnud :)
Inspireerituna Amazon Web Services'i infrastruktuuri migreerimisest Yandex.Облаko, otsustasin tutvuda Yandexi tehnoloogiatega lähemalt.
Minu jaoks olid Yandex.Облако võtmeomadused järgmised:
- Kallim 2-3 korda (vastavalt ülaltoodud artiklile ja avalikele hinnakirjadele)
- , mida suur Amazon hetkel ei suuda tagada.
Otsisin selle teenuse teisi konkurente, kuid sel hetkel Yandex võitis.
Oma saame rääkida, liikume edasi.
Samm 0. Valmistame veebisaidi ette
Esiteks on meil vaja veebisaiti, mille soovime internetis avaldada. Kuna olen Angulari arendaja, loon ma lihtsa SPA rakenduse šablooni, mille hiljem internetis avaldan.
P.S. Kes teab Angularist või tunneb selle dokumentatsiooni , minge edasi .
Installime Angular-CLI, et luua SPA-saitide jaoks Angularis:
npm install -g @angular/cliLoome Angulari rakenduse järgmise käsuga:
ng new angular-habr-object-storageSeejärel liigume rakenduse kausta ja käivitame selle, et kontrollida, kas see töötab:
cd angular-habr-object-storage
ng serve --open
Rakendus on loodud, kuid veel ei ole see valmis hostimiseks. Koondame rakenduse väikese build'i (Tootmine), et eemaldada kõik tarbetu ja jätta ainult vajalikud failid.
Angularis saab seda teha järgmise käsuga:
ng build --prodSelle käsku tulemuseks on rakenduse juurkaustas kaust dist meie saidiga.
Töötab. Nüüd liigume hostimise juurde.
Samm 1.
Liigume veebilehele ja vajutame nuppu "Ühendu."
Märkus:
- Teenuse kasutamiseks võib vaja minna Yandexi posti (aga see ei ole kindel)
- Mõnede funktsioonide kasutamiseks tuleb kontole raha lisada (minimaalne summa 500 rubla).
Pärast edukat registreerimist ja sisselogimist oleme isiklikus kabinetis.
Seejärel tuleb vasakpoolsest menüüst leida teenus "Object Storage", mida me just veebilehe hostimiseks kasutame.
Lühidalt terminite kohta:
- Object Storage on failide salvestus, mis on ühilduv sarnase tehnoloogiaga Amazoni AWS S3, millel on ka oma API salvestuse haldamiseks koodist ja mida, nagu ka AWS S3, saab kasutada staatilise veebilehe paigutamiseks.
- Object Storage'is loome "buckets" (korv), mis on meie failide eraldi salvestused.
Loome ühe neist. Selleks vajutame teenuse konsoolis nuppu "Loo bucket".
Bucket'i loomise vormis on järgmised väljad, vaatame neid üle:
- Bucket'i nimi. Lihtsuse huvides nimetame selle samaks kui Angulari projekt —
angular-habr-object-storage - Max. suurus. Asetame nii palju, kui meie sait kaalub, kuna sait ei ole tasuta ja iga eraldatud gigabaidi eest maksame me Yandexile väikese summa.
- Failide lugemise pääs. Asetame "Avalik", kuna kasutaja peab saama iga failiga meie staatilisest veebisaidist, et disainil õigesti joonistuda, skriptid töötavad jne.
- Failide loendi ja seadete lugemise pääs. Jätame "Piiratud". See on vajalik, et kasutada bucket'it rakenduste jaoks sisemise failisalvestusena.
- Salvestuse klass. Jätame "Standardsed". See tähendab, et meie veebisaiti külastavad sageli, mistõttu laaditakse ka faile tihti, mis teadaolevalt veebisaidi osaks on. Lisaks mõjutab see punkt jõudlust ja maksmist (lisa link).
Klõpsame "Loo anum" ja anum on loodud.
Nüüd peame meie veebisaidi anuma üles laadima. Lihtsaim viis on avada kõrval kaust dist meie veebisaidi jaoks ja tõmmata see lihtsalt lehele. See on mugavam kui klõpsata nuppu "Laadi objekte", kuna sellisel juhul kaustasid ei edastata ja need tuleb luua käsitsi õiges järjekorras.
Nii et veebisait on üles laaditud ladustamisse, mistõttu saame kasutajatele anda võimaluse pöörduda ladustamise poole nagu veebisaidi poole.
Selleks klõpsame vasakus menüüs vahelehe "Veebisait".
Anuma seadistamise lehe peal valime vahekaart "Majutus". Siin määrame veebisaidi peamise lehe, tavaliselt on see index.html. Kui teil on SPA rakendus, siis tõenäoliselt töödeldakse kõik vead samuti peamisel lehel, seega määrame vealeheks samuti index.html.
Me näeme kohe, millise lingiga on meie veebisait kergesti ligipääsetav. Klõpsame salvestada.
Umbes viie minuti pärast näeme, et meie veebisait on nüüd kõigile huvilistele kergesti ligipääsetav.
Aitäh kõigile, kes lugesid lõpuni! See on minu esimene artikkel, plaanin tulevikus kirjeldada ka teisi Yandexi teenuseid ja nende integreerimist frontend ja backend tehnoloogiatega.
Kirjutage kommentaaridesse, kui huvitav oleks teada rohkem Yandexi teenustest või Angulari kasutamisest kaasaegses arenduses.
Allikas: habr.com
