طريقة رفع مشروع react في vps

بما أن مشروع الأدمن يعمل على المسار wesamelnagah.com:90 فتستطيع بعدة خطوات تغيير نطاقه , الفكرة هي كالتالي: سيبقى مشروع الأدمن على النطاق الحالي و سنقوم بتغيير إعدادات السيرفر لنجعله عندما يتلقى طلبا للنطاق wesamelnagah.com/admin  يقوم بإعادة توجيه الطلب للنطاق الحقيقي wesamelnagah.com:90. و هذه الفكرة نظريا يطلق عليها مفهوم ال proxy , و للقيام بها اتبع هذه الخطوات:

• قم بتسجيل الدخول لحساب ال vps الخاص بك.
• قم بتثبيت nginx إذا لم تكن قد ثبته من قبل.
• قم بتهيئة nginx كالتالي:
  اذهب لمجلد الاعدادات الخاص ب nginx  (غالبا في هذا المسار /etc/nginx/sites-available/)=> أنشأ ملف اعدادات جديد تستطيع تسميته بأي اسم تريده  => افتح هذا الملف بواسطة محرر نصوص => ضع هذه التعليمات في الملف و احفظه

  server {
      listen 80;
      server_name wesamelnagah.com;
  
      location /admin {
          proxy_pass http://wesamelnagah.com:90;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  
  }
  

• قم بتعريف الملف الذي أنشأته في مجلد ال sites-enabled ليتمكن السيرفر من رؤيته و تنفيذه
  في لينوكس يمكنك استخدام هذه التعليمة :

  sudo ln -s /etc/nginx/sites-available/اسم الملف الذي أنشأته /etc/nginx/sites-enabled/
  

• أعد تشغيل nginx لكي يقوم بتطبيق التغييرات. قبل أن تعيد التشغيل من الأفضل من أن تقوم بفحص الإعدادات التي أنشأتها للتأكد من عدم وجود أخطاء syntax , يمكنك استخدام هذه التعليمة لعمل ذلك في لينوكس

  nginx -t
  

   

التطبيق لايعمل بشكل سليم ويظهر هذا الخطا 

بتاريخ 39 دقائق مضت قال Hikmat Jaafer:

بما أن مشروع الأدمن يعمل على المسار wesamelnagah.com:90 فتستطيع بعدة خطوات تغيير نطاقه , الفكرة هي كالتالي: سيبقى مشروع الأدمن على النطاق الحالي و سنقوم بتغيير إعدادات السيرفر لنجعله عندما يتلقى طلبا للنطاق wesamelnagah.com/admin  يقوم بإعادة توجيه الطلب للنطاق الحقيقي wesamelnagah.com:90. و هذه الفكرة نظريا يطلق عليها مفهوم ال proxy , و للقيام بها اتبع هذه الخطوات:

• قم بتسجيل الدخول لحساب ال vps الخاص بك.
• قم بتثبيت nginx إذا لم تكن قد ثبته من قبل.
• قم بتهيئة nginx كالتالي:
  اذهب لمجلد الاعدادات الخاص ب nginx  (غالبا في هذا المسار /etc/nginx/sites-available/)=> أنشأ ملف اعدادات جديد تستطيع تسميته بأي اسم تريده  => افتح هذا الملف بواسطة محرر نصوص => ضع هذه التعليمات في الملف و احفظه

  server {
      listen 80;
      server_name wesamelnagah.com;
  
      location /admin {
          proxy_pass http://wesamelnagah.com:90;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  
  }
  

• قم بتعريف الملف الذي أنشأته في مجلد ال sites-enabled ليتمكن السيرفر من رؤيته و تنفيذه
  في لينوكس يمكنك استخدام هذه التعليمة :

  sudo ln -s /etc/nginx/sites-available/اسم الملف الذي أنشأته /etc/nginx/sites-enabled/
  

• أعد تشغيل nginx لكي يقوم بتطبيق التغييرات. قبل أن تعيد التشغيل من الأفضل من أن تقوم بفحص الإعدادات التي أنشأتها للتأكد من عدم وجود أخطاء syntax , يمكنك استخدام هذه التعليمة لعمل ذلك في لينوكس

  nginx -t
  

   

يظهر هذا الخطا عند الدخول على wesamelnagah.com/admin/

بتاريخ 2 ساعة قال Ahmed Zehry:

التطبيق لايعمل بشكل سليم ويظهر هذا الخطا 

يظهر هذا الخطا عند الدخول على wesamelnagah.com/admin/

 في ملف package.json قم بإضافة عنوان الصفحة الرئيسية للمشروع من خلال خاصية homepage:

"homepage": "https://wesamelnagah.com/admin/" 

ثم قم بتحديث المسارات وتحديد basename وذلك مثال للإصدار 6 من react-router:

import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Router = () => {
  return (
    <BrowserRouter basename={'admin'}>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

بتاريخ 10 دقائق مضت قال Mustafa Suleiman:

 

import { BrowserRouter } from 'react-router-dom';
import App from './App';

const Router = () => {
  return (
    <BrowserRouter basename={'admin'}>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

انا لا استخدم BrowserRouter واستخدم بدلا منها HashRouter وهذا رابط المشروع اذا كنت تستطيع القاء نظرة عليه:
https://github.com/ahmedzehry55/wesam-backendreact.git

بتاريخ 3 دقائق مضت قال Ahmed Zehry:

انا لا استخدم BrowserRouter واستخدم بدلا منها HashRouter وهذا رابط المشروع اذا كنت تستطيع القاء نظرة عليه:
https://github.com/ahmedzehry55/wesam-backendreact.git

سيكون كالتالي أيضًا:

import { HashRouter } from 'react-router-dom';
import App from './App';

const Router = () => {
  return (
    <HashRouter basename={'admin'}>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </HashRouter>
  );
};

export default Router;

بتاريخ 1 دقيقة مضت قال Mustafa Suleiman:

سيكون كالتالي أيضًا:

import { HashRouter } from 'react-router-dom';
import App from './App';

const Router = () => {
  return (
    <HashRouter basename={'admin'}>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </HashRouter>
  );
};

export default Router;

 

 قمت بذلك ولم تعمل ايضا

بتاريخ منذ ساعة مضت قال Ahmed Zehry:

 قمت بذلك ولم تعمل ايضا

حاول إذن تحديد خيار base في إعدادات vite في ملف vite.config:

export default defineConfig({
  base:'./',
});

بحيث تصبح مسارات الملفات نسبية.

بتاريخ 3 دقائق مضت قال Mustafa Suleiman:

حاول إذن تحديد خيار base في إعدادات vite في ملف vite.config:

export default defineConfig({
  base:'./',
});

بحيث تصبح مسارات الملفات نسبية.

  export default defineConfig(({ mode }) => {
  // Load .env
  const env = loadEnv(mode, process.cwd(), '')
  process.env = { ...process.env, ...env }

  return {
    base: './',
    build: {
      outDir: 'build',
    },
    css: {
      postcss: {
        plugins: [
          autoprefixer({}), // add options if needed
        ],
      },
    },
    define: {
      // vitejs does not support process.env so we have to redefine it
      'process.env': process.env,
    },
    esbuild: {
      loader: 'jsx',
      include: /src\/.*\.jsx?$/,
      exclude: [],
    },
    optimizeDeps: {
      force: true,
      esbuildOptions: {
        loader: {
          '.js': 'jsx',
        },
      },
    },
    plugins: [react()],
    resolve: {
      alias: [
        {
          find: 'src/',
          replacement: `${path.resolve(__dirname, 'src')}/`,
        },
      ],
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
    },
    server: {
      port: 90,
      proxy: {
        // https://vitejs.dev/config/server-options.html
      },
    },
  }
})

الدالة لدي بهذا الشكل كيف اقوم بتعديلها؟