Kako ugostiti statičnu web lokaciju koristeći Yandex.Cloud Object Storage

Hej Habr!

U ovom članku ću vam reći kako lako i jednostavno ugostiti statičnu web stranicu koristeći Yandex tehnologije, naime Object Storage.

Na kraju ćete imati web hostiranu web stranicu kojoj će se moći pristupiti putem eksterne veze.

Ovaj članak će vam biti od koristi ako

• Programer početnik koji tek uči programirati;
• Programer koji je napravio portfolio i želi ga staviti u javnu domenu kako bi ga pokazao prijateljima i poslodavcima.

O meni

Nedavno sam razvijao SaaS uslugu, neku vrstu tržišta na kojem ljudi pronalaze sportske trenere za lični trening. Koristili ste Amazon Web Services stog (u daljem tekstu AWS). Ali što sam dublje zaronio u projekat, to sam više nijansi saznao o različitim procesima organizacije startupa.

Naišao sam na sljedeće probleme:

• AWS je trošio mnogo novca. Nakon što sam radio 3 godine u Enterprise kompanijama, navikao sam se na takve radosti kao što su Docker, Kubernetes, CI/CD, plavo zelena implementacija i, kao ambiciozni startup programer, želio sam da implementiram isto. Kao rezultat toga, došao sam do zaključka da AWS troši 300-400 dolara mjesečno. Ispostavilo se da je Kubernetes najskuplji, oko 100 dolara, sa minimalnom platom od jednog klastera i jednog čvora.
  PS Nema potrebe da to radite na početku.
• Zatim, razmišljajući o pravnoj strani, saznao sam za zakon 152-FZ, koji kaže nešto poput sljedećeg: "Lični podaci građana Ruske Federacije moraju se čuvati na teritoriji Ruske Federacije", inače kazne, što nisam htio. Odlučio sam da se pozabavim ovim problemima prije nego što mi dođe odozgo :).

Inspirirano članak o migraciji infrastrukture sa Amazon Web Services na Yandex.Cloud, odlučio sam detaljnije proučiti Yandex stek.

Za mene su ključne karakteristike Yandex.Cloud-a bile sljedeće:

• 2-3 puta jeftinije (prema gore navedenom članku i javnim cjenovnicima)
• Čuvanje ličnih podataka korisnika na teritoriji Ruske Federacije, što veliki Amazon još ne može postići.

Proučavao sam druge konkurente ove usluge, ali u to vrijeme Yandex je pobjeđivao.

Rekao sam ti o sebi, pa možemo da pređemo na posao.

Korak 0. Pripremite lokaciju

Prvo, potrebna nam je web stranica koju želimo postaviti na Internet. Budući da sam Angular programer, napravit ću jednostavan predložak SPA aplikacije, koji ću potom postaviti na internet.

PS Ko razumije Angular ili zna za njegovu dokumentaciju https://angular.io/guide/setup-local, idi Korak 1.

Hajde da instaliramo Angular-CLI da kreiramo SPA sajtove u Angularu:

npm install -g @angular/cli

Kreirajmo Angular aplikaciju koristeći sljedeću naredbu:

ng new angular-habr-object-storage

Zatim idite u mapu aplikacije i pokrenite je da provjerite njenu funkcionalnost:

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

Aplikacija je kreirana, ali još nije spremna za hosting. Hajde da sastavimo aplikaciju u mali build (Produkcija) da uklonimo sve nepotrebne stvari i ostavimo samo potrebne fajlove.
U Angularu to možete učiniti sa sljedećom naredbom:

ng build --prod

Kao rezultat ove naredbe, folder se pojavio u korijenu aplikacije dist sa našom web stranicom.

Radi. A sada idemo na hosting.

Korak 1.

Idemo na stranicu https://console.cloud.yandex.ru/ i kliknite na dugme "Poveži".

Napomena:

• Da biste koristili uslugu Yandex, možda će vam trebati Yandex pošta (ali to nije sigurno)
• Za neke funkcije morat ćete uplatiti novac na svoj račun na vašem ličnom računu (minimalno 500 rubalja).

Nakon uspješne registracije i autorizacije, nalazimo se na Vašem ličnom računu.

Sljedeće lijevo u meniju trebate pronaći uslugu “Object Storage” koju ćemo koristiti za hosting stranice.

Ukratko u terminima:

• Object Storage je skladište datoteka kompatibilno sa sličnom Amazonovom AWS S3 tehnologijom, koja također ima svoj API za upravljanje pohranom iz koda i, poput AWS S3, može se koristiti za hostovanje statične stranice.
• U Object Storage-u kreiramo "buckets" (buckets), koji su odvojeni prostori za skladištenje naših datoteka.

Hajde da napravimo jednu od njih. Da biste to učinili, u servisnoj konzoli kliknite na dugme "Kreiraj korpu".

Obrazac za kreiranje bucketa ima sljedeća polja, prođimo kroz njih:

• Naziv kante. Radi jednostavnosti, nazovimo projekat isto kao Angular - angular-habr-object-storage
• Max. veličina. Kladimo se onoliko koliko je naša stranica teška, budući da stranica nije pohranjena besplatno i za svaki dodijeljeni gigabajt ćemo Yandexu platiti prilično peni.
• Pristup objektima za čitanje. Postavili smo ga na “Public”, pošto korisnik mora primiti svaki fajl našeg statičnog sajta kako bi se na njemu mogao ispravno nacrtati izgled, obraditi skripte itd.
• Pristup listi objekata i postavkama Pristup za čitanje. Ostavite kao "Ograničeno". Ovo je neophodno kako bi se korpa koristila kao interno skladište datoteka za aplikacije.
• Klasa skladištenja. Ostavite kao "Standard". To znači da će naša stranica biti često posjećena, a samim tim i datoteke koje čine stranicu će se često preuzimati. Plus stavka utiče na performanse i plaćanje (ubacite link).

Kliknite na “Kreiraj kantu” i korpa je kreirana.

Sada treba da učitamo našu web stranicu u kantu. Najlakši način je da otvorite folder u blizini dist našu stranicu i prevucite je direktno na stranicu koristeći ručke. Ovo je praktičnije od klika na dugme „Učitaj objekte“, jer se u ovom slučaju fascikle ne prenose i moraćete da ih kreirate ručno u ispravnom redosledu.

Dakle, stranica se učitava u skladište, tako da korisnicima možemo pružiti mogućnost pristupa skladištu kao web stranici.
Da biste to učinili, na lijevoj strani izbornika kliknite na karticu "Website".

Na stranici za postavljanje bucketa kao web-mjesta odaberite karticu „Hosting“. Ovdje označavamo glavnu stranicu stranice, obično index.html. Ako imate SPA aplikaciju, onda se vjerovatno sve greške obrađuju i na glavnoj stranici, pa ćemo na stranici greške naznačiti i index.html.

Odmah vidimo preko kojeg linka će se pristupiti našoj stranici. Kliknite na sačuvaj.

Nakon otprilike 5 minuta, klikom na link, vidimo da je naša stranica sada dostupna svima.

Hvala svima koji su pročitali do kraja! Ovo je moj prvi članak; planiram dalje opisati druge usluge Yandexa i njihovu integraciju s frontend i backend tehnologijama.

Napišite u komentarima koliko ste zainteresirani za učenje o drugim Yandex servisima ili o korištenju Angulara u modernom razvoju.

izvor: www.habr.com