როგორ მოვაწყოთ სტატიკური ვებსაიტი Yandex.Cloud Object Storage-ის გამოყენებით

ჰეი ჰაბრ!

ამ სტატიაში მე გეტყვით, თუ როგორ მარტივად და მარტივად მოაწყოთ სტატიკური ვებსაიტი Yandex ტექნოლოგიების გამოყენებით, კერძოდ ობიექტის შენახვა.

საბოლოო ჯამში, თქვენ გექნებათ ვებ – გვერდი, რომელიც ხელმისაწვდომი იქნება გარე ბმულის საშუალებით.

ეს სტატია სასარგებლო იქნება თუ თქვენ

• დამწყები დეველოპერი, რომელიც ახლახან სწავლობს პროგრამირებას;
• დეველოპერი, რომელმაც შექმნა პორტფოლიო და სურს განათავსოს იგი საჯარო დომენში, რათა აჩვენოს იგი მეგობრებსა და დამსაქმებლებს.

ჩემ შესახებ

ცოტა ხნის წინ, მე ვავითარებდი SaaS სერვისს, ერთგვარ ბაზარს, სადაც ხალხი პოულობს სპორტულ ტრენერებს პირადი ვარჯიშისთვის. გამოიყენა ამაზონის ვებ სერვისების დასტა (შემდგომში AWS). მაგრამ რაც უფრო ღრმად ჩავუღრმავდი პროექტს, მით უფრო მეტ ნიუანსს ვიგებდი სტარტაპის ორგანიზების სხვადასხვა პროცესების შესახებ.

შემექმნა შემდეგი პრობლემები:

• AWS დიდ ფულს მოიხმარდა. 3 წელი ვიმუშავე Enterprise კომპანიებში, შევეჩვიე ისეთ სიხარულებს, როგორიცაა Docker, Kubernetes, CI/CD, ლურჯი მწვანე განლაგება და, როგორც დამწყებ სტარტაპ პროგრამისტს, მინდოდა იგივე განმეხორციელებინა. შედეგად მივედი დასკვნამდე, რომ AWS ყოველთვიურად მოიხმარდა 300-400 დოლარს. Kubernetes აღმოჩნდა ყველაზე ძვირი, დაახლოებით 100 დოლარი, მინიმალური ხელფასით ერთი კლასტერი და ერთი კვანძი.
  PS არ არის საჭირო ამის გაკეთება თავიდანვე.
• შემდეგ, იურიდიულ მხარეზე ფიქრით, შევიტყვე 152-FZ კანონის შესახებ, რომელიც ასე ამბობდა: "რუსეთის ფედერაციის მოქალაქეების პერსონალური მონაცემები უნდა ინახებოდეს რუსეთის ფედერაციის ტერიტორიაზე"თორემ ჯარიმები, რაც არ მინდოდა. გადავწყვიტე ამ საკითხების მოგვარება მანამ, სანამ ზემოდან მომივიდა :).

შთაგონებული სტატიები ამაზონის ვებ სერვისებიდან Yandex.Cloud-ში ინფრასტრუქტურის მიგრაციის შესახებ გადავწყვიტე უფრო დეტალურად შემესწავლა Yandex-ის სტეკი.

ჩემთვის Yandex.Cloud-ის ძირითადი მახასიათებლები შემდეგი იყო:

• 2-3-ჯერ იაფი (ზემოთ სტატიის და საჯარო ფასების სიების მიხედვით)
• მომხმარებლის პერსონალური მონაცემების შენახვა რუსეთის ფედერაციის ტერიტორიაზე, რასაც დიდი ამაზონი ჯერ ვერ მიაღწევს.

მე შევისწავლე ამ სერვისის სხვა კონკურენტები, მაგრამ იმ დროს Yandex იმარჯვებდა.

მე გითხარი ჩემს შესახებ, ასე რომ, საქმეს მივუდგეთ.

ნაბიჯი 0. მოამზადეთ საიტი

პირველ რიგში, ჩვენ გვჭირდება ვებგვერდი, რომელიც გვინდა განვათავსოთ ინტერნეტში. ვინაიდან მე ვარ Angular დეველოპერი, გავაკეთებ მარტივ SPA აპლიკაციის შაბლონს, რომელსაც შემდეგ დავდებ ინტერნეტში.

PS ვის ესმის 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), რომლებიც ჩვენი ფაილების ცალკე შესანახი ადგილებია.

მოდით შევქმნათ ერთი მათგანი. ამისათვის სერვისის კონსოლში დააწკაპუნეთ ღილაკზე „შექმნა bucket“.

თაიგულის შექმნის ფორმას აქვს შემდეგი ველები, გადავხედოთ მათ:

• Bucket სახელი. სიმარტივისთვის, მოდით პროექტს დავარქვათ იგივე, რაც Angular - angular-habr-object-storage
• მაქს. ზომა. ჩვენ ფსონს ვდებთ იმდენს, რამდენსაც ჩვენი საიტი იწონის, რადგან საიტი არ ინახება უფასოდ და თითოეული გამოყოფილი გიგაბაიტისთვის Yandex-ს გადავუხდით საკმაოდ პენსს.
• წვდომა წაკითხულ ობიექტებზე. ჩვენ დავაყენეთ ის „საჯარო“, რადგან მომხმარებელმა უნდა მიიღოს ჩვენი სტატიკური საიტის თითოეული ფაილი, რათა მასზე სწორად დახატოს განლაგება, დამუშავდეს სკრიპტები და ა.შ.
• წვდომა ობიექტების სიაზე და წვდომა წაკითხვის პარამეტრებზე. დატოვეთ როგორც "შეზღუდული". ეს აუცილებელია იმისათვის, რომ გამოიყენოთ bucket, როგორც შიდა ფაილების საცავი აპლიკაციებისთვის.
• შენახვის კლასი. დატოვე როგორც "სტანდარტი". ეს ნიშნავს, რომ ჩვენს საიტს ხშირად ეწვევა და, შესაბამისად, საიტს შემადგენელი ფაილები ხშირად ჩამოიტვირთება. გარდა ამისა, ელემენტი გავლენას ახდენს შესრულებასა და გადახდაზე (ჩადეთ ბმული).

დააწკაპუნეთ "შექმნა bucket" და bucket იქმნება.

ახლა ჩვენ უნდა ავტვირთოთ ჩვენი საიტი bucket-ში. უმარტივესი გზაა ახლომდებარე საქაღალდის გახსნა dist ჩვენს საიტზე და გადაიტანეთ იგი პირდაპირ გვერდზე სახელურების გამოყენებით. ეს უფრო მოსახერხებელია, ვიდრე ღილაკზე „ობიექტების ჩატვირთვა“ დაწკაპუნებით, რადგან ამ შემთხვევაში საქაღალდეები არ გადადის და თქვენ მოგიწევთ მათი ხელით შექმნა სწორი თანმიმდევრობით.

ასე რომ, საიტი იტვირთება საცავში, ასე რომ ჩვენ შეგვიძლია მივცეთ მომხმარებლებს შესაძლებლობა შევიდნენ საცავში, როგორც ვებსაიტი.
ამისათვის მენიუს მარცხენა მხარეს დააწკაპუნეთ ჩანართზე "ვებგვერდი".

თაიგულის საიტად დაყენების გვერდზე აირჩიეთ ჩანართი „ჰოსტინგი“. აქ ჩვენ მივუთითებთ საიტის მთავარ გვერდს, ჩვეულებრივ index.html. თუ თქვენ გაქვთ SPA აპლიკაცია, მაშინ, ალბათ, ყველა შეცდომა ასევე დამუშავებულია მთავარ გვერდზე, ამიტომ ჩვენ ასევე მივუთითებთ index.html შეცდომის გვერდზე.

ჩვენ მაშინვე ვხედავთ, რომელი ბმულით იქნება ხელმისაწვდომი ჩვენი საიტი. დააჭირეთ შენახვას.

დაახლოებით 5 წუთის შემდეგ, ბმულზე დაწკაპუნებით, ვხედავთ, რომ ჩვენი საიტი უკვე ყველასთვის ხელმისაწვდომია.

მადლობა ყველას ვინც ბოლომდე წაიკითხა! ეს არის ჩემი პირველი სტატია; მე ვაპირებ შემდგომში აღვწერო Yandex-ის სხვა სერვისები და მათი ინტეგრაცია წინა და ბექენდის ტექნოლოგიებთან.

დაწერეთ კომენტარებში რამდენად გაინტერესებთ გაეცნოთ Yandex-ის სხვა სერვისებს ან Angular-ის გამოყენებას თანამედროვე განვითარებაში.

წყარო: www.habr.com