اذهب إلى المحتوى
  • 0

كيف أقوم بعملية رفع مشروع Next JS على الاستضافة المشتركة Shared Hosting وماهي الأمور التي يجب أن أتأكد منها

سعيد يوسف

السؤال

أريد شرح الخطوات لرفع مشروع موقع الكتروني مبني بواسطة NextJS، كيفية وضع الملفات و المجلدات وضبط إعدادات المخدم، 

وكيف أعرف متطلبات تشغيل المشروع، هل يوجد استضافة مخصصة له؟ حاليا لدي استضافة مشتركة Shared Hosting

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

أولا التأكد من تنصيب بيئة NodeJS على المخدم بواسطة CPanel يمكنك مراجعة خطوات التنصيب بالإجابة التالية:

الآن نحتاج لتنصيب حزمة pm2 فهي process manager ل JavaScript runtime Node.js:

npm install -g pm2

ثم في nginx نعطي سماحية للمنفذ الذي يعمل عليه تطبيق NextJS 

في
nginx.conf/server/location
أضف السطر
proxy_pass http://localhost:6060

ثم نعمل على رفع الملفات الخاصة بالمشروع pages, public, src , package.json إلى مسار ما علة المخدم:

/var/www/your-Next-folder

ثم نعدل صلاحيات المجلد: ونقوم بتنصيب الحزم

sudo chown -R $USER:$USER /var/www/your-Next-folder

ثم نقوم بتنصيب الحزم
> cd to your-Next-folder 
> run: npm -i

ثم ضمن package.json نعدل أمر تشغيل التطبيق حسب المنفذ المستخدم

next start -p your-port
next start -p 6060

ثم بناء وتشغيل المشروع:

npm run build

pm2 start "npm run start" --name Next-project

ملاحظة: إن اعترضتك مشكلة في بناء npm build تكون بسبب قلة الذاكرة الافتراضية، لذلك ينصح بعمل البناء محليا على حاسوبك،

في حال رفع ملفات ساكنة هنا قد نحتاج لبرنامج يخدم المشروع، تأكد من معمارية المشروع كالتالي:

public_html
    Next_project
        .next
        src
        server.js
        package.json
        ...

حيث أن شيفرة server.js ستكون بالشكل:

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";

const port = !dev ? process.env.PORT : 3000;

// Create the Express-Next App
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;
      handle(req, res, parsedUrl);
      console.log("pathname", pathname);
    }).listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

الآن التشغيل ك node server.js.

npm install cross-env

"scripts": {
    "start": "cross-env NODE_ENV=production node server.js"
}

كما يمكن تنفيذ أمر next export الذي ينتج ملفات ساكنة يمكن رفعها على المخدم 

قد تحتاج لملف .htaccess لتوجه الطلبيات نحو مخدمك، سيكون بهذه الطريقة:

RewriteEngine On
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

مع تغيير المنفذ للمستخدم لديك في مثالنا 6060.

أفضل استضافة هي vercel لسهولة النشر عليها 

كما يمكن لأداء أفضل استخدام vps

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...