Kuidas hostida staatilist veebisaiti Yandex.Cloud Object Storage abil

Tere, Habr!

Selles artiklis räägin, kuidas lihtsalt ja mugavalt avaldada staatiline sait kasutades Yandexi tehnoloogiaid, nimelt Object Storage.

Lõpuks on teil avalikustatud sait, mis on kergesti ligipääsetav 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.

Minust

Hiljuti arendasin SaaS teenust, mis toimib turuplatsina, kus inimesed leiavad personaaltreeningute jaoks treenereid. Kasutasin Amazon Web Services (edasi AWS) tehnoloogiat. Kuid mida sügavamale projekti süvenesin, seda rohkem erinevaid startup’i korraldamise protsesse ma avastasin.

Seisin silmitsi järgmiste probleemidega:

• AWS kulutas palju raha. Pärast 3 aastat töötamist suurtes ettevõtetes olin harjunud selliste mugavustega nagu Docker, Kubernetes, CI/CD, blue green deployment, ja algajana startup-arendajana soovisin sama ellu viia. Lõpuks jõudsin järeldusele, et AWS kulutas kuus 300-400 dollarit. Kõige kallim osutus Kubernetes, mille kulud ulatusid umbes 100 dollarini, minimaalselt ühe klastri ja ühe noodiga.
  P.S. Alguses ei ole seda vaja teha.
• Edasi mõeldes õigusalasele poolele, sain teada seadusest 152-FZ, mis käsitles umbes järgmist: "Venemaa Föderatsiooni kodanike isikuandmeid tuleb hoida Venemaa territooriumil", muidu ootavad mind trahvid, mida ma ei tahtnud. Otsustasin nende küsimustega tegeleda, kuni "ülemused" mulle midagi ei soovitanud :).

Inspireerituna artikkel infrastruktuuri migreerimisest Amazon Web Services'ist Yandex. Pilve, otsustasin uurida Yandexi tehnoloogiat lähemalt.

Minu jaoks olid Yandex. Pilve võtmeomadused järgmised:

• 2-3 korda odavam (vastavalt ülaltoodud artiklile ja avalikule hinnakirjale)
• Kasutajate isikuandmete hoidmine Venemaa territooriumil, mida suur Amazon veel ei suuda.

Uurisin ka teisi selle teenuse konkurente, kuid tol hetkel Yandex võitis.

Oma kohta rääkisin, nüüd võime asja juurde tulla.

Samm 0. Valmistame veebisaidi ette

Esmalt vajame veebisaiti, mida soovime internetis majutada. Kuna ma olen Angulari arendaja, loon lihtsa SPA rakenduse, mille seejärel internetis üles olen.

P.S. Kui sa tead Angularist või tead selle dokumentatsiooni https://angular.io/guide/setup-local, mine edasi Sammule 1.

Paigaldame Angular-CLI, et luua SPA-saitidest Angularis:

npm install -g @angular/cli

Loome Angulari rakenduse järgmise käsuga:

ng new angular-habr-object-storage

Edasi liikume rakenduse kausta ja käivitame selle, et kontrollida selle töökindlust:

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

Rakendus on loodud, kuid pole veel valmis hostimiseks. Kogume rakenduse väikseks buildiks (Production), et eemaldada kõik üleliigne ja jätta alles ainult vajalikud failid.
Angolari puhul saab seda teha järgmise käsuga:

ng build --prod

Selle käsu tulemusena ilmus rakenduse juurkausta kaust dist meie saidiga.

Töötab. Nüüd liigume hostimise juurde.

Samm 1.

Külastame veebilehte https://console.cloud.yandex.ru/ ja vajutame nuppu "Ühenda".

Märkus:

• Yandexi teenuse kasutamiseks võib olla vajalik Yandexi e-post (aga see ei ole kindel).
• Mõnede funktsioonide jaoks tuleb isiklikus kabinetis raha kontole laadida (minimaalne summa 500 rubla).

Pärast eduka registreerimise ja sisselogimise sooritamist, oleme isiklikus kabinetis.

Edasi tuleb vasakpoolses menüüs leida teenus "Object Storage", mida me kavatseme kasutada saidi hostimiseks.

Lühidalt terminitest:

• Object Storage — on failide salvestus, mis on ühilduv Amazoni AWS S3 tehnoloogiaga. Sel on samuti oma API, mis võimaldab salvestust hallata koodist ning seda saab kasutada ka staatilise veebisaidi majutamiseks, nagu AWS S3.
• Object Storage'is loome "bakette" (bucket / Korv), mis on meie failide jaoks eraldi salvestusruumid.

Loome ühe neist. Selleks vajutame teenuse konsoolis nupule "Loo bakett".

Baketi loomise vormis on järgmised väljad, tutvume nendega:

• Baketi nimi. Lihtsuse huvides nimetame selle samuti oma Angular projekti järgi — angular-habr-object-storage
• Max. suurus. Seame nii palju, kui meie veebisait kaalub, kuna veebisait ei ole tasuta ja iga eraldatud gigabaiti eest maksame Yandexile natuke raha.
• Objektide lugemisõigus. Seame "Avalikuks", kuna kasutaja peab saama iga meie staatilise veebisaidi faili, et kujundus õigesti renderdaks, skriptid töötaksid jne.
• Objektide loendi juurdepääs ja seadete lugemisõigus. Jätame "Piiratud". See on vajalik, et kasutada baketti kui sisefailide salvestust rakendustele.
• Salvestusklass. Jätame valikuks "Standardne". See tähendab, et meie saidile külastatakse sageli, mistõttu laaditakse ka faile, mis saidi moodustavad, tihti alla. Samuti mõjutab see punkti jõudlust ja tasustamist (lisage link).

Klõpsame "Loo ämber" ja ämber on loodud.

Nüüd peame meie saidi ämbrisse üles laadima. Lihtsaim viis on avada meie saidi kaust ja lohistada faile lihtsalt lehele. dist See on mugavam kui klõpsata nuppu "Laadi objekte", kuna sel juhul kaustade struktuur ei kandideeri ning neid tuleb käsitsi õiges järjekorras luua.

Nii, sait on säilitusse üles laaditud, nüüd saame kasutajatele anda võimaluse suhelda salvestusse nagu saidiga.
Selleks klõpsake vasakus menüüs vahekaarti "Veebisait".

Ämbri seadistamise lehel veebisaidi jaoks valige vahekaart "Majutus". Siin märkige saidi esileht, tavaliselt index.html. Kui teil on SPA rakendus, on tõenäoliselt kõik vead samuti käideldud esilehe peal, seega märgime vealehtedele ka index.html.

Näeme kohe, millise lingiga on meie sait saadaval. Klõpsame salvestamiseks.

Umbes viie minuti pärast, järgides linki, näeme, et nüüd on meie veebisait kõigile soovijatele kättesaadav.

Aitäh kõigile, kes lugesid lõpuni! See on minu esimene artikkel, plaanin tulevikus tutvustada ka teisi Yandexi teenuseid ning nende integreerimist frontend- ja backend-tehnoloogiatega.

Kirjutage kommentaaridesse, kui huvitav oleks teile teada saada Yandexi muudest teenustest või Angulari kasutamisest kaasaegses arenduses.

Allikas: habr.com