Эй Хабр!
Бұл мақалада мен сізге Яндекс технологияларының көмегімен статикалық веб-сайтты қалай оңай және қарапайым орналастыру керектігін айтамын, атап айтқанда Нысанды сақтау.
Соңында сізде сыртқы сілтеме арқылы қол жеткізуге болатын веб-сайт болады.
Бұл мақала сізге пайдалы болады
- Бағдарламалауды жаңадан үйреніп жатқан бастаушы әзірлеуші;
- Портфолио жасаған және оны достары мен жұмыс берушілеріне көрсету үшін оны қоғамдық доменге орналастырғысы келетін әзірлеуші.
Өзі жайлы
Жақында мен SaaS қызметін әзірлеп жатырмын, бұл адамдар жеке жаттығулар үшін спорттық жаттықтырушыларды табатын нарық түрі. Amazon Web Services стегі (бұдан әрі AWS) пайдаланылды. Бірақ мен жобаға неғұрлым тереңірек енген сайын, стартапты ұйымдастырудың әртүрлі процестері туралы көбірек нюанстарды білдім.
Мен келесі мәселелерге тап болдым:
- AWS көп ақша жұмсады. Кәсіпорын компанияларында 3 жыл жұмыс істеп, мен Docker, Kubernetes, CI/CD, көк жасыл орналастыру сияқты қуаныштарға үйрендім және стартап-бағдарламашы ізденуші ретінде мен де соны іске асырғым келді. Нәтижесінде мен AWS ай сайын 300-400 доллар тұтынады деген қорытындыға келдім. Кубернетес ең қымбат болып шықты, шамамен 100 доллар, ең төменгі жалақы бір кластер мен бір түйін.
PS Бастапқыда мұны істеудің қажеті жоқ. - Әрі қарай, құқықтық жағы туралы ойлана отырып, мен 152-ФЗ заңы туралы білдім, онда келесідей нәрсе айтылған: «Ресей Федерациясы азаматтарының жеке деректері Ресей Федерациясының аумағында сақталуы керек», әйтпесе айыппұлдар, мен мұны қаламадым. Мен бұл мәселелерді жоғарыдан келгенге дейін шешуді шештім :).
Шабыттанған Amazon Web Services-тен Yandex.Cloud-қа инфрақұрылымды көшіру туралы мен Яндекс стекін толығырақ зерттеуді шештім.
Мен үшін Yandex.Cloud негізгі мүмкіндіктері келесідей болды:
- 2-3 есе арзан (жоғарыдағы мақалаға және жалпыға ортақ прейскуранттарға сәйкес)
- , оған ұлы Amazon әлі жете алмайды.
Мен осы қызметтің басқа бәсекелестерін зерттедім, бірақ сол кезде Яндекс жеңіп шықты.
Мен сізге өзім туралы айттым, сондықтан біз іске кірісейік.
Қадам 0. Сайтты дайындаңыз
Біріншіден, бізге интернетте орналастырғымыз келетін веб-сайт қажет. Мен бұрыштық әзірлеуші болғандықтан, мен қарапайым SPA қолданбасының үлгісін жасаймын, содан кейін оны Интернетте орналастырамын.
PS Angular тілін түсінетін немесе оның құжаттамасы туралы білетін адам , бару .
Angular-да SPA сайттарын жасау үшін Angular-CLI орнатайық:
npm install -g @angular/cliКелесі пәрменді пайдаланып бұрыштық қосымшаны жасайық:
ng new angular-habr-object-storageСодан кейін қолданба қалтасына өтіп, оның функционалдығын тексеру үшін оны іске қосыңыз:
cd angular-habr-object-storage
ng serve --open
Қолданба жасалды, бірақ хостингке әлі дайын емес. Барлық қажет емес заттарды алып тастау және тек қажетті файлдарды қалдыру үшін қолданбаны шағын құрылымға (Өндіріс) жинайық.
Angular-да мұны келесі пәрменмен орындауға болады:
ng build --prodОсы команданың нәтижесінде қолданбаның түбірінде қалта пайда болды dist біздің веб-сайтымызбен.
Жұмыстар. Енді хостингке көшейік.
1 қадамға.
веб-торабына өтіңіз және «Қосылу» түймесін басыңыз.
Ескертпе:
- Яндекс қызметін пайдалану үшін сізге Яндекс поштасы қажет болуы мүмкін (бірақ бұл нақты емес)
- Кейбір функциялар үшін сіз өзіңіздің жеке шотыңыздағы шотыңызға ақша салуыңыз керек (кемінде 500 рубль).
Сәтті тіркеуден және авторизациядан кейін біз сіздің жеке кабинетіңізге кіреміз.
Содан кейін мәзірдің сол жағында сіз сайтты орналастыру үшін қолданатын «Объектілерді сақтау» қызметін табуыңыз керек.
Қысқаша айтқанда:
- Object Storage — Amazon компаниясының ұқсас AWS S3 технологиясымен үйлесімді файл қоймасы, оның кодтан сақтауды басқаруға арналған өз API интерфейсі де бар және AWS S3 сияқты статикалық сайтты орналастыру үшін пайдаланылуы мүмкін.
- Object Storage жүйесінде біз файлдар үшін бөлек сақтау аймақтары болып табылатын «шелектерді» (шелектерді) жасаймыз.
Солардың бірін жасайық. Мұны істеу үшін қызмет консолінде «Шелекті жасау» түймесін басыңыз.
Шелек жасауға арналған пішінде келесі өрістер бар, оларды қарастырайық:
- Шелек атауы. Қарапайымдылық үшін жобаны бұрыштық деп атаймыз -
angular-habr-object-storage - Макс. өлшемі. Сайттың салмағына қарай бәс тігуге болады, өйткені сайт тегін сақталмайды және әрбір бөлінген гигабайт үшін біз Яндекске әдемі тиын төлейміз.
- Оқу объектілеріне қол жеткізу. Біз оны «Жалпыға ортақ» етіп орнаттық, өйткені пайдаланушы біздің статикалық сайтымыздың әрбір файлын алуы керек, сонда макет дұрыс сызылады, сценарийлер өңделеді және т.б.
- Нысандар тізіміне кіру және оқу параметрлеріне қол жеткізу. Оны «Шектеулі» ретінде қалдырыңыз. Бұл шелекті қолданбалар үшін ішкі файл қоймасы ретінде пайдалану үшін қажет.
- Сақтау класы. Оны «Стандарт» ретінде қалдырыңыз. Бұл біздің сайтқа жиі кіретінін білдіреді, сондықтан сайтты құрайтын файлдар жиі жүктеледі. Сонымен қатар, элемент өнімділікке және төлемге әсер етеді (сілтемені енгізіңіз).
«Шелекті жасау» түймесін басыңыз және шелек жасалады.
Енді біз өз сайтымызды шелекке жүктеуіміз керек. Ең оңай жолы - жақын жердегі қалтаны ашу dist біздің сайтты таңдап, тұтқаларды пайдаланып оны тікелей бетке сүйреңіз. Бұл «Объектілерді жүктеу» түймесін басқаннан гөрі ыңғайлы, өйткені бұл жағдайда қалталар тасымалданбайды және сіз оларды дұрыс ретпен қолмен жасауыңыз керек.
Сонымен, сайт жадқа жүктелді, сондықтан біз пайдаланушыларға қоймаға веб-сайт ретінде кіру мүмкіндігін бере аламыз.
Мұны істеу үшін мәзірдің сол жағындағы «Веб-сайт» қойындысын басыңыз.
Шелекті сайт ретінде орнату бетте «Хостинг» қойындысын таңдаңыз. Мұнда біз сайттың негізгі бетін көрсетеміз, әдетте index.html. Егер сізде SPA қолданбасы болса, онда барлық қателер негізгі бетте өңделген болуы мүмкін, сондықтан қате бетінде index.html файлын да көрсетеміз.
Біздің сайтқа қай сілтеме арқылы қол жеткізуге болатынын бірден көреміз. Сақтау түймесін басыңыз.
Шамамен 5 минуттан кейін сілтемені басқаннан кейін біз сайтымыздың барлығына қолжетімді екенін көреміз.
Соңына дейін оқығандарға рахмет! Бұл менің бірінші мақалам; мен әрі қарай Яндекстің басқа қызметтерін және олардың фронтпен және серверлік технологиялармен интеграциясын сипаттауды жоспарлап отырмын.
Түсініктемелерде Яндекстің басқа қызметтері туралы немесе заманауи дамуда Angular-ды пайдалану туралы білуге қаншалықты қызығушылық танытатыныңызды жазыңыз.
Ақпарат көзі: www.habr.com