Hey Habr!
Bu yazıda sizə Yandex texnologiyalarından istifadə edərək statik veb saytı necə asanlıqla və sadə şəkildə yerləşdirməyi izah edəcəyəm, yəni Obyekt Anbarı.
Nəhayət, xarici bir keçid vasitəsilə əldə edilə bilən veb-saytınız olacaq.
Bu məqalə faydalı olarsa
- Proqramlaşdırmağı yenicə öyrənən başlanğıc tərtibatçı;
- Portfel hazırlayan və onu dostlara və işəgötürənlərə göstərmək üçün ictimai sahəyə yerləşdirmək istəyən bir tərtibatçı.
About Me
Bu yaxınlarda mən insanların şəxsi məşq üçün idman məşqçiləri tapdığı bir növ bazar yeri olan SaaS xidmətini inkişaf etdirirdim. Amazon Veb Xidmətləri yığınından (bundan sonra AWS adlandırılacaq) istifadə edilmişdir. Amma layihəni dərindən öyrəndikcə, startapın təşkili ilə bağlı müxtəlif proseslər haqqında daha çox nüanslar öyrəndim.
Aşağıdakı problemlərlə qarşılaşdım:
- AWS çox pul sərf edirdi. Enterprise şirkətlərində 3 il işləyərək, Docker, Kubernetes, CI/CD, mavi yaşıl yerləşdirmə kimi sevinclərə öyrəşdim və həvəsli bir başlanğıc proqramçısı kimi bunu həyata keçirmək istədim. Nəticədə, AWS-nin aylıq 300-400 dollar istehlak etdiyi qənaətinə gəldim. Kubernetes ən bahalı, təxminən 100 dollar, minimum əmək haqqı bir klaster və bir node oldu.
PS Başlanğıcda bunu etməyə ehtiyac yoxdur. - Sonra, hüquqi tərəfi düşünərək, aşağıdakı kimi bir şey deyən 152-FZ qanunu haqqında öyrəndim: "Rusiya Federasiyası vətəndaşlarının şəxsi məlumatları Rusiya Federasiyasının ərazisində saxlanmalıdır", əks halda cərimələr, mən istəməzdim. Mənə yuxarıdan gəlməmişdən əvvəl bu məsələləri həll etmək qərarına gəldim :).
İlham İnfrastrukturun Amazon Web Services-dən Yandex.Cloud-a köçürülməsi haqqında, mən Yandex yığınını daha ətraflı öyrənmək qərarına gəldim.
Mənim üçün Yandex.Cloud-un əsas xüsusiyyətləri aşağıdakılar idi:
- 2-3 dəfə ucuz (yuxarıdakı məqaləyə və ictimai qiymət siyahılarına uyğun olaraq)
- , böyük Amazon hələ nail ola bilməz.
Mən bu xidmətin digər rəqiblərini öyrəndim, lakin o zaman Yandex qalib gəlirdi.
Mən sizə özüm haqqında danışdım ki, işə başlayaq.
Addım 0. Saytı hazırlayın
Birincisi, bizə internetdə yerləşdirmək istədiyimiz vebsayt lazımdır. Mən Angular developer olduğum üçün sadə bir SPA tətbiqi şablonu hazırlayacağam və sonra onu İnternetdə yerləşdirəcəyəm.
PS Angular-ı başa düşən və ya onun sənədlərini bilən , getmək .
Angular-da SPA saytları yaratmaq üçün Angular-CLI quraşdıraq:
npm install -g @angular/cliAşağıdakı əmrdən istifadə edərək Angular proqram yaradaq:
ng new angular-habr-object-storageSonra, proqram qovluğuna gedin və onun funksionallığını yoxlamaq üçün işə salın:
cd angular-habr-object-storage
ng serve --open
Tətbiq yaradılıb, lakin hostinq üçün hələ hazır deyil. Bütün lazımsız şeyləri silmək və yalnız lazımi faylları tərk etmək üçün tətbiqi kiçik bir quruluşa (İstehsal) toplayaq.
Angular-da bunu aşağıdakı komanda ilə edə bilərsiniz:
ng build --prodBu əmr nəticəsində tətbiqin kökündə bir qovluq meydana çıxdı dist saytımızla.
işləyir. İndi keçək hostinqə.
1 Adım.
Sayta gedək və "Qoşul" düyməsini basın.
Qeyd:
- Yandex xidmətindən istifadə etmək üçün sizə Yandex poçtu lazım ola bilər (lakin bu dəqiq deyil)
- Bəzi funksiyalar üçün şəxsi hesabınızdakı hesabınıza pul qoymalı olacaqsınız (minimum 500 rubl).
Uğurlu qeydiyyatdan və avtorizasiyadan sonra biz sizin şəxsi hesabınızdayıq.
Sonrakı menyuda solda saytı yerləşdirmək üçün istifadə edəcəyimiz "Obyekt Saxlama" xidmətini tapmalısınız.
Qısaca olaraq:
- Obyekt Yaddaşı Amazonun oxşar AWS S3 texnologiyasına uyğun olan fayl yaddaşıdır, onun da koddan yaddaşı idarə etmək üçün öz API var və AWS S3 kimi statik saytı yerləşdirmək üçün istifadə edilə bilər.
- Obyekt Saxlamasında biz fayllarımız üçün ayrı saxlama sahələri olan "kovalar" (vedrələr) yaradırıq.
Gəlin onlardan birini yaradaq. Bunu etmək üçün xidmət konsolunda "Çömçə yarat" düyməsini basın.
Bir vedrə yaratmaq üçün formada aşağıdakı sahələr var, onlardan keçək:
- Kova adı. Sadəlik üçün layihəni Angular ilə eyni adlandıraq -
angular-habr-object-storage - Maks. ölçüsü. Saytımızın çəkisi qədər mərc edirik, çünki sayt pulsuz saxlanmadığından və ayrılmış hər gigabayt üçün Yandex-ə kifayət qədər qəpik ödəyəcəyik.
- Oxunan obyektlərə giriş. Biz onu “İctimai” olaraq təyin etdik, çünki istifadəçi statik saytımızın hər bir faylını almalıdır ki, onun üzərində düzən tərtib olunsun, skriptlər işlənə bilsin və s.
- Obyektlərin siyahısına giriş və Parametrləri oxumaq imkanı. Onu "Məhdud" olaraq buraxın. Bu, kovadan tətbiqlər üçün daxili fayl yaddaşı kimi istifadə etmək üçün lazımdır.
- Saxlama sinfi. Onu "Standart" olaraq buraxın. Bu o deməkdir ki, saytımız tez-tez ziyarət ediləcək və buna görə də saytı təşkil edən fayllar tez-tez yüklənəcək. Üstəlik, maddə performansa və ödənişə təsir göstərir (link daxil edin).
"Bir vedrə yarat" düyməsini basın və vedrə yaradılır.
İndi saytımızı vedrə yükləməliyik. Ən asan yol yaxınlıqdakı qovluğu açmaqdır dist saytımıza daxil olun və tutacaqlardan istifadə edərək onu birbaşa səhifəyə sürükləyin. Bu, "Obyektləri yüklə" düyməsini basmaqdan daha rahatdır, çünki bu halda qovluqlar köçürülmür və onları düzgün ardıcıllıqla əl ilə yaratmalı olacaqsınız.
Beləliklə, sayt yaddaşa yüklənir, buna görə də istifadəçilərə yaddaşa vebsayt kimi daxil olmaq imkanı verə bilərik.
Bunu etmək üçün menyunun sol tərəfindəki "Veb saytı" sekmesini vurun.
Bir vedrəni sayt kimi qurmaq üçün səhifədə "Hostinq" sekmesini seçin. Burada saytın əsas səhifəsini göstəririk, adətən index.html. SPA proqramınız varsa, ehtimal ki, bütün səhvlər əsas səhifədə də işlənir, buna görə də səhv səhifəsində index.html göstərəcəyik.
Saytımızın hansı linkdən istifadə oluna biləcəyini dərhal görürük. Saxla klikləyin.
Təxminən 5 dəqiqədən sonra linkə tıklayanda saytımızın artıq hər kəs üçün əlçatan olduğunu görürük.
Sona qədər oxuyan hər kəsə təşəkkürlər! Bu, mənim ilk məqaləmdir; başqa Yandex xidmətlərini və onların frontend və backend texnologiyaları ilə inteqrasiyasını daha ətraflı təsvir etməyi planlaşdırıram.
Şərhlərdə digər Yandex xidmətləri və ya müasir inkişafda Angular-dan istifadə haqqında öyrənməkdə nə qədər maraqlı olduğunuzu yazın.
Mənbə: www.habr.com