Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Hej Habr!

En ĉi tiu artikolo, mi rakontos al vi kiel facile kaj simple gastigi statikan retejon uzante Yandex-teknologiojn, nome Stokado de Objektoj.

Fine, vi havos retejon gastigitan, kiu estos alirebla per ekstera ligilo.

Ĉi tiu artikolo estos utila se vi

  • Komenca programisto, kiu nur lernas programi;
  • Programisto, kiu faris biletujon kaj volas meti ĝin en la publikan domajnon por montri ĝin al amikoj kaj dungantoj.

Pri mi

Lastatempe mi disvolvis servon SaaS, specon de vendoplaco, kie homoj trovas sportajn trejnistojn por persona trejnado. Uzis la stakon de Amazon Web Services (ĉi-poste nomata AWS). Sed ju pli profunde mi plonĝis en la projekton, des pli da nuancoj mi lernis pri la malsamaj procezoj de organizado de starto.

Mi renkontis la jenajn problemojn:

  • AWS konsumis multe da mono. Laborinte 3 jarojn en Entreprenaj kompanioj, mi alkutimiĝis al tiaj ĝojoj kiel Docker, Kubernetes, CI/CD, bluverda deplojo, kaj, kiel aspiranta startprogramisto, mi volis efektivigi la samon. Kiel rezulto, mi venis al la konkludo, ke AWS konsumis 300-400 dolarojn monate. Kubernetes montriĝis la plej multekosta, ĉirkaŭ 100 dolaroj, kun minimuma salajro de unu areto kaj unu nodo.
    PS Ne necesas fari tion ĉe la komenco.
  • Poste, pensante pri la jura flanko, mi eksciis pri leĝo 152-FZ, kiu diris ion kiel jenon: "Personaj datumoj de civitanoj de la Rusa Federacio devas esti konservitaj sur la teritorio de la Rusa Federacio", alie monpunoj, kiujn mi ne volis. Mi decidis pritrakti ĉi tiujn aferojn antaŭ ol ĝi venis al mi de supre :).

Inspirita artikoloj pri migrado de infrastrukturo de Amazon Web Services al Yandex.Cloud, mi decidis studi la Yandex-stako pli detale.

Por mi, la ĉefaj trajtoj de Yandex.Cloud estis la jenaj:

Mi studis aliajn konkurantojn de ĉi tiu servo, sed en tiu tempo Yandex venkis.

Mi rakontis al vi pri mi mem, por ke ni povu eklabori.

Paŝo 0. Preparu la retejon

Unue, ni bezonas retejon, kiun ni volas meti en la Interreto. Ĉar mi estas Angular-programisto, mi faros simplan ŝablonon pri SPA-aplikaĵo, kiun mi poste afiŝos en la Interreto.

PS Kiu komprenas Angular aŭ scias pri ĝia dokumentado https://angular.io/guide/setup-local, iru al Paŝo 1.

Ni instalu Angular-CLI por krei SPA-ejojn en Angular:

npm install -g @angular/cli

Ni kreu Angular-aplikaĵon uzante la jenan komandon:

ng new angular-habr-object-storage

Poste, iru al la aplikaĵa dosierujo kaj lanĉu ĝin por kontroli ĝian funkcion:

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

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

La aplikaĵo estas kreita, sed ankoraŭ ne estas preta por gastigado. Ni kunigu la aplikaĵon en malgrandan konstruaĵon (Produktado) por forigi ĉiujn nenecesajn aferojn kaj lasi nur la necesajn dosierojn.
En Angular vi povas fari tion per la sekva komando:

ng build --prod

Kiel rezulto de ĉi tiu komando, dosierujo aperis en la radiko de la aplikaĵo dist kun nia retejo.

Verkoj. Nun ni transiru al gastigado.

Ŝtupo 1.

Ni iru al la retejo https://console.cloud.yandex.ru/ kaj alklaku la butonon "Konekti".

Notu:

  • Por uzi la Yandex-servon, vi eble bezonas Yandex-poŝton (sed ĉi tio ne estas certa)
  • Por iuj funkcioj vi devos deponi monon en vian konton en via persona konto (minimume 500 rubloj).

Post sukcesa registrado kaj rajtigo, ni estas en via persona konto.

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Poste maldekstre en la menuo vi devas trovi la servon "Objekto Stokado", kiun ni uzos por gastigi la retejon.

Mallonge en terminoj:

  • Object Storage estas dosierstokado kongrua kun la simila AWS S3-teknologio de Amazon, kiu ankaŭ havas sian propran API por administri stokadon de kodo kaj, kiel AWS S3, povas esti uzata por gastigi statikan retejon.
  • En Object Storage ni kreas "siteloj" (siteloj), kiuj estas apartaj stokejoj por niaj dosieroj.

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Ni kreu unu el ili. Por fari tion, en la servokonzolo, alklaku la butonon "Krei sitelon".

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

La formularo por krei sitelon havas la jenajn kampojn, ni trarigardu ilin:

  • Nomo de sitelo. Por simpleco, ni nomu la projekton same kiel Angular - angular-habr-object-storage
  • Maks. grandeco. Ni vetas tiom multe kiom pezas nia retejo, ĉar la retejo ne estas stokita senpage kaj por ĉiu asignita gigabajto, ni pagos al Yandex belan pencon.
  • Aliro por legi objektojn. Ni agordas ĝin al "Publika", ĉar la uzanto devas ricevi ĉiun dosieron de nia senmova retejo por ke la aranĝo estu ĝuste desegnita sur ĝi, skriptoj povas esti prilaboritaj ktp.
  • Aliro al la listo de objektoj kaj Aliro por legi agordojn. Lasu ĝin kiel "Limigita". Ĉi tio estas necesa por uzi la sitelon kiel internan dosierstokadon por aplikoj.
  • Stoka klaso. Lasu ĝin kiel "Norma". Ĉi tio signifas, ke nia retejo estos ofte vizitata, kaj tial la dosieroj kiuj konsistigas la retejon estos ofte elŝutitaj. Krome la objekto influas rendimenton kaj pagon (enigu ligilon).

Alklaku "Krei sitelon" kaj la sitelo estas kreita.

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Nun ni devas alŝuti nian retejon al la sitelo. La plej facila maniero estas malfermi dosierujon proksime dist nian retejon kaj trenu ĝin rekte sur la paĝon uzante tenilojn. Ĉi tio estas pli oportuna ol alklaki la butonon "Ŝargi objektojn", ĉar ĉi-kaze la dosierujoj ne estas translokigitaj kaj vi devos krei ilin permane en la ĝusta sinsekvo.

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Do, la retejo estas ŝarĝita en la stokadon, do ni povas provizi uzantojn kun la ŝanco aliri la stokadon kiel retejo.
Por fari tion, sur la maldekstra flanko de la menuo, alklaku la langeton "Retejo".

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Sur la paĝo por agordi sitelon kiel retejon, elektu la langeton "Gastigado". Ĉi tie ni indikas la ĉefpaĝon de la retejo, kutime index.html. Se vi havas SPA-aplikaĵon, tiam verŝajne ĉiuj eraroj ankaŭ estas procesitaj sur la ĉefpaĝo, do ni ankaŭ indikos index.html sur la erarpaĝo.

Ni tuj vidas de kiu ligilo estos alirebla nia retejo. Alklaku konservi.

Post ĉirkaŭ 5 minutoj, alklakante la ligilon, ni vidas, ke nia retejo nun estas disponebla por ĉiuj.

Kiel gastigi statikan retejon uzante Yandex.Cloud Object Storage

Dankon al ĉiuj, kiuj legis ĝis la fino! Ĉi tiu estas mia unua artikolo; Mi planas plu priskribi aliajn Yandex-servojn kaj ilian integriĝon kun fasado kaj backend teknologioj.

Skribu en la komentoj kiom vi interesas lerni pri aliaj Yandex-servoj aŭ pri la uzo de Angular en moderna disvolviĝo.

fonto: www.habr.com

Aldoni komenton