gurkanucar/reactjs-deployment

ReactJs Vite projesini VPS Ubuntu & NGINX kullaranak deploy edilmesi

Deploy a React App To a VPS | Ubuntu 20.04 Server With NGINX

• REACTJS
• NEXTJS
• Spring Boot

Deploy etmek için hazırlanan dokümantasyondur ve bu süreçte nasıl bir yol izleneceğini hakkında bilgi edinerek yapılmıştır...

1.ADIM

VPS satın alınmalıdır çünkü biz deployment kısmını vps üzerinden yapacağız..

Vps satın almak için de bu siteyi tercih edebilirsiniz...

• Vps Satın al

Bu liste içindeki VPS tercihi nasıl yapılır?

Eğer 1'den fazla uygulamamızı deploy 
etmek istiyorsak 2.seçenekteki VPS almalıyız 
ama sadece 1.tane ise 1.seçenekteki yeterli olacaktir...

Seçeneklerden birisini seçtiğiniz zaman karşınıza resimdeki gibi bir ekran çıkacaktır ve bu ekranda bulunan form alanlarını aşağıdakı resimdeki gibi doldurmanız gerekecektir..

Note: HOSTNAME olarak istediğinizi verebilirsiniz..

Satın alım işleminden sonra size aşağıdaki gibi bir e-mail gelecektir..

2.ADIM

Sunucuya giriş yapmak için size mail içindeki kullanıcı adı ve şifre ile terminalinizi açarak giriş yapabilirsiniz

Örnek: Eğer giriş başarılı ise terminalinizde şu şekilde bir görüntü çıkacaktır

3.ADIM: VPS servera NGINX kurma

NGINX - web sunucuda ( YAYICI ) olarak görev yapmaktadır, örneğin bir sunucuda 3 tane uygulamayı deploy ettiğimiz düşünün HTTP metoduyla request geldiğinde onun hangi uygulamaya gideceğini NGINX belirler

ÖNEMLİ

• Web sunucuda default olarak apache2 kurulu geliyor olabilir , biz NGINX kurmak istediğimizde ikisi arasında CONFLICT olabilir, eğer Sunucuya NGINX kurmak istiyorsanız APACHE2'yi silmeniz gerekiyor

NOTE: sunucuda apache2 kurulu olup olmadığını öğrenmek için şu komutu terminalinizde yazmanız gerekmektedir

systemctl status apache2

• Eğer sunucuda APACHE2 var ise ve siz NGINX kullanmak istiyorsanız aşağıdaki komutları yazarak web sunucunuzdan apache2'yi kaldırabilirsiniz..

APACHE2 silme adımları

• systemctl stop apache2
• systemctl disable apache2
• apt remove apache2

Bu adımları izledikten sonra apache2 web sunucunuzdan kaldırılmış oldu..

DIKKAT EDİLMELİDİR ( bu komut bütün repoları silecektir )

NGINX kurmadan önce tüm repository temizlemek gerekiyor bunu yapabilmek için aşağıdaki komutu yazmanız gerekmektedir

• apt clean all

NOTE: bu komutu çalıştırdığınızda aşağıdaki hata ile karşılaşabilirsiniz, bu hatayı önlemek için root user olmanız gerekmektedir

Root user olma komutu :

macOs için:

sudo su

Windows için:

windows kullanmadığım için bilmiyorum

Paketlerin son sürümünü yüklemek için aşağıdaki komutu kullanabilirsiniz

• apt update

İndirilen Paketlerin en son güncel versiyonunu almak için aşağıdaki komutu kullanabilirsiniz

• apt dist-upgrade

Buradan itibaren NGINX kurmaya başlıyoruz

Web servera NGINX kurma komutu:

• apt install nginx

Web servera NGINX kurulup kurulmadığını anlamak için terminale aşağıdaki komutu yazabilirsiniz:

• nginx -v

Bu adımları izlediyseniz web sunucunuza nginx başarıyla kurulmuş demektir ve versiyonunu da görmüş olacaksınız...

Sunucuya Web Browser üzerinden size verilen IP address ile gittiğinizde NGINX kurduğunuz halde APACHE2 web site html görünütüsü geliyor ise onu düzeltmeniz gerekebilir

NOT:

apache2 web sunucunuza default olarak kurulu geldiyse ve NGINX kurmak için apache2'yi kaldırdıysanız, size verilen IP ile web sunucunuza gittiğinizde apache2 HTML görüntüsü ile karşılaşmış olabilirsiniz. NGINX HTML sayfasına gitmek için izlemeniz gereken adımlar aşağıdaki resimde verilmiştir

Web üzerinden hostunuza şu şekilde gidebilirsiniz

• IP_ADDRESS/index.nginx-debian.html

Böylece kurmuş olduğunuz NGINX html'i görüntülemiş olursunuz

4.ADIM: REACTJS , NEXTJS projeleri için gereksinimlerin kurulması:

• NodeJS
• Npm
• Git

NOT:

Kurulumu yapmadan önce nginx html sayfasını 
görmüş olmanız ve onun olduğu dizine geçmeniz gerekmektedir

VPS'e Kurulacak Uygulamalar ve Konfigürasyonlar

• sudo apt update
• sudo apt upgrade

NVM kullanarak NodeJS,Npm kurulması:

NVM, Node.js geliştirme sürecinde ortaya çıkabilecek sürüm uyumsuzluklarından kaynaklanan sorunları da ortadan kaldırır. Farklı projeler arasında geçiş yaparken veya projelerinizi başka geliştiricilerle paylaşırken, Node.js sürümünün tutarlılığını sağlamak için NVM’i kullanabilirsiniz

NVM'in Kurulması

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

• Nvm kurulduktan sonra aşağıdaki kodu da çalıştırmalısınız

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

• Ardından terminal kapatılıp tekrardan açılır.

nvm ls
nvm install 18 ( NodeJS istediğiniz versiyonunu yazabilirsiniz )

• Git kurmak için

  apt install git

• Bu adımı yazdıktan sonra NodeJS sunucunuza kurulmuş olacaktır , burada NPM otomatik olarak gelmektedir

NVM kullanmadan NodeJS, Npm kurulması:

• Nodejs kurmak için

  apt install nodejs

• Npm kurmak için

  apt install npm

• Git kurmak için

  apt install git

SSH Key'i Üretme ve SSH ile Github Clone

• Öncelikle VPS üzerinde SSH Key'leri üretilir.

root@vadimkiniabaev:~# ssh-keygen -t ed25519 -a 200 -C "thekinv21@gmail.com"

Generating public/private ed25519 key pair.
Enter file in which to save the key (/root/.ssh/id_ed25519): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_ed25519
Your public key has been saved in /root/.ssh/id_ed25519.pub
The key fingerprint is:
SHA256:1lTeneByA8DheueQEKe1pKAuIq1iMvigp0M02XJ5tMA thekinv21@gmail.com
The key's randomart image is:
+--[ED25519 256]--+
|  .  . ..*o...   |
|   E... O..oo....|
|  o.+ .+ o...+...|
| *.+ o  oo. o .  |
|+.=..  .S+..     |
|+o.    .. +      |
|O.         .     |
|*+.              |
|o+.              |
+----[SHA256]-----+

• Daha sonra Public Key kopyalanır.

cd
cd .ssh
more id_ed25519.pub

• Github'a browser'dan girilir, Settings > Authorized Keys olarak kopyalanmış olan Public Key kaydedilir.

• Repository'nin clone'lanacağı klasörü oluşturup git clone komutunu çalıştırırız.

cd /home/alwyzon
mkdir react-deployment
chmod 777 react-deployment/
cd react-deployment/

git clone git@github.com:thekinv21/deployment.git

DNS adres almak için

• Dns server al

Buradan kendiniz istediğiniz dns alabilirsiniz ve ayarlarını yapabilirsiniz

DNS adresi aldıktan sonra aşağıdaki ayarları yapmanız gerekmektedir..

NGINX Konfigürasyonu

sudo nano /etc/nginx/sites-available/default

Nginx Konfigürasyonu ayarları aşağıdaki resimde gösterilmiştir

Certbot ve SSL Ayarlarının Yapılması

1.adım:

    sudo apt install certbot python3-certbot-nginx

2.adım:

    sudo certbot --nginx -d vadimkiniabaev.site

3.adım: Certbot Test edilmesi

     certbot renew --dry-run

NGINX Restart

    sudo systemctl restart nginx

ÖNEMLİ ADIMLAR BUNU TAKİP ETMELİYİZ

1. /home/alwyzon altına bir tane klasör oluştur:

   • mkdir react-deployment ( Bizim klasör adı )

2. Oluşturduğumuz klasörü public hale getirmeliyiz

   chmod 777 react-deployment/
   

Not: eğer dosya public olduysa yeşil renkte olacaktir..

3. Oluştuduğumuz klasörün altına Git repositorimizi klon etmeliyiz

   git clone repository_url_ssh
   

4. Klonlandığımız repositorinin klasörünü public hale getirmeliyiz

   chmod 777 deployment/
   

5. Repository klasörünün içine girip onu pull etmeliyiz

   git pull
   

6. Npm install ile bütün paketleri indirmeliyiz

   npm install --legacy-peer-deps
   

7. Projeyi build etmeliyiz

   npm run build
   

8. Projenin ismi ile aynı isimde olan klasör oluşturup onu /var/www/ klasörü altına eklemeliyiz

   sudo mkdir /var/www/deployment ( deployment bizim proje repository klasör adı )
   

9. Projenin build ettikten sonra dist dosyası vardır o dosyayı oluşturduğumuz dosyanın altına koymalıyız

   sudo cp -r dist/* /var/www/deployment/
   

10. Bu işlemleri yaptıktan sonra projeniz başarıyla deploy edilmiş olacaktir