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

შესავალი

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

Vue.js პროექტის შემთხვევაში, nginx-ის დახმარებით, ეს საქმე არც ისე რთულია. პროექტს გავმართავთ ubuntu-ს ოპერაციულ სისტემაზე.

სერვერის მომზადება

პირველ რიგში დავლოგინდეთ სერვერზე

ssh username@ipAdresss

შემდეგ განვაახლოთ apt package-ების მისამართები

 sudo apt update

დავაინსტალიროთ ნოუდი

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

პროექტის მომზადება

home დირექტორიაში შევქმნათ apps დირექტორია და ჩამოვიტანოთ ჩვენი პროექტი რემოუთ რეპოზიტორიიდან

cd ~
mkdir apps
cd apps
git clone https://github.com/my-app.git

შევიდეთ პროექტის დირექტორიაში, დავაინსტალიროთ აპლიკაციისთვის საჭირო ფექიჯები და დავბილდოთ

cd {project_folder}
npm install
npm run build

თუ ყველაფერმა წარმატებით ჩაიარა, დირექტორიაში უნდა შექმნილიყო dist ფოლდერი, რომელსაც შემდეგ გამოვყენებთ nginx-ის კონფიგურაციაში

Nginx-ის დაინსტალირება და კონფიგურაცია

დაინსტალირება

sudo apt install nginx

იმისთვის რომ დავრწუნდეთ nginx-ის მუშაობაში გავუშვათ ბრძანება service nginx status

კონფიგურაცია

შევიდეთ შემდეგ მისამართზე cd /etc/nginx/sites-enabled

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

ახლა გავსნათ ფაილი ჩვენი პროექტისთვის ჩვენთვის მოსახერხებელ ედიტორში

sudo vi my-app.ge

და ჩავწეროთ შემდეგი კონფიგურაცია

server {
    listen      80;
    # change example.com with your domain name
    server_name example.com;
    charset utf-8;
    # change {{app_root}} with your application path
    root    {{app_root}}/dist;
    index   index.html index.htm;
    # Always serve index.html for any request
    location / {
        # change {{app_root}} with your application path
        root {{app_root}}/dist;
        try_files $uri /index.html;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

შევინახოთ ფაილი :wq

შევამოწმოთ კონფიგურაციის სინტაქსი sudo nginx -t

გადავარესტარტოთ სერვერი sudo systemctl restart nginx

ახლა თუ ვეწვევით ჩვენს დომეინს http://example.com-ზე შეგვეძლება რომ ჩვენი აპლიკაცია ვიხილოთ, მაგრამ საქმე დასრულებულად რომ ჩავთვალოთ ერთი პატარა რაღაც დაგვრჩა, გადავიყვანოთ ჩვენი პროექტი https პროტოკოლზე.

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

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

sudo apt install certbot python3-certbot-nginx

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

sudo certbot

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

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

დასკვნა

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

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

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

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

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