Yandex.Cloud Object Storage аркылуу статикалык веб-сайтты кантип өткөрүү керек

Эй Хабр!

Бул макалада мен сизге Яндекс технологияларын колдонуу менен статикалык веб-сайтты кантип оңой жана жөнөкөй жайгаштырууну айтып берем, атап айтканда Object сактоо.

Акыр-аягы, сиз тышкы шилтеме аркылуу жеткиликтүү болгон веб-сайтка ээ болосуз.

Бул макала сиз үчүн пайдалуу болот

• Программалоону жаңыдан үйрөнүп жаткан башталгыч иштеп чыгуучу;
• Портфолиону түзгөн жана аны досторуна жана иш берүүчүлөрүнө көрсөтүү үчүн коомдук доменге жайгаштыргысы келген иштеп чыгуучу.

Өзү жөнүндө

Жакында эле мен SaaS кызматын, адамдар жеке машыгуу үчүн спорттук машыктыруучуларды таба турган базардын бир түрүн иштеп чыктым. Amazon Web Services стек (мындан ары AWS деп аталат) колдонулган. Бирок мен долбоорго канчалык тереңирээк сүңгүп кирген сайын, стартапты уюштуруунун ар кандай процесстери жөнүндө ошончолук көп нюанстарды билдим.

Мен төмөнкү көйгөйлөргө туш болдум:

• AWS көп акчаны жеп жатты. Enterprise компанияларында 3 жыл иштеп, мен Docker, Kubernetes, CI/CD, көк жашыл жайгаштыруу сыяктуу кубанычтарга көнүп калдым жана стартап программист катары мен да ошону ишке ашыргым келди. Натыйжада, мен AWS ай сайын 300-400 бакс керектейт деген жыйынтыкка келдим. Kubernetes эң кымбат болуп чыкты, болжол менен 100 доллар, минималдуу эмгек акы бир кластер жана бир түйүн.
  PS Башында муну жасоонун кереги жок.
• Андан кийин, юридикалык жагын ойлонуп, мен 152-ФЗ мыйзамы жөнүндө билдим, анда төмөнкүдөй бир нерсе айтылган: "Россия Федерациясынын жарандарынын жеке маалыматтары Россия Федерациясынын аймагында сакталууга тийиш", антпесе айыптар, мен каалаган эмес. Мен бул маселелерди жогору жактан мага келгенге чейин чечүүнү чечтим :).

Илхам макалалар Amazon Web Services инфраструктурасын Yandex.Cloudка көчүрүү жөнүндө, мен Яндекс стектерин кеңири изилдөөнү чечтим.

Мен үчүн Yandex.Cloudтун негизги өзгөчөлүктөрү төмөнкүлөр болду:

• 2-3 эсе арзан (жогоруда макала жана коомдук прейскурант боюнча)
• Россия Федерациясынын аймагындагы колдонуучулардын жеке маалыматтарын сактоо, улуу Amazon азырынча жете албайт.

Мен бул кызматтын башка атаандаштарын изилдеп көрдүм, бирок ал убакта Яндекс утуп жаткан.

Мен сага өзүм жөнүндө айтып бердим, ошондуктан биз ишке киришели.

0-кадам. Сайтты даярдаңыз

Биринчиден, бизге интернетке жайгаштыргыбыз келген веб-сайт керек. Мен бурчтук иштеп чыгуучу болгондуктан, мен жөнөкөй SPA тиркемесинин шаблонун жасайм, аны кийин Интернетке жарыялайм.

PS Angularды түшүнгөн же анын документтерин билген адам https://angular.io/guide/setup-local, баруу 1 кадам.

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 биздин сайт менен.

Works. Эми хостингге өтөбүз.

Step 1.

Келгиле сайтка баралы https://console.cloud.yandex.ru/ жана "Туташуу" баскычын чыкылдатыңыз.

Эскертүү:

• Яндекс кызматын колдонуу үчүн сизге Yandex почтасы керек болушу мүмкүн (бирок бул так эмес)
• Кээ бир функциялар үчүн сиз өзүңүздүн жеке эсебиңиздеги эсебиңизге акча салышыңыз керек болот (кеминде 500 рубль).

Ийгиликтүү каттоодон жана авторизациядан кийин биз сиздин жеке аккаунтуңуздабыз.

Кийинки менюда сол жакта сиз сайтты жайгаштыруу үчүн колдоно турган "Объекттерди сактоо" кызматын табышыңыз керек.

Кыскача айтканда:

• Object Storage - бул Amazon'дун окшош AWS S3 технологиясына шайкеш келген файл сактагычы, ал ошондой эле коддон сактагычты башкаруу үчүн өзүнүн API'си бар жана AWS S3 сыяктуу статикалык сайтты жайгаштыруу үчүн колдонулушу мүмкүн.
• Объекттерди сактоодо биз файлдар үчүн өзүнчө сактоочу жайлар болгон "чакаларды" (чакаларды) түзөбүз.

Алардын бирин түзөлү. Бул үчүн, тейлөө консолунда "Челек түзүү" баскычын чыкылдатыңыз.

Чака түзүү формасында төмөнкү талаалар бар, аларды карап көрөлү:

• Чака аты. Жөнөкөйлүк үчүн, келгиле, долбоорду бурчтук сыяктуу деп атайлы - angular-habr-object-storage
• Макс. өлчөмү. Сайтыбыздын салмагына жараша коюмду коем, анткени сайт бекер сакталбагандыктан жана ар бир бөлүнгөн гигабайт үчүн биз Яндекске бир тыйындан төлөйбүз.
• Окуу объекттерине жетүү. Биз аны “Жалпыга ачык” кылып койдук, анткени колдонуучу биздин статикалык сайттын ар бир файлын кабыл алышы керек, андагы макет туура тартылышы, скрипттердин иштетилиши ж.б.
• Объекттердин тизмесине жетүү жана окуу жөндөөлөрүнө мүмкүнчүлүк. Аны "Чектелген" деп калтырыңыз. Бул чаканы тиркемелер үчүн ички файл сактагычы катары колдонуу үчүн зарыл.
• Сактоо классы. Аны "Стандарт" деп калтырыңыз. Бул биздин сайтка бат-баттан кире тургандыгын билдирет, демек, сайтты түзгөн файлдар тез-тез жүктөлөт. Plus нерсе аткаруу жана төлөм таасир этет (шилтемени кыстаруу).

"Челекти түзүү" баскычын чыкылдатыңыз жана чака түзүлөт.

Эми биз сайтыбызды чакага жүктөшүбүз керек. Эң оңой жолу - жакын жердеги папканы ачуу dist биздин сайтка жана туткаларды колдонуп, аны түз баракка сүйрөңүз. Бул "Объекттерди жүктөө" баскычын басууга караганда ыңгайлуу, анткени бул учурда папкалар өткөрүлбөйт жана сиз аларды туура ырааттуулукта кол менен түзүшүңүз керек болот.

Ошентип, сайт сактагычка жүктөлгөн, ошондуктан биз колдонуучуларга сактагычка веб-сайт катары кирүү мүмкүнчүлүгүн бере алабыз.
Бул үчүн, менюнун сол жагындагы "Веб-сайт" өтмөгүн чыкылдатыңыз.

Чаканы сайт катары орнотуу үчүн баракта "Хостинг" өтмөгүн тандаңыз. Бул жерде биз сайттын негизги барагын көрсөтөт, адатта index.html. Эгер сизде SPA тиркеме бар болсо, анда, балким, бардык каталар негизги бетте иштетилет, ошондуктан биз ката бетинде index.html да көрсөтөбүз.

Биздин сайтка кайсы шилтеме аркылуу кирүүгө болорун дароо көрөбүз. Сактоо баскычын басыңыз.

Болжол менен 5 мүнөттөн кийин шилтемени басып, биздин сайт азыр бардыгына жеткиликтүү экенин көрөбүз.

Аягына чейин окугандарга рахмат! Бул менин биринчи макалам, мен мындан ары Яндекстин башка кызматтарын жана алардын фронт жана бэкенд технологиялары менен интеграциясын сүрөттөп берүүнү пландап жатам;

Комментарийлерге Яндекстин башка кызматтары же заманбап өнүгүүдө Angular колдонуу жөнүндө билүүгө канчалык кызыкдар экениңизди жазыңыз.

Source: www.habr.com