Ինչպես հյուրընկալել ստատիկ կայք՝ օգտագործելով Yandex.Cloud Object Storage-ը

Հե՜յ Հաբր։

Այս հոդվածում ես ձեզ կասեմ, թե ինչպես հեշտությամբ և պարզապես հյուրընկալել ստատիկ կայք՝ օգտագործելով Yandex տեխնոլոգիաները, մասնավորապես Նյութերի պահեստավորում.

Ի վերջո, դուք կունենաք վեբ հոսթինգի կայք, որը հասանելի կլինի արտաքին հղման միջոցով:

Այս հոդվածը օգտակար կլինի, եթե դուք

• Սկսնակ ծրագրավորող, ով նոր է սովորում ծրագրավորել;
• Մշակող, ով ստեղծել է պորտֆոլիո և ցանկանում է այն տեղադրել հանրային սեփականությունում՝ ընկերներին և գործատուներին ցույց տալու համար:

About Me

Վերջերս ես մշակում էի SaaS ծառայությունը, մի տեսակ շուկա, որտեղ մարդիկ սպորտային մարզիչներ են գտնում անձնական մարզումների համար: Օգտագործել է Amazon Web Services փաթեթը (այսուհետ՝ AWS): Բայց որքան խորանում էի նախագծի մեջ, այնքան ավելի շատ նրբերանգներ էի սովորում ստարտափ կազմակերպելու տարբեր գործընթացների մասին:

Ես հանդիպեցի հետևյալ խնդիրների.

• AWS-ը մեծ գումար էր խլում: 3 տարի աշխատելով Enterprise ընկերություններում՝ ես ընտելացել էի այնպիսի ուրախությունների, ինչպիսիք են Docker-ը, Kubernetes-ը, CI/CD-ն, կապույտ կանաչ տեղակայումը, և որպես սկսնակ ծրագրավորող՝ ցանկանում էի նույնն իրականացնել: Արդյունքում ես եկա այն եզրակացության, որ AWS-ը ամսական ծախսում է 300-400 դոլար: Kubernetes-ը պարզվեց ամենաթանկը՝ մոտ 100 դոլար, մեկ կլաստերի և մեկ հանգույցի նվազագույն աշխատավարձով։
  Հ.Գ. Սկզբում դա անելու կարիք չկա:
• Հաջորդը, մտածելով իրավական կողմի մասին, ես իմացա 152-FZ օրենքի մասին, որն ասում էր հետևյալը. «Ռուսաստանի Դաշնության քաղաքացիների անձնական տվյալները պետք է պահպանվեն Ռուսաստանի Դաշնության տարածքում», այլապես տուգանքներ, որոնք ես չէի ուզում։ Ես որոշեցի զբաղվել այս հարցերով, քանի դեռ դա ինձ վերևից չի եկել :):

Ոգեշնչված հոդվածներ Amazon Web Services-ից Yandex.Cloud ենթակառուցվածքի տեղափոխման մասին, ես որոշեցի ավելի մանրամասն ուսումնասիրել Yandex ստեկը:

Ինձ համար Yandex.Cloud-ի հիմնական հատկանիշները հետևյալն էին.

• 2-3 անգամ ավելի էժան (ըստ վերը նշված հոդվածի և հանրային գնացուցակների)
• Օգտագործողների անձնական տվյալների պահպանում Ռուսաստանի Դաշնության տարածքում, որին մեծ Amazon-ը դեռ չի կարող հասնել։

Ես ուսումնասիրեցի այս ծառայության մյուս մրցակիցներին, բայց այդ ժամանակ հաղթում էր Յանդեքսը։

Ես ձեզ պատմել եմ իմ մասին, որպեսզի կարողանանք գործի անցնել:

Քայլ 0. Պատրաստեք կայքը

Նախ, մեզ անհրաժեշտ է կայք, որը ցանկանում ենք տեղադրել ինտերնետում: Քանի որ ես Angular ծրագրավորող եմ, ես կպատրաստեմ SPA հավելվածի պարզ ձևանմուշ, որը հետո կտեղադրեմ համացանցում:

Հ.Գ Ով հասկանում է Angular կամ գիտի դրա փաստաթղթերի մասին https://angular.io/guide/setup-local, գնալ Քայլ 1.

Եկեք տեղադրենք Angular-CLI՝ Angular-ում SPA կայքեր ստեղծելու համար.

npm install -g @angular/cli

Եկեք ստեղծենք Angular հավելված՝ օգտագործելով հետևյալ հրամանը.

ng new angular-habr-object-storage

Հաջորդը, գնացեք հավելվածի թղթապանակ և գործարկեք այն՝ դրա ֆունկցիոնալությունը ստուգելու համար.

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

Հավելվածը ստեղծվել է, բայց դեռ պատրաստ չէ հոսթինգի համար։ Եկեք հավելվածը հավաքենք փոքր շինարարության մեջ (Production)՝ հեռացնելու բոլոր ավելորդ բաները և թողնել միայն անհրաժեշտ ֆայլերը:
Angular-ում կարող եք դա անել հետևյալ հրամանով.

ng build --prod

Այս հրամանի արդյունքում հավելվածի արմատում հայտնվեց թղթապանակ dist մեր կայքի հետ։

Աշխատանքներ. Հիմա անցնենք հոսթինգին։

Քայլ 1.

Եկեք գնանք կայք https://console.cloud.yandex.ru/ և սեղմեք «Միացեք» կոճակը:

Նշում:

• Yandex ծառայությունից օգտվելու համար ձեզ կարող է անհրաժեշտ լինել Yandex փոստ (բայց դա հաստատ չէ)
• Որոշ գործառույթների համար դուք ստիպված կլինեք գումար մուտքագրել ձեր անձնական հաշվին (նվազագույնը 500 ռուբլի):

Հաջող գրանցումից և թույլտվությունից հետո մենք գտնվում ենք ձեր անձնական հաշվում:

Մենյուի ձախ կողմում դուք պետք է գտնեք «Օբյեկտների պահեստավորում» ծառայությունը, որը մենք կօգտագործենք կայքի հոսթինգի համար:

Հակիրճ առումով.

• Object Storage-ը ֆայլերի պահեստավորում է, որը համատեղելի է Amazon-ի նմանատիպ AWS S3 տեխնոլոգիայի հետ, որն ունի նաև իր API-ն՝ կոդից պահեստավորումը կառավարելու համար և, ինչպես AWS S3-ը, կարող է օգտագործվել ստատիկ կայք հյուրընկալելու համար:
• Object Storage-ում մենք ստեղծում ենք «buckets» (buckets), որոնք առանձին պահեստային տարածքներ են մեր ֆայլերի համար։

Եկեք ստեղծենք դրանցից մեկը: Դա անելու համար սպասարկման վահանակում սեղմեք «Ստեղծել դույլ» կոճակը:

Դույլ ստեղծելու ձևն ունի հետևյալ դաշտերը, եկեք անցնենք դրանց միջով.

• Դույլի անվանումը. Պարզության համար եկեք նախագիծն անվանենք նույնը, ինչ Angular - angular-habr-object-storage
• Մաքս. չափը։ Մենք խաղադրույք ենք կատարում այնքան, որքան մեր կայքը կշռում է, քանի որ կայքը անվճար չի պահվում, և յուրաքանչյուր հատկացված գիգաբայթի համար մենք Yandex-ին կվճարենք բավականին կոպեկ:
• Մատչելիություն կարդալու առարկաներ: Մենք այն դնում ենք «Հանրային», քանի որ օգտվողը պետք է ստանա մեր ստատիկ կայքի յուրաքանչյուր ֆայլ, որպեսզի դրա վրա ճիշտ ձևակերպվի դասավորությունը, սկրիպտները մշակվեն և այլն:
• Օբյեկտների ցանկի հասանելիություն և ընթերցման կարգավորումների հասանելիություն: Թողնել որպես «սահմանափակ»: Սա անհրաժեշտ է դույլը որպես հավելվածների ներքին ֆայլերի պահեստ օգտագործելու համար:
• Պահպանման դաս. Թողնել որպես «Ստանդարտ»: Սա նշանակում է, որ մեր կայքը հաճախակի կայցելեն, և հետևաբար կայքը կազմող ֆայլերը հաճախակի կներբեռնվեն: Բացի այդ, ապրանքը ազդում է կատարողականի և վճարման վրա (տեղադրեք հղումը):

Սեղմեք «Ստեղծել դույլ» և դույլը ստեղծվում է:

Այժմ մենք պետք է վերբեռնենք մեր կայքը դույլում: Ամենահեշտ ձևը մոտակայքում թղթապանակ բացելն է dist մեր կայքը և քաշեք այն անմիջապես էջ՝ օգտագործելով բռնակներ: Սա ավելի հարմար է, քան «Բեռնել օբյեկտները» կոճակի վրա սեղմելը, քանի որ այս դեպքում թղթապանակները չեն փոխանցվում, և դուք ստիպված կլինեք դրանք ձեռքով ստեղծել ճիշտ հաջորդականությամբ:

Այսպիսով, կայքը բեռնված է պահեստում, այնպես որ մենք կարող ենք օգտվողներին հնարավորություն տալ մուտք գործել պահեստ որպես կայք:
Դա անելու համար մենյուի ձախ կողմում կտտացրեք «Վեբկայք» ներդիրին:

Դույլը որպես կայք տեղադրելու էջում ընտրեք «Հոսթինգ» ներդիրը: Այստեղ մենք նշում ենք կայքի գլխավոր էջը, սովորաբար index.html: Եթե ​​դուք ունեք SPA հավելված, ապա, հավանաբար, բոլոր սխալները նույնպես մշակվում են գլխավոր էջում, այնպես որ մենք սխալի էջում կնշենք նաև index.html:

Մենք անմիջապես տեսնում ենք, թե որ հղման միջոցով հասանելի կլինի մեր կայքը։ Սեղմեք պահպանել:

Մոտ 5 րոպե անց, սեղմելով հղման վրա, տեսնում ենք, որ մեր կայքը այժմ հասանելի է բոլորին։

Շնորհակալություն բոլորին, ովքեր կարդացել են մինչև վերջ: Սա իմ առաջին հոդվածն է, ես նախատեսում եմ հետագայում նկարագրել Yandex-ի այլ ծառայություններ և դրանց ինտեգրումը frontend և backend տեխնոլոգիաների հետ:

Մեկնաբանություններում գրեք, թե որքանով եք հետաքրքրված Yandex-ի այլ ծառայությունների կամ ժամանակակից զարգացման մեջ Angular-ի օգտագործման մասին:

Source: www.habr.com