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

السؤال

نشر (معدل)

هل بأمكاني رفع Next.js App علي منصة GoDaddy بأختيار Economy Linux Hosting with cPanel

+  انا اعمل علي Windows  هل هناك مشكلة في هذا الامر ؟ 

+ هل هناك فيديو يشرح الخطوات 

تم التعديل في بواسطة عبدالرحمن عوني

Recommended Posts

  • 1
نشر

نعم، يمكنك رفع تطبيق Next.js على منصة GoDaddy باستخدام خدمة Economy Linux Hosting with cPanel.

يمكنك استخدام cPanel لإدارة الخادم وتثبيت Node.js وnpm لتنزيل وتثبيت التبعيات اللازمة لتشغيل تطبيقك. بعد ذلك يمكنك تحميل ملفات التطبيق وإعداد الاعدادات اللازمة لتشغيل التطبيق. يرجى ملاحظة أنه يجب عليك التأكد من أن الخادم الذي تختاره يلبي متطلبات تشغيل تطبيق Next.js.

 يمكنك اتباع الخطوات التالية:

  1. اشترِ خطة استضافة من GoDaddy وقم بتسجيل الدخول إلى لوحة التحكم الخاصة بك (cPanel).

  2. قم بإعداد نطاق الويب الخاص بك واتصل به إذا لزم الأمر.
  3. قم بإنشاء قاعدة بيانات MySQL ومستخدم بمسؤولية كاملة لهذه القاعدة.
  4. حمِّل تطبيق Next.js الخاص بك إلى مجلد على الخادم (يمكنك استخدام FTP لهذا الغرض).
  5. قم بتثبيت Node.js و NPM على الخادم باستخدام SSH.
  6. قم بتنزيل وتثبيت جميع الحزم اللازمة التي يتطلبها تطبيق Next.js.
  7. قم بتكوين ملفات الإعدادات الخاصة بتطبيق Next.js الخاص بك (مثل المتغيرات البيئية ومعلومات الاتصال بقاعدة البيانات).
  8. قم بتشغيل تطبيق Next.js باستخدام SSH وأمر NPM.

يمكنك البحث عن دليل خطوة بخطوة على الإنترنت لمساعدتك في تطبيق هذه الخطوات بشكل أفضل. كما يمكنك البحث عن أدوات وحلول متاحة لتحميل تطبيق Next.js الخاص بك ونشره على GoDaddy.

 سأوضح لك كل خطوة بالتفصيل:

1- شراء حزمة استضافة Linux على GoDaddy:

أولاً، يجب عليك شراء حزمة استضافة Linux على GoDaddy. يمكنك ذلك عن طريق الدخول إلى موقع GoDaddy واختيار خيار الاستضافة، ثم تحديد حزمة Linux الاقتصادية مع لوحة التحكم cPanel.

2- إعدادات الدومين ونقل الملفات:

بمجرد شراء الحزمة، يمكنك إعداد اسم النطاق الخاص بك ونقل ملفات Next.js إلى الخادم الخاص بك باستخدام FTP أو SFTP.

3- تثبيت Node.js و npm:

يجب تثبيت Node.js و npm على الخادم الخاص بك. يمكنك فعل ذلك باستخدام الأمر التالي:

sudo apt-get install nodejs npm

4- تثبيت PM2:

يمكن استخدام PM2 لإدارة تطبيق Next.js وتشغيله باستمرار. لتثبيت PM2، استخدم الأمر التالي:

npm install pm2 -g

5- تنزيل متطلبات المشروع:

تحتاج إلى تحميل متطلبات المشروع الخاص بك باستخدام npm. يمكنك فعل ذلك باستخدام الأمر التالي:

npm install

6- بناء التطبيق:

يجب بناء تطبيق Next.js الخاص بك بواسطة npm. يمكنك فعل ذلك باستخدام الأمر التالي:

npm run build

7- تشغيل تطبيق Next.js:

يمكنك تشغيل تطبيق Next.js الخاص بك باستخدام PM2. يمكنك استخدام الأمر التالي:

pm2 start npm --name "app-name" -- start

8- تكوين ملفات Nginx:

يمكنك تكوين ملفات Nginx للتوجيه إلى تطبيق Next.js الخاص بك. يمكنك فعل ذلك باستخدام الأمر التالي:

server {
    listen 80;
    server_name example.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set
      _header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

بعد إعداد ملف الـ Nginx، يجب تشغيله باستخدام الأمر التالي:

sudo systemctl start nginx

ويمكنك التحقق من حالة الـ Nginx باستخدام الأمر التالي:

sudo systemctl status nginx

ستظهر لك حالة الـ Nginx ويجب أن تكون "active (running)".

أخيراً، يجب عليك فتح منفذ 80 في جدار الحماية الخاص بالخادم إذا كان مفتوحاً على منفذ آخر، باستخدام الأمر التالي:

sudo ufw allow 80/tcp

بهذا، تم إعداد خادم Nginx لتشغيل تطبيق Next.js على خادم Ubuntu 20.04.

  • 1
نشر

نعم يمكنك رفع تطبيق next.js علي cPanel في أي منصة 

وستكون الخطوات كالتالي:

أولا التأكد من تنصيب بيئة 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.

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...