Pozdravljeni, Habr!
V tem članku vam bom povedal, kako enostavno in preprosto gostiti statično spletno mesto z uporabo tehnologij Yandex, in sicer Shranjevanje objektov.
Na koncu boste imeli spletno stran, ki bo dostopna preko zunanje povezave.
Ta članek vam bo koristen, če
- Razvijalec začetnik, ki se šele uči programirati;
- Razvijalec, ki je naredil portfelj in ga želi dati v javno domeno, da ga pokaže prijateljem in delodajalcem.
O sebi
Pred kratkim sem razvijal storitev SaaS, nekakšno tržnico, kjer ljudje najdejo športne trenerje za osebno vadbo. Uporabil je sklad Amazon Web Services (v nadaljevanju AWS). Toda globlje ko sem se poglobil v projekt, več nians sem izvedel o različnih procesih organizacije startupa.
Naletel sem na naslednje težave:
- AWS je požrl veliko denarja. Po 3 letih dela v Enterprise podjetjih sem se navadil na radosti, kot so Docker, Kubernetes, CI/CD, blue green deployment, in kot ambiciozen startup programer sem želel implementirati isto. Posledično sem prišel do zaključka, da AWS porabi 300-400 dolarjev mesečno. Kubernetes se je izkazal za najdražjega, okoli 100 dolarjev, z minimalno plačo enega grozda in enega vozlišča.
PS Tega ni treba storiti na začetku. - Nato sem razmišljal o pravni strani in izvedel za zakon 152-FZ, ki pravi nekaj takega: "Osebni podatki državljanov Ruske federacije morajo biti shranjeni na ozemlju Ruske federacije", sicer globe, česar pa nisem želel. Odločil sem se, da se lotim teh vprašanj, preden mi pride od zgoraj :).
Navdihnjen o selitvi infrastrukture iz spletnih storitev Amazon v Yandex.Cloud sem se odločil podrobneje preučiti sklad Yandex.
Zame so bile ključne značilnosti Yandex.Cloud naslednje:
- 2-3x ceneje (glede na zgornji članek in javne cenike)
- , česar veliki Amazon še ne more doseči.
Preučeval sem druge konkurente te storitve, vendar je takrat zmagoval Yandex.
Povedal sem vam o sebi, da se lahko lotimo zadeve.
Korak 0. Pripravite mesto
Najprej potrebujemo spletno stran, ki jo želimo postaviti na internet. Ker sem Angular razvijalec, bom izdelal preprosto predlogo aplikacije SPA, ki jo bom nato objavil na internetu.
PS Kdo razume Angular ali pozna njegovo dokumentacijo , Pojdi do .
Namestimo Angular-CLI za ustvarjanje spletnih mest SPA v Angularju:
npm install -g @angular/cliUstvarimo aplikacijo Angular z naslednjim ukazom:
ng new angular-habr-object-storageNato pojdite v mapo aplikacije in jo zaženite, da preverite njeno delovanje:
cd angular-habr-object-storage
ng serve --open
Aplikacija je izdelana, vendar še ni pripravljena za gostovanje. Aplikacijo sestavimo v majhno gradnjo (produkcija), da odstranimo vse nepotrebne stvari in pustimo samo potrebne datoteke.
V Angularju lahko to storite z naslednjim ukazom:
ng build --prodKot rezultat tega ukaza se je v korenu aplikacije pojavila mapa dist z našo spletno stranjo.
dela. Zdaj pa preidimo na gostovanje.
Korak 1.
Pojdi na spletno stran in kliknite na gumb "Poveži".
Opomba:
- Za uporabo storitve Yandex boste morda potrebovali Yandex mail (vendar to ni gotovo)
- Za nekatere funkcije boste morali položiti denar na svoj osebni račun (najmanj 500 rubljev).
Po uspešni registraciji in avtorizaciji smo v vašem osebnem računu.
Naslednji na levi v meniju morate najti storitev "Object Storage", ki jo bomo uporabljali za gostovanje spletnega mesta.
Na kratko v smislu:
- Object Storage je shramba datotek, združljiva s podobno Amazonovo tehnologijo AWS S3, ki ima tudi lasten API za upravljanje shranjevanja iz kode in se lahko, tako kot AWS S3, uporablja za gostovanje statičnega mesta.
- V Object Storageu ustvarjamo »vedra« (buckets), ki so ločena področja za shranjevanje naših datotek.
Ustvarimo eno izmed njih. Če želite to narediti, v servisni konzoli kliknite gumb »Ustvari vedro«.
Obrazec za ustvarjanje vedra ima naslednja polja, pojdimo skozi njih:
- Ime vedra. Zaradi poenostavitve poimenujmo projekt enako kot Angular –
angular-habr-object-storage - maks. velikost. Stavimo toliko, kolikor tehta naše spletno mesto, saj spletno mesto ni shranjeno brezplačno in za vsak dodeljen gigabajt bomo Yandexu plačali lep peni.
- Dostop do branja predmetov. Nastavili smo ga na »Javno«, saj mora uporabnik prejeti vsako datoteko našega statičnega mesta, da se lahko na njej pravilno izriše postavitev, obdelajo skripti itd.
- Dostop do seznama objektov in Dostop do branja nastavitev. Pustite kot »Omejeno«. To je potrebno za uporabo vedra kot notranjega pomnilnika datotek za aplikacije.
- Razred shranjevanja. Pustite kot "Standardno". To pomeni, da bo naše spletno mesto pogosto obiskano, zato se bodo datoteke, ki sestavljajo spletno mesto, pogosto prenašale. Poleg tega element vpliva na uspešnost in plačilo (vstavite povezavo).
Kliknite »Ustvari vedro« in vedro je ustvarjeno.
Zdaj moramo naše spletno mesto naložiti v vedro. Najlažji način je, da odprete mapo v bližini dist naše spletno mesto in ga z ročaji povlecite neposredno na stran. To je bolj priročno kot klik na gumb »Naloži predmete«, ker se v tem primeru mape ne prenesejo in jih boste morali ustvariti ročno v pravilnem zaporedju.
Stran je torej naložena v shrambo, tako da lahko uporabnikom ponudimo možnost dostopa do shrambe kot spletne strani.
Če želite to narediti, na levi strani menija kliknite zavihek »Spletna stran«.
Na strani za nastavitev vedra kot spletnega mesta izberite zavihek »Gostovanje«. Tukaj navedemo glavno stran spletnega mesta, običajno index.html. Če imate aplikacijo SPA, potem se verjetno vse napake obdelajo tudi na glavni strani, zato bomo na strani z napakami navedli tudi index.html.
Takoj vidimo, prek katere povezave bo naše spletno mesto dostopno. Kliknite shrani.
Po približno 5 minutah klika na povezavo vidimo, da je naša stran zdaj na voljo vsem.
Hvala vsem, ki ste prebrali do konca! To je moj prvi članek; nameravam dodatno opisati druge storitve Yandex in njihovo integracijo s frontend in backend tehnologijami.
V komentarje napišite, kako vas zanima učenje o drugih storitvah Yandex ali o uporabi Angularja v sodobnem razvoju.
Vir: www.habr.com