Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Hoy Habr!

Sa kini nga artikulo, isulti ko kanimo kung giunsa ang dali ug yano nga pag-host sa usa ka static nga website gamit ang mga teknolohiya sa Yandex, nga mao Pagtipig sa Imo.

Sa katapusan, ikaw adunay usa ka web-host nga website nga ma-access pinaagi sa usa ka eksternal nga link.

Kini nga artikulo mahimong mapuslanon kung ikaw

  • Usa ka bag-ong developer nga nagkat-on lang sa pagprograma;
  • Usa ka developer nga naghimo ug portfolio ug gusto nga ibutang kini sa publikong dominyo aron ipakita kini sa mga higala ug amo.

Mahitungod sa akong kaugalingon

Bag-ohay lang, nagpalambo ko og serbisyo sa SaaS, usa ka matang sa merkado diin ang mga tawo mangita og mga sports trainer alang sa personal nga pagbansay. Gigamit ang Amazon Web Services stack (gitawag dinhi nga AWS). Apan sa mas lawom nga pag-dive nako sa proyekto, mas daghang mga nuances ang akong nahibal-an bahin sa lainlaing mga proseso sa pag-organisar sa usa ka pagsugod.

Nakasugat ko sa mosunod nga mga problema:

  • Ang AWS nag-usik ug daghang salapi. Nagtrabaho sa 3 ka tuig sa mga kompanya sa Enterprise, naanad ko sa mga kalipayan sama sa Docker, Kubernetes, CI/CD, blue green nga pagdeploy, ug, isip usa ka aspiring startup programmer, gusto nako nga ipatuman ang parehas. Ingon usa ka sangputanan, nakahinapos ako nga ang AWS mikonsumo og 300-400 ka bucks matag bulan. Ang mga Kubernetes nahimong labing mahal, mga 100 ka bucks, nga adunay minimum nga sweldo sa usa ka cluster ug usa ka node.
    PS Dili kinahanglan nga buhaton kini sa pagsugod.
  • Sunod, naghunahuna bahin sa ligal nga bahin, nahibal-an nako ang bahin sa balaod 152-FZ, nga nagsulti sama sa mosunod: "Ang personal nga datos sa mga lungsuranon sa Russian Federation kinahanglan nga tipigan sa teritoryo sa Russian Federation", kon dili multa, nga dili nako gusto. Nakahukom ko nga atubangon kini nga mga isyu sa wala pa kini moabut kanako gikan sa itaas :).

Gidasig artikulo mahitungod sa pagbalhin sa imprastraktura gikan sa Amazon Web Services ngadto sa Yandex.Cloud, nakahukom ko nga tun-an ang Yandex stack sa mas detalyado.

Alang kanako, ang mga nag-unang bahin sa Yandex.Cloud mao ang mga musunud:

Gitun-an nako ang ubang mga kakompetensya niini nga serbisyo, apan niadtong panahona nagdaog ang Yandex.

Gisultihan ko ikaw bahin sa akong kaugalingon, aron mahimo naton ang negosyo.

Lakang 0. Pag-andam sa site

Una, kinahanglan namon ang usa ka website nga gusto namon ibutang sa Internet. Tungod kay ako usa ka Angular developer, maghimo ako usa ka yano nga template sa aplikasyon sa SPA, nga akong i-post sa Internet.

PS Kinsa nakasabut sa Angular o nahibal-an bahin sa dokumentasyon niini https://angular.io/guide/setup-local, adto sa Lakang 1.

Atong i-install ang Angular-CLI aron makahimo og mga site sa SPA sa Angular:

npm install -g @angular/cli

Maghimo kita og Angular nga aplikasyon gamit ang mosunod nga sugo:

ng new angular-habr-object-storage

Sunod, adto sa folder sa aplikasyon ug ilunsad kini aron masusi ang pagpaandar niini:

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

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Ang aplikasyon nahimo na, apan dili pa andam alang sa pag-host. Atong tipunon ang aplikasyon ngadto sa usa ka gamay nga pagtukod (Produksyon) aron matangtang ang tanan nga wala kinahanglana nga mga butang ug ibilin lamang ang kinahanglan nga mga file.
Sa Angular mahimo nimo kini gamit ang mosunud nga mando:

ng build --prod

Ingon usa ka sangputanan sa kini nga mando, usa ka folder ang nagpakita sa gamut sa aplikasyon dist uban sa among website.

Mga buhat. Karon magpadayon kita sa pag-host.

Lakang 1.

Adto ta sa site https://console.cloud.yandex.ru/ ug i-klik ang "Connect" button.

Mubo nga sulat:

  • Aron magamit ang serbisyo sa Yandex, mahimo nimo kinahanglan ang Yandex mail (apan dili kini sigurado)
  • Alang sa pipila ka mga gimbuhaton kinahanglan nimo nga magdeposito sa salapi sa imong account sa imong personal nga account (minimum nga 500 nga mga rubles).

Pagkahuman sa malampuson nga pagrehistro ug pagtugot, naa kami sa imong personal nga account.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Sunod sa wala sa menu kinahanglan nimo pangitaon ang serbisyo nga "Pagtipig sa butang", nga among gamiton alang sa pag-host sa site.

Sa mubo sa termino:

  • Ang Object Storage usa ka file storage compatible sa susama nga teknolohiya sa AWS S3 sa Amazon, nga adunay kaugalingon usab nga API alang sa pagdumala sa storage gikan sa code ug, sama sa AWS S3, mahimong magamit sa pag-host sa usa ka static nga site.
  • Sa Object Storage naghimo kami og "mga balde" (mga balde), nga lahi nga mga lugar nga tipiganan alang sa among mga file.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Himoon nato ang usa niini. Aron mahimo kini, sa service console, i-klik ang "Paghimo balde" nga buton.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Ang porma sa paghimo og balde adunay mga mosunod nga mga field, atong susihon kini:

  • Ngalan sa balde. Alang sa kayano, tawgon nato ang proyekto nga parehas sa Angular - angular-habr-object-storage
  • Max. gidak-on. Nagpusta kami kutob sa gibug-aton sa among site, tungod kay ang site wala gitipigan nga libre ug alang sa matag gigabyte nga gigahin, magbayad kami sa Yandex usa ka matahum nga sentimos.
  • Pag-access sa pagbasa sa mga butang. Among gibutang kini sa "Public", tungod kay ang user kinahanglang makadawat sa matag file sa among static nga site aron ang layout madrowing sa husto niini, maproseso ang mga script, ug uban pa.
  • Pag-access sa lista sa mga butang ug Pag-access sa mga setting sa pagbasa. Ibilin kini nga "Limitado". Kinahanglan kini aron magamit ang balde ingon internal nga pagtipig sa file alang sa mga aplikasyon.
  • Klase sa pagtipig. Ibilin kini nga "Standard". Kini nagpasabut nga ang among site kanunay nga bisitahan, ug busa ang mga file nga naglangkob sa site kanunay nga ma-download. Dugang pa nga ang butang makaapekto sa performance ug pagbayad (insert link).

I-klik ang "Paghimo og balde" ug ang balde gihimo.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Karon kinahanglan namong i-upload ang among site sa balde. Ang labing kadali nga paagi mao ang pag-abli sa usa ka folder sa duol dist among site ug i-drag kini direkta sa panid gamit ang mga gunitanan. Kini mas sayon ​​​​kay sa pag-klik sa "Pag-load sa mga butang" nga buton, tungod kay sa kini nga kaso ang mga folder dili gibalhin ug kinahanglan nimo nga buhaton kini nga mano-mano sa husto nga pagkasunod-sunod.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Mao nga, ang site gikarga sa pagtipig, aron mahatagan namon ang mga tiggamit og higayon nga ma-access ang pagtipig ingon usa ka website.
Aron mahimo kini, sa wala nga bahin sa menu, i-klik ang tab nga "Website".

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Sa panid alang sa pagpahimutang sa usa ka balde ingon usa ka site, pilia ang tab nga "Pag-host". Dinhi among gipakita ang nag-unang panid sa site, kasagaran index.html. Kung ikaw adunay usa ka aplikasyon sa SPA, nan tingali ang tanan nga mga sayup giproseso usab sa panguna nga panid, mao nga ipakita usab namon ang index.html sa panid sa sayup.

Atong makita dayon kung unsang link ang ma-access sa among site. Pag-klik sa pagluwas.

Pagkahuman sa mga 5 minuto, pag-klik sa link, among nakita nga ang among site magamit na sa tanan.

Giunsa ang pag-host sa usa ka static nga site gamit ang Yandex.Cloud Object Storage

Salamat sa tanan nga nagbasa hangtod sa katapusan! Kini ang akong una nga artikulo; Nagplano ako nga ihulagway ang ubang mga serbisyo sa Yandex ug ang ilang panagsama sa mga teknolohiya sa frontend ug backend.

Isulat sa mga komento kung unsa ka interesado sa pagkat-on bahin sa ubang mga serbisyo sa Yandex o bahin sa paggamit sa Angular sa modernong pag-uswag.

Source: www.habr.com

Idugang sa usa ka comment