Хөөе Хабр!
Энэ нийтлэлд би Yandex технологийг ашиглан статик вэбсайтыг хэрхэн хялбар, хялбар байршуулахыг танд хэлэх болно Обьектив хадгалах.
Төгсгөлд нь та гадны холбоосоор нэвтрэх боломжтой вэб сайттай болно.
Хэрэв танд энэ нийтлэл хэрэгтэй болно
- Дөнгөж програмчилж сурч байгаа анхан шатны хөгжүүлэгч;
- Портфолио бүтээсэн бөгөөд үүнийг найз нөхөд, ажил олгогчдод үзүүлэхийн тулд олон нийтэд байршуулахыг хүсч буй хөгжүүлэгч.
Миний тухай
Саяхан би SaaS үйлчилгээг хөгжүүлж байсан бөгөөд хүмүүс хувийн бэлтгэлд зориулж спортын дасгалжуулагч олдог зах зээл юм. Amazon Web Services стекийг (цаашид AWS гэх) ашигласан. Гэхдээ би төсөл рүү гүнзгий орох тусам гарааны бизнесийг зохион байгуулах янз бүрийн үйл явцын талаар илүү их нюансуудыг олж мэдсэн.
Би дараах асуудлуудтай тулгарсан:
- AWS маш их мөнгө зарцуулж байсан. Энтерпрайз компаниудад 3 жил ажилласны дараа би Docker, Kubernetes, CI/CD, blue green deployment гэх мэт баяр баясгалангуудад дасаж, стартап програмист болох хүсэлтэй хүний хувьд үүнийг хэрэгжүүлэхийг хүссэн. Үүний үр дүнд би AWS сард 300-400 доллар зарцуулдаг гэсэн дүгнэлтэд хүрсэн. Кубернетес бол хамгийн үнэтэй, 100 орчим доллар, нэг кластер, нэг зангилаатай хөдөлмөрийн хөлсний доод хэмжээ юм.
Жич Эхэндээ үүнийг хийх шаардлагагүй. - Дараа нь хууль эрх зүйн талаас нь бодоод би 152-ФЗ хуулийн талаар олж мэдсэн бөгөөд энэ нь дараахь зүйлийг хэлсэн. "ОХУ-ын иргэдийн хувийн мэдээллийг ОХУ-ын нутаг дэвсгэр дээр хадгалах ёстой", эс бөгөөс торгууль, би үүнийг хүсээгүй. Би эдгээр асуудлыг дээрээс ирэхээс өмнө шийдэхээр шийдсэн :).
Урам зориг Amazon Web Services-ээс Yandex.Cloud руу дэд бүтцийг шилжүүлэх талаар би Yandex стекийг илүү нарийвчлан судлахаар шийдсэн.
Миний хувьд Yandex.Cloud-ийн гол шинж чанарууд нь дараах байдалтай байв.
- 2-3 дахин хямд (дээрх нийтлэл болон нийтийн үнийн жагсаалтын дагуу)
- , агуу Амазон хараахан хүрч чадахгүй байна.
Би энэ үйлчилгээний бусад өрсөлдөгчдийг судалж үзсэн боловч тэр үед Yandex ялж байсан.
Би чамд өөрийнхөө тухай хэлсэн болохоор ажилдаа оръё.
Алхам 0. Сайтыг бэлтгэ
Нэгдүгээрт, бидэнд интернетэд байршуулахыг хүссэн вэбсайт хэрэгтэй. Би Angular хөгжүүлэгч учраас энгийн SPA програмын загвар хийж, дараа нь интернетэд нийтлэх болно.
Жич Angular-ийг ойлгодог эсвэл түүний баримт бичгийн талаар мэддэг хүмүүс , руу явах .
Angular-д SPA сайтуудыг үүсгэхийн тулд Angular-CLI суулгацгаая:
npm install -g @angular/cliДараах командыг ашиглан Angular програмыг үүсгэцгээе.
ng new angular-habr-object-storageДараа нь програмын хавтас руу очиж, түүний ажиллагааг шалгахын тулд ажиллуулна уу:
cd angular-habr-object-storage
ng serve --open
Аппликейшн үүсгэгдсэн боловч байршуулахад хараахан бэлэн болоогүй байна. Бүх шаардлагагүй зүйлсийг устгаж, зөвхөн шаардлагатай файлуудыг үлдээхийн тулд програмыг жижиг бүтэцтэй (Үйлдвэрлэл) цуглуулцгаая.
Angular дээр та үүнийг дараах тушаалаар хийж болно.
ng build --prodЭнэ тушаалын үр дүнд програмын үндсэн хэсэгт хавтас гарч ирэв dist манай вэбсайттай.
Ажилладаг. Одоо хостинг руу шилжье.
1 алхам.
Сайт руу оч мөн "Холбох" товчийг дарна уу.
Тайлбар:
- Yandex үйлчилгээг ашиглахын тулд танд Yandex имэйл хэрэгтэй байж магадгүй (гэхдээ энэ нь тодорхойгүй байна)
- Зарим функцийн хувьд та өөрийн хувийн дансанд (доод тал нь 500 рубль) мөнгө оруулах шаардлагатай болно.
Амжилттай бүртгүүлж, зөвшөөрөл авсны дараа бид таны хувийн дансанд байна.
Дараа нь цэсний зүүн талд та сайтыг байршуулахад ашиглах "Объект хадгалах" үйлчилгээг олох хэрэгтэй.
Товчхондоо:
- Object Storage нь Amazon-ийн ижил төстэй AWS S3 технологитой нийцтэй файл хадгалах сан бөгөөд кодоос хадгалах санг удирдах өөрийн API-тай бөгөөд AWS S3 шиг статик сайтыг байршуулахад ашиглаж болно.
- Object Storage-д бид "хувин" (хувин) үүсгэдэг бөгөөд эдгээр нь бидний файлуудын тусдаа хадгалах газар юм.
Тэдний нэгийг бүтээцгээе. Үүнийг хийхийн тулд үйлчилгээний консол дээр "Хувин үүсгэх" товчийг дарна уу.
Хувин үүсгэх маягт нь дараах талбаруудтай бөгөөд тэдгээрийг дамжуулж үзье.
- Савны нэр. Энгийн байхын тулд төслийг Angular-тай адил гэж нэрлэе.
angular-habr-object-storage - Макс. хэмжээ. Сайт нь үнэ төлбөргүй хадгалагддаггүй бөгөөд хуваарилагдсан гигабайт бүрт бид Yandex-д нэлээн пенни төлөх болно гэж бид сайтынхаа жинтэй бооцоо тавьдаг.
- Унших объект руу нэвтрэх. Бид үүнийг "Нийтийн" гэж тохируулсан тул хэрэглэгч манай статик сайтын файл бүрийг хүлээн авах ёстой бөгөөд ингэснээр түүн дээр байршлыг зөв зурах, скриптийг боловсруулах гэх мэт боломжтой болно.
- Объектуудын жагсаалтад хандах, Унших тохиргоонд хандах. Үүнийг "Хязгаарлагдмал" гэж үлдээнэ үү. Энэ нь хувиныг програмын дотоод файл хадгалах газар болгон ашиглахад зайлшгүй шаардлагатай.
- Хадгалах анги. Үүнийг "Стандарт" гэж үлдээнэ үү. Энэ нь манай сайтад байнга зочилдог тул сайтыг бүрдүүлдэг файлууд байнга татагдах болно гэсэн үг юм. Дээрээс нь тухайн зүйл гүйцэтгэл болон төлбөрт нөлөөлдөг (холбоосыг оруулна уу).
"Хувин үүсгэх" дээр дарахад хувин үүснэ.
Одоо бид сайтаа хувин руу оруулах хэрэгтэй. Хамгийн хялбар арга бол ойролцоох хавтас нээх явдал юм dist манай сайт руу ороод бариулыг ашиглан хуудас руу шууд чирнэ үү. Энэ нь "Объектуудыг ачаалах" товчийг дарахаас илүү тохиромжтой, учир нь энэ тохиолдолд хавтаснууд шилжихгүй бөгөөд та тэдгээрийг гараар зөв дарааллаар үүсгэх хэрэгтэй болно.
Тиймээс, сайт нь хадгалах санд ачаалагдсан тул бид хэрэглэгчдэд хадгалах сан руу вэбсайт хэлбэрээр хандах боломжийг олгох болно.
Үүнийг хийхийн тулд цэсийн зүүн талд байрлах "Вэбсайт" таб дээр дарна уу.
Хувиныг сайт болгон тохируулах хуудаснаас "Хостинг" табыг сонгоно уу. Энд бид сайтын үндсэн хуудсыг зааж өгдөг, ихэвчлэн index.html. Хэрэв танд SPA програм байгаа бол бүх алдааг үндсэн хуудсан дээр боловсруулдаг тул алдааны хуудсан дээр index.html-г зааж өгөх болно.
Манай сайт ямар линкээр нэвтэрч орохыг бид шууд харж байна. Хадгалах дээр дарна уу.
Ойролцоогоор 5 минутын дараа холбоос дээр дарахад манай сайт одоо хүн бүрт нээлттэй байгааг бид харж байна.
Дуустал нь уншсан бүх хүмүүст баярлалаа! Энэ бол миний анхны нийтлэл бөгөөд би Yandex-ийн бусад үйлчилгээ, тэдгээрийн урд болон арын технологитой нэгтгэх талаар дэлгэрэнгүй тайлбарлахаар төлөвлөж байна.
Та Yandex-ийн бусад үйлчилгээний талаар, эсвэл орчин үеийн хөгжилд Angular-ийг ашиглахыг хэр сонирхож байгаагаа сэтгэгдэл дээр бичээрэй.
Эх сурвалж: www.habr.com