Bok, Habr!
U ovom članku ću objasniti kako jednostavno i lako postaviti statičku web stranicu koristeći tehnologije Yandex-a, a to posebno Object Storage.
Na kraju ćete imati web stranicu koja će biti dostupna putem vanjske veze.
Ovaj članak će biti koristan ako ste
- Počinitelj programer koji tek uči programiranje;
- Programer koji je izradio portfelj i želi ga postaviti u javnost kako bi pokazao prijateljima i poslodavcima.
O meni
Nedavno sam razvijao SaaS servis, sličan tržištu, gdje ljudi pronalaze sportske trenere za osobne treninge. Koristio sam Amazon Web Services (dalje AWS). No, što sam dublje ulazio u projekt — saznao sam više pojedinosti o različitim procesima organizacije startupa.
Naišao sam na sljedeće probleme:
- AWS je koštao puno novca. Nakon tri godine rada u Enterprise kompanijama, navikao sam na takve stvari kao što su Docker, Kubernetes, CI/CD, blue green deployment, i, kao početnik programer u startupu, želio sam implementirati isto. Na kraju sam došao do 300-400 dolara mjesečno za AWS. Najskuplji je bio Kubernetes, oko 100 dolara, uz minimum s jednim klasterom i jednom nodom.
P.S. Na početku to ne treba raditi. - Nakon razmišljanja o pravnoj strani, saznao sam za zakon 152-FZ koji je otprilike govorilo sljedeće: "Osobni podaci građana Ruske Federacije moraju se pohranjivati na teritoriju RF", inače su kazne, što nisam želio. Odlučio sam se pozabaviti tim pitanjima dok mi "odozgo" ne stigne neka vijest :).
Inspiriran migracijom infrastrukture iz Amazon Web Services u Yandex.Cloud, odlučio sam proučiti Yandex-ov stack bolje.
Za mene su ključne karakteristike Yandex.Cloud-a bile sljedeće:
- Jeftinije 2-3 puta (prema gornjem članku i javnim cijenama)
- , što veliki Amazon još ne može ostvariti.
Istraživao sam druge konkurente ove usluge, ali u to vrijeme Yandex je bio pobjednik.
O sebi sam rekao, možemo preći na stvar.
Korak 0. Pripremamo stranicu
Na početku će nam biti potrebna stranica koju želimo postaviti na Internet. Kako sam Angular programer, izradit ću jednostavan predložak SPA aplikacije, koji ću kasnije postaviti na Internet.
P.S. Tko se razumije u Angular ili zna njegovu dokumentaciju , pređite na .
Instaliramo Angular-CLI za kreiranje SPA web stranica na Angularu:
npm install -g @angular/cliKreirat ćemo Angular aplikaciju pomoću sljedeće naredbe:
ng new angular-habr-object-storageNakon toga prelazimo u mapu aplikacije i pokrećemo je da provjerimo njezino funkcioniranje:
cd angular-habr-object-storage
ng serve --open
Aplikacija je kreirana, ali još nije spremna za hosting. Izradit ćemo aplikaciju u manju verziju (Production) kako bismo uklonili suvišno i ostavili samo potrebne datoteke.
U Angularu to možemo učiniti sljedećom naredbom:
ng build --prodKao rezultat ove naredbe, u korijenu aplikacije pojavit će se mapa dist s našom web stranicom.
Radi. Sada prelazimo na hosting.
Korak 1.
Idemo na stranicu i kliknemo na gumb "Poveži se".
Napomena:
- Za korištenje Yandex usluge možda će vam trebati Yandex e-pošta (ali to nije sigurno)
- Za neke funkcije trebate uplatiti novac na račun u korisničkom kabinetu (minimalno 500 rubalja).
Nakon uspješne registracije i prijave, nalazimo se u korisničkom kabinetu.
Nakon toga, s lijeve strane u izborniku trebate pronaći uslugu "Object Storage", koju ćemo koristiti za hosting web stranice.
Ukratko o terminima:
- Object Storage je skladište datoteka, kompatibilno s sličnom tehnologijom Amazona AWS S3, koja također ima svoj API za upravljanje skladištem iz koda i može se koristiti za hosting statične web stranice kao i AWS S3.
- U Object Storage kreiramo "buckets" (kapa / Korpa), koji su odvojena skladišta naših datoteka.
Kreirat ćemo jedan od njih. Za to u konzoli usluge kliknemo na gumb "Kreiraj bucket".
U obrascu za kreiranje bucketa postoje sljedeća polja, proći ćemo kroz njih:
- Ime bucketa. Za jednostavnost, nazovimo ga isto kao i Angular projekt —
angular-habr-object-storage - Maks. veličina. Postavljamo onoliko koliko naš web sajt teži, jer se web sajt ne pohranjuje besplatno i za svaki dodijeljeni gigabajt, plaćat ćemo Yandexu mali iznos.
- Pristup za čitanje objekata. Postavljamo "Javni", jer korisnik mora moći dobiti svaku datoteku naše statične web stranice kako bi se pravilno prikazivala struktura, izvršavali skripti itd.
- Pristup popisu objekata i Pristup za čitanje postavki. Ostavit ćemo "Ograničeno". Ovo je potrebno kako bismo koristili bucket kao interno skladište datoteka za aplikacije.
- Klasa skladišta. Ostavamo "Standardno". To znači da će našu stranicu često posjećivati, a time i često preuzimati datoteke koje čine stranicu. Osim toga, to utječe na performanse i plaćanje (uplati link).
Kliknemo "Kreiraj spremnik" i spremnik je kreiran.
Sada trebamo učitati našu stranicu u spremnik. Najjednostavniji način je otvoriti mapu dist naše stranice i ručno je povući direktno na stranicu. To je praktičnije nego kliknuti na gumb "Učitaj objekte", jer u tom slučaju mape neće biti prenesene i morat ćemo ih ručno kreirati u pravom redoslijedu.
Dakle, stranica je učitana u skladište, sada možemo korisnicima omogućiti pristup skladištu kao web stranici.
Za to s lijeve strane u izborniku kliknemo na karticu "Web stranica".
Na stranici postavki spremnika kao web stranice, biramo karticu "Hosting". Ovdje navodimo glavnu stranicu sajta, obično to je index.html. Ako imate SPA aplikaciju, vjerojatno se sve greške također obrađuju na glavnoj stranici, stoga ćemo na stranicu greške također navesti index.html.
Odmah vidimo putem koje poveznice će naša stranica biti dostupna. Kliknemo spremi.
Nakon otprilike 5 minuta, idući na poveznicu, vidimo da je naša stranica sada dostupna svima koji žele.
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 vas zanima saznati više o drugim uslugama Yandexa ili o korištenju Angulara u modernom razvoju.
Izvor: habr.com
