دیپلوی React روی هاست و سرور: راهنمای کامل

React یک پروژه فرانت‌اند کامپایل‌شونده است که خروجی نهایی آن فقط HTML + CSS + JS می‌شود. در این راهنما یاد می‌گیرید چگونه پروژه React خود را روی هاست معمولی یا سرور VPS دیپلوی کنید.

✅ ۱. دیپلوی روی هاست معمولی (cPanel)

React یک پروژه فرانت‌اند کامپایل‌شونده است و خروجی آن فقط HTML + CSS + JS می‌شود. پس روی هاست معمولی هم قابل اجراست.

مرحله 1: ساخت خروجی نهایی (Build)

در سیستم خودت داخل پروژه، دستور زیر را اجرا کن:

npm run build

یک پوشه به نام build ساخته می‌شود که شامل فایل‌های نهایی است.

مرحله 2: ورود به کنترل‌پنل هاست

وارد cPanel شوید و به بخش File Manager بروید، سپس مسیر public_html را باز کنید.

مرحله 3: آپلود فایل‌ها

محتویات داخل پوشه build را داخل public_html آپلود کنید.

مرحله 4: تنظیم React Router

اگر از React Router استفاده می‌کنی، یک فایل .htaccess بساز:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

🖥 ۲. دیپلوی React روی VPS (Ubuntu / Debian)

این روش حرفه‌ای‌تر است و کنترل بیشتری به شما می‌دهد.

مرحله ۱: ورود به سرور با SSH

ssh root@SERVER-IP

مرحله ۲: نصب Node.js

apt update
apt install nodejs npm

مرحله ۳: انتقال پروژه به سرور

با Git:

git clone https://github.com/your/repo.git
cd repo

مرحله ۴: نصب پکیج‌ها و Build

npm install
npm run build

مرحله ۵: نصب و تنظیم Nginx

apt install nginx
nano /etc/nginx/sites-available/default

کانفیگ Nginx:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/your-app/build;
    index index.html;
    location / {
        try_files $uri /index.html;
    }
}

nginx -t
systemctl restart nginx

مرحله ۶: تنظیم HTTPS (SSL رایگان)

apt install certbot python3-certbot-nginx
certbot --nginx -d yourdomain.com

🎯 مقایسه روش‌ها

نکات مهم و رفع مشکلات رایج

مشکل 1: صفحه سفید بعد از دیپلوی

اگر بعد از دیپلوی صفحه سفید می‌بینید، مسیر base در package.json را بررسی کنید:

{
  "homepage": "https://yourdomain.com"
}

مشکل 2: خطای 404 در مسیرهای React Router

حتماً فایل .htaccess را در هاست معمولی یا تنظیمات try_files را در Nginx اضافه کنید.

مشکل 3: فایل‌های استاتیک لود نمی‌شوند

مطمئن شوید که مسیر فایل‌های استاتیک در public قرار دارند و با %PUBLIC_URL% فراخوانی می‌شوند.

نتیجه‌گیری

دیپلوی React روی هاست یا سرور کار پیچیده‌ای نیست. با دنبال کردن مراحل این راهنما، می‌توانید پروژه خود را به راحتی منتشر کنید. برای پروژه‌های کوچک از هاست معمولی و برای پروژه‌های بزرگ از VPS استفاده کنید.

اگر سوالی دارید یا با مشکلی مواجه شدید، در بخش نظرات بپرسید تا کمکتان کنم.