რეაქტის პროექტის სერვერზე გამართვა

შესავალი

და დგება ის მომენტი, როდესაც შენ მზად ხარ რომ შენი აპლიკაცია მსოფლიოს აჩვენო, რისთვისაც შენ პროექტი უნდა გამართო სერვერზე და https://my-app.ge -ის დომეინი მიაბა,

ჩვენ ვიცით ლოკალურად როგორ უნდა გავუშვათ დეველოპმენტ სერვერი: npm start და ეგ არი.

მაგრამ პროდაქშენის სერვერზე ამას ვერ ვიზამთ.

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

Nginx-ი უზრუნველყოფს იმას, რომ ჩვენმა საიტმა ოპტიმალურად გამოიენოს სერვერის რესურსები, გვაძლევს საშვალებას რომ რამოდენიმე პროექტი გავუშვათ ერთ სერვერზე , გვქონდეს ქეშირება და ა.შ.

სერვერზე ხელსაწყოების და პროგრამების დაყენება

პირველ რიგში, ჩვენ უნდა დავლოგინდეთ სერვერზე რისთვისაც უნდა გავუშვათ ბრძანება

ssh username@ipAdress

ამის შემდეგ ჩვენ უნდა გავუშვათ ბრძანება sudo apt update

ეს ბრძანება ფექიჯების შესახებ ინფორმაციას განაახლებს სერვერზე, იმისთვის რომ როცა ჩვენ დავწერთ sudo apt install something -ს, სერვერმა იცოდეს რა არის ეს something

ამის შემდეგ ჩვენ უნდა დავაყენოთ node ამის გაკეთება შეგვიძლია შემდეგი ბრძანებით:

curl https://deb.nodesource.com/setup_16.x | sudo bash

sudo apt install nodejs

სერვერზე React-ის პროექტის გამრთვა

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

შემდეგ შევიდეთ apps საქაღალდეში და დავკლონოთ github-იდან რეპოზიტორია:

cd ~

mkdir apps

cd apps

git clone https://github.com/my-app.git

თუ ვნახავთ apps საქაღალდის შიგთავს: ls ბრძანებით ჩვენ დავინახავთ რომ ჩვენი პროექტი ჩამოიტვირთა, მოდი ეხლა შევიდეთ პროექტის საქაღალდეში და დავიწყოთ მისი გამართვა.

cd my-app

npm install

დეველოპმენტ გარემოში ეხლა უბრალოდ გავუშვებდით npm start-ს და ყველაფერი კარგად იქნებოდა, მაგრამ რექტს აქვს ასეთი ბრძაება

npm run build

რომელიც ჩვენ აპლიკაციის პროდაქშენის build-ს დააგენერირებს და ოპტმიზაციებს უკეთებს.

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

Nginx-ის კონფიგურაცია

ეხლა უკვე დროა რომ ჩვენი უკვე სერვერზე მყოფი პროექტი მსოფლიოსთვის მიღწევადი გავხადოთ, რისთვისაც უნდა გავმართოთ nginx-ი, მოდი მისი დაინსტალირებით დავიწყოთ:

sudo apt install nginx

სერვერზე შევიდეთ შემდეგ ფოლდერში:

cd /etc/nginx/sites-enabled

თუ ჩვენ ამ საქაღალდეში გავუშვებთ ls-ს ბრძანებას უნდა დავინახოთ default-ი ფაილი, რომელიც შეგვიძლია თამამად ამოშალოთ: sudo rm default და ჩვენი ახალი კონფიგურაციის ფაილი შევქმნათ:

sudo touch my-app.ge

ეს ფაილი უნდა გავხსნათ sudo nano my-app.ge -ი ბრძანებით და შიგნით ჩავწეროთ შემდეგი კონფიგურაცია:

server {
        listen 80;
        # absolute path to your project's build folder
        root /home/giga/apps/my-app/build;
        # if u are using vite project change build to dist

        index index.html;
        
        # your DNS name
        server_name my-app.com;

        location / {
                try_files $uri /index.html;
        }
}

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

sudo systemctl restart nginx

და ჩვენ თუ ვეწვევით http://my-app.ge -ს ჩვენ და ნებისნიერი ადამიანი დაინახავს ჩვენ პროექტს, მაგრამ ერთი რაღაც ჭირს ჩვენ საიტის, ის http-ზეა გამართული და შენმა ბრაუზერმა შეიძლება გაგაფრთხილა, რომ ეს საიტი არ არის უსაფრთხო, საბედნიეროდ https-ზე გამართვა ძალიან მარტივია.

SSL-ის დაყენება LetsEcrypt-ით

იმისთვის რომ LetsEncrypt-ის სერთიფიკატი დავაყენოთ ჩვენ საიტზე და ის უსაფრთხო გავხადოთ, რამოდენიმე ფექეჯი უნდა დავაინსტალიროთ:

sudo apt install certbot python3-certbot-nginx

შემდეგ გავუშვათ ბრძანება:

sudo certbot

და მივყვეთ certbot-ის ინსტრუქციებს

რის შემდეგაც ჩვენი საიტი გამოიყენებს https -ს და ის იქნება უსაფრთხო და უკვე ხალხის შეშინების გარეშე შეძლებ შენი პროექტის გაზიარებას.

დასკვნა

რექტის პროექტის პროდაქშენის სერვერზე გასამართად ჩასატარებელია რიგი პროცედურები:

• სერვერზე საჭირო ფექეჯების დაყენება

• პროექტის ჩამოტვირთვა და build პროცესის გაშვება

• Nginx-ის კონფიგურაცია

• LetsEncrypt-ით SSL-ის დაყენება

აბა შენ იცი 👋