Deploy React.js Website on Netlify, Vercel & VPS – Complete Beginner Guide

React.js দিয়ে ওয়েবসাইট ডেভেলপ করার পর সবচেয়ে গুরুত্বপূর্ণ ধাপ হলো Deployment। এই গাইডে আপনি শিখবেন কীভাবে খুব সহজভাবে আপনার React.js ওয়েবসাইটকে Netlify, Vercel, এবং VPS Server এ Deploy করবেন। এই স্টেপ-বাই-স্টেপ টিউটোরিয়ালটি সম্পূর্ণ ছাত্রবন্ধু (student-friendly) ভাবে সাজানো।

📌 Step 1: React App Build করানো

ডিপ্লয় করার আগে React অ্যাপকে build করতে হবে:

npm run build

এতে /build নামে একটি production optimized folder তৈরি হবে যেটি ডিপ্লয়ের জন্য প্রস্তুত।

🚀 Deploy React.js on Netlify

Netlify হলো সবচেয়ে সহজ static hosting প্ল্যাটফর্ম। GitHub থেকে Auto Deploy সাপোর্ট করে।

✔ Method 1: Drag & Drop Deployment

1. Netlify ওয়েবসাইটে যান
2. New Site from Git বা Deploy manually সিলেক্ট করুন
3. /build ফোল্ডারটি Drag & Drop করুন
4. আপনার সাইট সাথে সাথে লাইভ হয়ে যাবে!

✔ Method 2: GitHub Auto Deployment

1. React কোড GitHub এ push করুন
2. Netlify → New Site → GitHub নির্বাচন করুন
3. আপনার repo সিলেক্ট করুন
4. Build command: npm run build
5. Publish directory: build

Netlify প্রতিবার push করলেই auto-deploy করবে।

⚡ Deploy React.js on Vercel

Vercel বিশেষভাবে React, Next.js, এবং front-end projects এর জন্য তৈরি। Speed & performance এর দিক থেকে অসাধারণ।

✔ What You Need

• GitHub / GitLab / Bitbucket Repo
• Vercel account

✔ Deployment Steps

1. Vercel Dashboard খুলুন
2. New Project ক্লিক করুন
3. GitHub repository সিলেক্ট করুন
4. Framework: React
5. Build command: npm run build
6. Output directory: build
7. Deploy

Deploy শেষ হলেই Vercel আপনার সাইটকে global CDN এ live করে দেবে।

🖥️ Deploy React.js on VPS (Ubuntu / Any Linux)

VPS Deployment একটু advanced কিন্তু control বেশি দেয়। এখানে আপনি server, security, everything customize করতে পারবেন।

✔ Step 1: Build Folder Upload

আপনার VPS-এ SSH করুন:

ssh root@your-server-ip

✔ Step 2: Nginx Install করুন

sudo apt update
sudo apt install nginx

✔ Step 3: Build ফোল্ডার সার্ভারে Upload

FileZilla / WinSCP অথবা SCP command ব্যবহার করুন:

scp -r build/ root@your-server-ip:/var/www/react-app

✔ Step 4: Nginx Configure করুন

sudo nano /etc/nginx/sites-available/react-app

Config লিখুন:

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/react-app;
    index index.html;

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

সাইট enable করুন:

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo systemctl restart nginx

এবার আপনার React অ্যাপ VPS এ live!

🎯 কোন প্ল্যাটফর্ম আপনার জন্য?

🎁 Conclusion

React.js অ্যাপ deploy করা খুবই সহজ—আপনি Beginner হোন বা Advanced। Netlify & Vercel ক্লিকেই deployment দেয়, আর VPS আপনাকে দেয় পূর্ণ নিয়ন্ত্রণ। Practice করুন, আপনার Skills আরও শক্তিশালী হবে!