Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Čau Habr!

Šajā rakstā es jums pastāstīŔu, kā viegli un vienkārŔi mitināt statisku vietni, izmantojot Yandex tehnoloģijas, proti Objektu glabāŔana.

Galu galā jums būs tīmekļa vietne, kas būs pieejama, izmantojot ārēju saiti.

Šis raksts būs noderīgs, ja

  • Iesācējs izstrādātājs, kurÅ” tikai mācās programmēt;
  • Izstrādātājs, kurÅ” ir izveidojis portfeli un vēlas to ievietot publiskajā domēnā, lai parādÄ«tu to draugiem un darba devējiem.

Par sevi

Nesen es izstrādāju SaaS pakalpojumu, sava veida tirgu, kurā cilvēki atrod sporta trenerus personÄ«gajiem treniņiem. Izmantoja Amazon Web Services steku (turpmāk tekstā ā€” AWS). Taču, jo dziļāk iedziļinājos projektā, jo vairāk nianses uzzināju par dažādajiem startup organizÄ“Å”anas procesiem.

Es saskāros ar Ŕādām problēmām:

  • AWS patērēja daudz naudas. Nostrādājot 3 gadus Enterprise uzņēmumos, pieradu pie tādiem priekiem kā Docker, Kubernetes, CI/CD, zili zaļā izvietoÅ”ana, un kā topoÅ”ais startup programmētājs vēlējos to realizēt. Rezultātā es nonācu pie secinājuma, ka AWS mēnesÄ« patērēja 300ā€“400 dolārus. Kubernetes izrādÄ«jās visdārgākais, apmēram 100 dolāri, ar minimālo algu viena klastera un viena mezgla.
    PS Sākumā tas nav jādara.
  • Š”Š°Š»ŠµŠµ, Š·Š°Š“уŠ¼Š°Š²ŃˆŠøсь Š¾ юрŠøŠ“ŠøчŠµŃŠŗŠ¾Š¹ стŠ¾Ń€Š¾Š½Šµ, я уŠ·Š½Š°Š» ŠæрŠ¾ Š·Š°ŠŗŠ¾Š½ 152-Š¤Š—, Š² ŠŗŠ¾Ń‚Š¾Ń€Š¾Š¼ Š³Š¾Š²Š¾Ń€ŠøŠ»Š¾ŃŃŒ ŠæрŠøŠ¼ŠµŃ€Š½Š¾ сŠ»ŠµŠ“ующŠµŠµ: "Krievijas Federācijas pilsoņu personas dati ir jāuzglabā Krievijas Federācijas teritorijā", citādi naudas sodi, ko es negribēju. Es nolēmu Å”os jautājumus risināt, pirms tas man nonāca no augÅ”as :).

Iedvesmojies rakstus par infrastruktÅ«ras migrÄ“Å”anu no Amazon Web Services uz Yandex.Cloud, es nolēmu sÄ«kāk izpētÄ«t Yandex steku.

Manuprāt, galvenās Yandex.Cloud funkcijas bija Ŕādas:

Es pētÄ«ju citus Ŕī pakalpojuma konkurentus, bet tajā laikā uzvarēja Yandex.

Es jums pastāstīju par sevi, lai mēs varētu ķerties pie lietas.

Solis 0. Sagatavojiet vietni

Pirmkārt, mums ir vajadzÄ«ga vietne, kuru vēlamies ievietot internetā. Tā kā esmu Angular izstrādātājs, tad uztaisÄ«Å”u vienkārÅ”u SPA aplikācijas veidni, kuru pēc tam ievietoÅ”u internetā.

PS KurÅ” saprot Angular vai zina par tā dokumentāciju https://angular.io/guide/setup-local, iet uz 1. darbÄ«ba.

Instalēsim Angular-CLI, lai izveidotu SPA vietnes Angular:

npm install -g @angular/cli

Izveidosim Angular lietojumprogrammu, izmantojot Ŕādu komandu:

ng new angular-habr-object-storage

Pēc tam dodieties uz lietojumprogrammu mapi un palaidiet to, lai pārbaudītu tās funkcionalitāti:

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

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Lietojumprogramma ir izveidota, bet vēl nav gatava mitināŔanai. Saliksim lietojumprogrammu nelielā bÅ«vniecÄ«bā (Production), lai noņemtu visas nevajadzÄ«gās lietas un atstātu tikai nepiecieÅ”amos failus.
Programmā Angular to var izdarīt ar Ŕādu komandu:

ng build --prod

Šīs komandas rezultātā lietojumprogrammas saknē parādījās mape dist ar mūsu vietni.

Darbojas. Tagad pāriesim pie hostinga.

Solis 1.

Dosimies uz vietni https://console.cloud.yandex.ru/ un noklikŔķiniet uz pogas "Savienot".

Piezīme:

  • Lai izmantotu Yandex pakalpojumu, jums var bÅ«t nepiecieÅ”ams Yandex pasts (bet tas nav droÅ”i)
  • Dažām funkcijām jums bÅ«s jāiemaksā nauda savā personÄ«gajā kontā (minimums 500 rubļu).

Pēc veiksmīgas reģistrācijas un autorizācijas esam jūsu personīgajā kontā.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Tālāk izvēlnē kreisajā pusē jāatrod pakalpojums ā€œObjektu glabāŔanaā€, kuru izmantosim vietnes mitināŔanai.

ÄŖsumā par terminiem:

  • Objektu krātuve ir failu krātuve, kas ir saderÄ«ga ar Amazon lÄ«dzÄ«gu AWS S3 tehnoloÄ£iju, kurai ir arÄ« savs API, lai pārvaldÄ«tu krātuves no koda, un, tāpat kā AWS S3, to var izmantot statiskas vietnes mitināŔanai.
  • Objektu krātuvē mēs izveidojam "spaiņus" (spaiņus), kas ir atseviŔķas mÅ«su failu glabāŔanas zonas.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Izveidosim vienu no tiem. Lai to izdarÄ«tu, pakalpojumu konsolē noklikŔķiniet uz pogas ā€œIzveidot kausuā€.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Kausa izveides veidlapā ir Ŕādi lauki, apskatīsim tos:

  • Kausa nosaukums. VienkārŔības labad nosauksim projektu par tādu paÅ”u kā Angular - angular-habr-object-storage
  • Maks. Izmērs. Mēs deram tik, cik sver mÅ«su vietne, jo vietne netiek glabāta bez maksas, un par katru pieŔķirto gigabaitu mēs Yandex maksāsim diezgan santÄ«mu.
  • Piekļuve lasÄ«Å”anas objektiem. Mēs to iestatām uz ā€œPublisksā€, jo lietotājam ir jāsaņem katrs mÅ«su statiskās vietnes fails, lai tajā varētu pareizi uzzÄ«mēt izkārtojumu, apstrādāt skriptus utt.
  • Piekļuve objektu sarakstam un piekļuve lasÄ«Å”anas iestatÄ«jumiem. Atstājiet to kā "ierobežots". Tas ir nepiecieÅ”ams, lai spaini izmantotu kā lietojumprogrammu iekŔējo failu krātuvi.
  • UzglabāŔanas klase. Atstājiet to kā "Standarta". Tas nozÄ«mē, ka mÅ«su vietne tiks bieži apmeklēta, un tāpēc faili, kas veido vietni, tiks bieži lejupielādēti. Turklāt prece ietekmē veiktspēju un maksājumu (ievietojiet saiti).

NoklikŔķiniet uz ā€œIzveidot spainiā€, un spainis ir izveidots.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Tagad mums ir jāaugÅ”upielādē mÅ«su vietne spainÄ«. VienkārŔākais veids ir atvērt tuvumā esoÅ”u mapi dist mÅ«su vietni un velciet to tieÅ”i uz lapu, izmantojot rokturus. Tas ir ērtāk nekā noklikŔķināt uz pogas ā€œIelādēt objektusā€, jo Å”ajā gadÄ«jumā mapes netiek pārsÅ«tÄ«tas un tās bÅ«s jāizveido manuāli pareizā secÄ«bā.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Tātad vietne tiek ielādēta krātuvē, lai mēs varētu nodroÅ”ināt lietotājiem iespēju piekļūt krātuvei kā vietnei.
Lai to izdarÄ«tu, izvēlnes kreisajā pusē noklikŔķiniet uz cilnes Vietne.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Lapā, lai iestatÄ«tu kopu kā vietni, atlasiet cilni ā€œHostingā€. Å eit mēs norādām vietnes galveno lapu, parasti index.html. Ja jums ir SPA aplikācija, tad droÅ”i vien visas kļūdas tiek apstrādātas arÄ« galvenajā lapā, tāpēc kļūdu lapā norādÄ«sim arÄ« index.html.

Mēs uzreiz redzam, caur kuru saiti mÅ«su vietne bÅ«s pieejama. NoklikŔķiniet uz Saglabāt.

Pēc apmēram 5 minÅ«tēm, noklikŔķinot uz saites, mēs redzam, ka mÅ«su vietne tagad ir pieejama ikvienam.

Kā mitināt statisku vietni, izmantojot Yandex.Cloud Object Storage

Paldies visiem, kas izlasīja līdz galam! Šis ir mans pirmais raksts; es plānoju sīkāk aprakstīt citus Yandex pakalpojumus un to integrāciju ar frontend un backend tehnoloģijām.

Rakstiet komentāros, cik jÅ«s interesē uzzināt par citiem Yandex pakalpojumiem vai par Angular izmantoÅ”anu mÅ«sdienu attÄ«stÄ«bā.

Avots: www.habr.com

Pievieno komentāru