Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Aupa Habr!

Artikulu honetan, Yandex teknologiak erabiliz webgune estatiko bat erraz eta erraz nola antolatu esango dizut, hots Objektuaren biltegia.

Azkenean, web-ostatatutako webgune bat izango duzu, kanpoko esteka baten bidez atzitu ahal izango dena.

Artikulu hau erabilgarria izango da baldin baduzu

  • Programatzen ikasten ari den garatzaile hasiberria;
  • Portafolio bat egin eta domeinu publikoan jarri nahi duen garatzailea, lagunei eta enpresaburuei erakusteko.

Niri buruz

Duela gutxi, SaaS zerbitzu bat garatzen ari nintzen, jendeak entrenamendu pertsonalerako kirol-entrenatzaileak aurkitzen dituen merkatu moduko bat. Amazon Web Services pila erabili du (aurrerantzean AWS deitzen dena). Baina zenbat eta gehiago sakondu proiektuan, orduan eta Γ±abardura gehiago ikasi nituen startup bat antolatzeko prozesu ezberdinei buruz.

Arazo hauek topatu ditut:

  • AWS diru asko kontsumitzen ari zen. 3 urtez Enterprise enpresetan lan eginda, Docker, Kubernetes, CI/CD, blue green inplementa bezalako pozetara ohitu nintzen, eta, startup-en programatzaile gisa, gauza bera ezarri nahi nuen. Ondorioz, AWS-k hilero 300-400 dolar kontsumitzen zituela ondorioztatu nuen. Kubernetes garestiena izan zen, 100 dolar inguru, kluster eta nodo bateko gutxieneko soldatarekin.
    PS Ez dago hau egin behar hasieran.
  • Jarraian, alde juridikoari buruz pentsatuz, 152-FZ legearen berri izan nuen, honelako zerbait esaten zuena: "Errusiar Federazioko herritarren datu pertsonalak Errusiako Federazioko lurraldean gorde behar dira", bestela isunak, nik nahi ez nituenak. Gai horiei aurre egitea erabaki nuen goitik etorri aurretik :).

Inspiratua Artikulu Amazon Web Services-etik Yandex.Cloud-era azpiegitura migratzeari buruz, Yandex pila zehatzago aztertzea erabaki nuen.

Niretzat, Yandex.Cloud-en ezaugarri nagusiak hauek izan ziren:

Zerbitzu honen beste lehiakide batzuk aztertu nituen, baina garai hartan Yandex irabazten ari zen.

Nire buruari buruz esan dizut, negozioari ekin diezaiogun.

0. urratsa. Prestatu gunea

Lehenik eta behin, Interneten jarri nahi dugun webgune bat behar dugu. Angular garatzailea naizenez, SPA aplikazio txantiloi sinple bat egingo dut, gero Interneten argitaratuko dudana.

PS Nork ulertzen duen Angular edo bere dokumentazioa ezagutzen duena https://angular.io/guide/setup-local, joan 1. urratsa.

Instalatu dezagun Angular-CLI Angular-en SPA guneak sortzeko:

npm install -g @angular/cli

Sortu dezagun Angular aplikazio bat komando hau erabiliz:

ng new angular-habr-object-storage

Ondoren, joan aplikazioaren karpetara eta abiarazi bere funtzionaltasuna egiaztatzeko:

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

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Aplikazioa sortu da, baina oraindik ez dago prest ostatatzeko. Munta dezagun aplikazioa eraikuntza txiki batean (Ekoizpena) beharrezkoak ez diren gauza guztiak kentzeko eta beharrezko fitxategiak soilik uzteko.
Angular-en egin dezakezu komando honekin:

ng build --prod

Komando honen ondorioz, karpeta bat agertu zen aplikazioaren erroan dist gure webgunearekin.

Obrak. Orain pasa gaitezen hostingera.

Urratsera 1.

Goazen gunera https://console.cloud.yandex.ru/ eta egin klik "Konektatu" botoian.

Oharra:

  • Yandex zerbitzua erabiltzeko, baliteke Yandex posta behar izatea (baina hori ez da ziurra)
  • Funtzio batzuetarako dirua sartu beharko duzu zure kontuan zure kontu pertsonalean (gutxienez 500 errublo).

Erregistratu eta baimendu ondoren, zure kontu pertsonalean gaude.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Hurrengo menuan ezkerrean "Object Storage" zerbitzua aurkitu behar duzu, gunea ostatatzeko erabiliko duguna.

Labur esanda:

  • Object Storage Amazon-en antzeko AWS S3 teknologiarekin bateragarria den fitxategien biltegiratze bat da, kodetik biltegiratzea kudeatzeko API propioa ere badu eta, AWS S3 bezala, gune estatiko bat ostatatzeko erabil daiteke.
  • Object Storage-n "kuboak" (buckets) sortzen ditugu, gure fitxategientzako biltegiratze eremu bereiziak direnak.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Sor dezagun horietako bat. Horretarako, zerbitzu kontsolan, egin klik "Sortu kuboa" botoian.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Ontzi bat sortzeko inprimakiak eremu hauek ditu, ikus ditzagun:

  • Kuboaren izena. Sinpletasunerako, dei diezaiogun proiektuari Angular bezalakoa - angular-habr-object-storage
  • Max. tamaina. Gure guneak pisua duen bezainbeste apustu egiten dugu, gunea ez baita doan gordetzen eta esleitutako gigabyte bakoitzeko, Yandex-i zentimo polit bat ordainduko diogu.
  • Objektuak irakurtzeko sarbidea. "Publikoa" ezarri dugu, erabiltzaileak gure gune estatikoko fitxategi bakoitza jaso behar baitu bertan diseinua behar bezala marraztu ahal izateko, script-ak prozesatu ahal izateko, etab.
  • Objektuen zerrendara sarbidea eta Irakurtzeko ezarpenetara sarbidea. Utzi "Mugatua". Hau beharrezkoa da kuboa aplikazioetarako barne fitxategien biltegiratze gisa erabiltzeko.
  • Biltegiratze klasea. Utzi "Estandarra" gisa. Horrek esan nahi du gure gunea maiz bisitatuko dela, eta, beraz, gunea osatzen duten fitxategiak maiz deskargatuko direla. Gainera, elementuak errendimenduan eta ordainketan eragiten du (sartu esteka).

Egin klik "Sortu ontzi bat" eta ontzi bat sortuko da.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Orain gure gunea ontzira igo behar dugu. Modurik errazena inguruko karpeta bat irekitzea da dist gure webgunea eta arrastatu zuzenean orrialdera heldulekuak erabiliz. Hau "Kargatu objektuak" botoian sakatzea baino erosoagoa da, kasu honetan karpetak ez baitira transferitzen eta eskuz sortu beharko dituzu sekuentzia egokian.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Beraz, gunea biltegian kargatzen da, erabiltzaileei biltegia webgune gisa sartzeko aukera eman diezaiekegun.
Horretarako, menuaren ezkerraldean, egin klik "Webgunea" fitxan.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Ontzi bat gune gisa konfiguratzeko orrian, hautatu "Ostatzea" fitxa. Hemen gunearen orri nagusia adierazten dugu, normalean index.html. SPA aplikazio bat baduzu, seguruenik errore guztiak orri nagusian ere prozesatzen dira, beraz, errore-orrian index.html ere adieraziko dugu.

Berehala ikusten dugu zein esteka erabiliko den gure webgunea. Egin klik gorde.

5 minutu inguru igaro ondoren, estekan klik eginez, gure webgunea denon eskura dagoela ikusiko dugu.

Nola ostatu webgune estatiko bat Yandex.Cloud Object Storage erabiliz

Eskerrik asko amaiera arte irakurri duzuen guztioi! Hau da nire lehen artikulua; Yandex-eko beste zerbitzu batzuk eta frontend eta backend teknologiekin integratzea gehiago deskribatzeko asmoa dut.

Idatzi iruzkinetan Yandex-en beste zerbitzu batzuei buruz edo garapen modernoan Angular erabiltzeari buruz zer interesa duzun.

Iturria: www.habr.com

Gehitu iruzkin berria