Hosting (GitHub + Netlify)

პროექტი დასრულებული არ რის, სანამ მის მუშა ვერსიას არ დავჰოსტავთ, რათა ის ყველამ ნახოს ინტერნეტში. მაშ როგორ განვათავსოთ ანგულარის აპლიკაცია ინტერნეტში, როგორც რეალური ვებ აპლიკაცია?

ამისთვის დაგვჭირდება ორი რამ:

ადგილი, სადაც კოდს შევინახავთ: GitHub
და ვებ სერვისის პროვაიდერი: Netlify

ესენი არ არის ერთადერთი მეთოდი თუ ხელსაწყოების კრებული, რომლითაც აპლიკაციის დაჰოსტვა შეიძლება, თუმცა ეს ყველაზე პოპულარული და მარტივი გზაა (თანაც სრულიად უფასო!).

კოდის შენახვა GitHub-ზე

ყველა ანგულარის აპლიკაცია ავტომატურად ინიციალიზებულია როგორც გითის რეპოზიტორია. ესეიგი ჩვენ პირდაპირ შეგვიძლია კოდის დაქომითება და push. ამის გაკეთება შეიძლება ჯერ გითჰაბზე რეპოზიტორიის შექმნით და შემდეგ ამ რეპოზიტორიის ლოკალურ პროექტთან დაკავშირებით. თუ visual studio code-ში უკვე მაიქროსოფთის ექაუნთი გვაქვს დაკავშირებული ჩვენ პირდაპირ შეგვიძლია source control პანელზე გადასვლა და დაქომითების შემდეგ publish branch ღილაკზე დაჭერა, რომელიც რეპოზიტორიას თავისით შექმნის.

დაჰოსტვა Netlify-ზე

მას შემდეგ რაც Netlify-ზე ანგარიშს შექმნით (და რეკომენდირებულია რომ ეს GitHub-ის ექაუნთით გააკეთოთ) შეგიძლიათ გადაინაცვლოთ overview გვერდზე სადაც ნახავთ თქვენი (თავდაპირველად ცარიელი) საიტების სიას.

აქ დააჭერთ add new site > import existing project > GitHub და რეპოზიტორიების ჩამონათვალიდან აირჩევთ სასურველს. შემდგომ netlify ავტომატურად მიხვდება, რომ ეს ანგულარის პროექტია და გვერდის დაბილდვის ბრძანებას შეავსებს npm run build-ით. შემდეგ dist ფოლდერს გამოიყენებს გამოსაქვეყნებელ ფოლდერად, ანუ იმ ფოლდერს, სადაც საბოლოოდ დაბილდული კოდია. აქ აუცილებელია ჩვენი პროექტის სახელის ფოლდერის დაზუსტება, ისე, რომ რაღაც ასეთი მისამართი გამოვიდეს: dist/my-app. ჩვენ შეგვეძლო პირდაპირ ეს ფოლდერი აგვეტვირთა, მას შემდეგ რაც ლოკალურად გავუშვებდით დაბილდვის ბრძანებას, თუმცა ამ მეთოდის უპირატესობა არის ის, რომ რეპოზიტორიაში ყოველ ახალ ქომითზე ჩვენი დაჰოსტილი აპლიკაცია ავტომატურად დაიბილდება ხელახლა და ჩვენ არ მოგვიწევს ყოველ ჯერზე განახლებული ფაილების ატვირთვა. Deploy ღილაკზე დაჭერის შემდეგ ფაილები აიტვირთება, რამდენიმე წუთში საიტი დაიბილდება და Netlify ამ საიტს მიანიჭებს თავის URL-ს.

დაბილდვის პროცესს შეგვიძლია უშუალოდ დავაკვირდეთ, ისე როგორც ლოკალური ბილდის აუთფუთს ტერმინალში.

რაღაც დროის შემდეგ შეგვიძლია ვნახოთ ჩვენი ვებ აპლიკაცია. აქ პატარა პრობლემას წავაწყდებით. თუ გვერდს კონკრეტული მისამართიდან. მაგალითად /products-დან დავარეფრეშებთ, მივიღებთ 404 ერორს. ამ დროს Netlify ეძებს ჩვენს dist ფოლდერში products სახელის მქონე ფოლდერს, როგორც სტატიკურ ვებსაიტზე – ის კი ა რა რსებობს. ჩვენ აპლიკაციაში რაუთინგს განაგებს ანგულარი, რომელიც ერთ გვერდიანი აპლიკაციაა. მაშინ ჩვენს პროექტში (ზედა დონეზე) უნდა დავამატოთ Netlify-ს კონფიგურაცია, netlify.toml ფაილში:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

აქ ვეუბნებით Netlify-ს, რომ ყველა მისამართზე მოთხოვნამ გადაიყვანოს მოხმარებელი მთავარ გვერდზე და დანარჩენი ანგულარის აპლიკაციას მიანდოს.

თუ ამ ცვლილებას დავაქომითებთ და დავასინქრონიზირებთ, ვებსაიტი ხელახლა დაიბილდება და რაღაც დროის შემდეგ 404 პრობლემა აღარ შეიქმნება.

შეჯამება

ამ გაკვეთიშლი ჩვენ ვისწავლეთ, როგორ დავჰოსტოთ ანგულარის პროექტი Netlify-ზე, GitHub-ის რეპოზიტორიის შუამავლობით, საიდანაც Netlify არა მხოლოდ პროექტის ფაილებს იყენებს, არამედ ყოველ ცვლილებაზე რეპოზიტორიაში, ის საიტს ხელახლა ბილდავს. ჩვენ ასევე დავამატეთ გადამისამართების კონფიგურაცია, რაც რაუთინგს მთლიანად ანგულარის აპლიკაციას მიანდობს, რათა საიტი ექვემდებარებოდეს Single Page Application ლოგიკას.