كيفية نشر تطبيق React باستخدام Nginx
بعد بناء تطبيق React تحصل على ملفات ثابتة يمكن لأي سيرفر ويب استضافتها. يوضح هذا الشرح كيفية تقديمها باستخدام Nginx.
1. بناء حزمة الإنتاج
npm run buildينشئ هذا الأمر مجلد dist/ (في Vite) أو build/ (في CRA) يحتوي على الملفات الثابتة.
2. نسخ الملفات إلى المجلد الجذر للويب
sudo mkdir -p /var/www/myapp
sudo cp -r dist/* /var/www/myapp/3. إعداد Nginx (مع التوجيه الاحتياطي لتطبيقات SPA)
server {
listen 80;
server_name myapp.example.com;
root /var/www/myapp;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}يضمن السطر try_files ... /index.html عمل التوجيه من جهة العميل بشكل صحيح عند تحديث الصفحة.
4. التفعيل وإعادة التحميل
sudo nginx -t && sudo systemctl reload nginxأضف HTTPS باستخدام sudo certbot --nginx وسيصبح تطبيق React الخاص بك متاحًا على الإنترنت.
