رفع موقع next.js على Cpanel

هل يمكنك اعطاء تفاصيل أكثر، كيف قمت بتوليد المشروع النهائي build وكيف قمت برفعه على الـ cpanel.

فالصحيح هو ان تستخدم ال custom server  وأن تقوم برفع الموقع مثل اي سيرفر node js.

في حال قمت بتوليد المشروع النهائية build باستخدام الـ next export فلن تعمل الوظائف الخاصة بالسيرفر.

نعم لقد استخدمت ال custom server وأنشأت ملف server.js داخل المشروع كما موضح في هذا الرابط :  

https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

وثم اتبعت خطوات تصدير المشروع بالخطوات المذكورة التالية : 

https://mohssine.vercel.app/snippets/deploy-next-js-app-in-cpanel

بعد ان اتبعت الخطوات السابقة حصلت على مجلد المشروع  zip ورفعته على cpanel

عليك بالتأكد من أنك قمت بالتالي:

الخطوة 1: إنشاء خادم Next.js مخصص

• قم بإنشاء ملف بالاسم "server.js" في المجلد الرئيسي لمشروعك.
• وضع الكود التالي في الملف "server.js":

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

أو قم بقراءة الدليل الرسمي Next JS guide لتعرف ما هي الإعدادات المناسبة لمشروعك.

الخطوة 2: تعديل ملف package.json

• عليك بتعديل ملف package.json في مشروع Next.js الخاص بك.
• ثم تعديل سكريبت البدء (start) ليشير إلى "node server.js" بدلاً من "next start".
• وتأكد من تعيين المتغير "NODE_ENV" إلى "production".

مثال على package.json المعدل:

{
  "name": "my-next-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "next": "^12.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

الخطوة 3: بناء تطبيق Next.js

• قم بتشغيل الأمر التالي في وحدة التحكم (Terminal) لبناء تطبيق Next.js:

npm run build

وانتظر حتى تنتهي عملية البناء.

الخطوة 4: رفع الملفات إلى cPanel

• قم بفتح مجلد مشروع Next.js الخاص بك على جهاز الكمبيوتر.
• حدد جميع الملفات والمجلدات باستثناء المجلد "node_modules" والملفات ".git" و"README.md" و".gitignore".
• أنشئ ملف ZIP باستخدام الملفات المحددة.

الخطوة 5: رفع الملفات إلى cPanel

• دخول إلى cPanel الخاص بك.
• قم بتحميل ملف ZIP الذي أنشأته إلى المجلد الجذر لاسم النطاق الخاص بك وقم بفك الضغط عنه.

الخطوة 6: إعداد تطبيق Node.js على cPanel

انتقل إلى قسم البرمجيات في cPanel وانقر على "Setup Node.js App".

• انقر على زر "+ Create Application".

قم بتكوين التطبيق Node.js كما يلي:

• Node.js version: حدد الإصدار الذي يتوافق مع إصدار Node.js الذي استخدمته أثناء تطوير التطبيق.
• Application mode: حدد "Production".
• Application root: اكتب المسار الذي يربط معه المجلد الجذر لمشروعك. إذا وضعت الملفات والمجلدات في مجلد "public_html"، فاكتب "/public_html".
• Application URL: حدد اسم النطاق الخاص بك.
• Application startup file: اكتب "server.js".

والآن:

• انقر على الزر "CREATE" وانتظر حتى يتم إنشاء التطبيق.
• قم بالنقر على زر "STOP APP" لإيقاف التطبيق مؤقتًا.
• انتقل قليلاً لترى قسم "Detected configuration files"، وانقر على "Run NPM Install" لتثبيت جميع حزم Node.js المستخدمة في مشروعك.
• انتقل مرة أخرى للنقر على زر "START APP" لبدء التطبيق.
• افتح اسم النطاق الخاص بك في المستعرض وسيظهر لك تطبيق Next.js الخاص بك.

وإذا ما زلت تواجهة أية مشكلة، أنصحك بالبحث عن Build and deploy Next js app on cpanel على يوتيوب وستجد شروحات توضح كيفية القيام بالأمر.

بتاريخ 1 ساعة قال Mustafa Suleiman:

عليك بالتأكد من أنك قمت بالتالي:

الخطوة 1: إنشاء خادم Next.js مخصص

• قم بإنشاء ملف بالاسم "server.js" في المجلد الرئيسي لمشروعك.
• وضع الكود التالي في الملف "server.js":

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

أو قم بقراءة الدليل الرسمي Next JS guide لتعرف ما هي الإعدادات المناسبة لمشروعك.

الخطوة 2: تعديل ملف package.json

• عليك بتعديل ملف package.json في مشروع Next.js الخاص بك.
• ثم تعديل سكريبت البدء (start) ليشير إلى "node server.js" بدلاً من "next start".
• وتأكد من تعيين المتغير "NODE_ENV" إلى "production".

مثال على package.json المعدل:

{
  "name": "my-next-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "next": "^12.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

الخطوة 3: بناء تطبيق Next.js

• قم بتشغيل الأمر التالي في وحدة التحكم (Terminal) لبناء تطبيق Next.js:

npm run build

وانتظر حتى تنتهي عملية البناء.

الخطوة 4: رفع الملفات إلى cPanel

• قم بفتح مجلد مشروع Next.js الخاص بك على جهاز الكمبيوتر.
• حدد جميع الملفات والمجلدات باستثناء المجلد "node_modules" والملفات ".git" و"README.md" و".gitignore".
• أنشئ ملف ZIP باستخدام الملفات المحددة.

الخطوة 5: رفع الملفات إلى cPanel

• دخول إلى cPanel الخاص بك.
• قم بتحميل ملف ZIP الذي أنشأته إلى المجلد الجذر لاسم النطاق الخاص بك وقم بفك الضغط عنه.

الخطوة 6: إعداد تطبيق Node.js على cPanel

انتقل إلى قسم البرمجيات في cPanel وانقر على "Setup Node.js App".

• انقر على زر "+ Create Application".

قم بتكوين التطبيق Node.js كما يلي:

• Node.js version: حدد الإصدار الذي يتوافق مع إصدار Node.js الذي استخدمته أثناء تطوير التطبيق.
• Application mode: حدد "Production".
• Application root: اكتب المسار الذي يربط معه المجلد الجذر لمشروعك. إذا وضعت الملفات والمجلدات في مجلد "public_html"، فاكتب "/public_html".
• Application URL: حدد اسم النطاق الخاص بك.
• Application startup file: اكتب "server.js".

والآن:

• انقر على الزر "CREATE" وانتظر حتى يتم إنشاء التطبيق.
• قم بالنقر على زر "STOP APP" لإيقاف التطبيق مؤقتًا.
• انتقل قليلاً لترى قسم "Detected configuration files"، وانقر على "Run NPM Install" لتثبيت جميع حزم Node.js المستخدمة في مشروعك.
• انتقل مرة أخرى للنقر على زر "START APP" لبدء التطبيق.
• افتح اسم النطاق الخاص بك في المستعرض وسيظهر لك تطبيق Next.js الخاص بك.

وإذا ما زلت تواجهة أية مشكلة، أنصحك بالبحث عن Build and deploy Next js app on cpanel على يوتيوب وستجد شروحات توضح كيفية القيام بالأمر.

انتقل إلى قسم البرمجيات في cPanel وانقر على "Setup Node.js App".  

لا اجد ال node.js في القسم المشاؤ اليه ..