قم بإعداد تطبيق ويب Nuxt.js على Ubuntu 18.04 LTS

• Nuxt.js: الإطار العالمي
• تثبيت Node.js
• تطبيق سقالة
• البداية الأولية
• البناء للإنتاج
• PM2: إدارة التطبيق الخاص بك بكل سهولة

Nuxt.js: الإطار العالمي

Nuxt.js هو إطار JavaScript مصمم لإنشاء تطبيقات Vue.js العالمية بسرعة. وهي مشهورة بقدرتها على إنشاء تطبيقات Vue.js التي يمكن عرضها على الخادم وكذلك العميل. في هذا البرنامج التعليمي ، سنقوم بإعداد تطبيق Nuxt.js المقدم من الخادم ونشره على Ubuntu 18.04 LTS.

تثبيت Node.js

أولاً ، ستحتاج إلى التأكد من تشغيل Ubuntu 18.04 LTS. بعد ذلك ، ستحتاج إلى تثبيت Node.js ، إذا لم يكن مثبتًا بالفعل. في هذا البرنامج التعليمي ، سوف نستفيد من Node Version Manager ، أو NVM ، لجعل هذه العملية أسهل بكثير.

قم بتثبيت NVM باستخدام الأوامر التالية.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

تطبيق سقالة

بمجرد تثبيت Node.js ، يمكننا الآن متابعة إعداد الحزم التي سنحتاجها باستخدام NPM. create-nuxt-appسنستخدم أداة صغيرة يدوية تسمى أداة من صنع المجتمع يمكنها بسهولة إنشاء تطبيقات Nuxt.js.

في دليل منزلك ، قم بتشغيل الأمر التالي لبدء إنشاء التطبيق.

npx create-nuxt-app <nameofproject>

ستطالبك وحدة التحكم بالعديد من الخيارات المهمة. من أجل هذا البرنامج التعليمي ، سنقوم بتسمية مشروعنا " app". سنستخدم Express كإطار خادم مخصص لدينا ، وسنقوم بتشغيل التطبيق في الوضع العام ، مما يضمن أننا سنعرض موقعنا على الخادم. عند تحديد جميع الأذونات المطلوبة ، ستبدأ عملية التثبيت وسيتم إنشاء جميع ملفات التكوين.

البداية الأولية

بمجرد تنزيل كل شيء ، قم بتغيير الدلائل إلى المجلد الذي أنشأته للتو.

cd app

يمكننا الآن بدء تشغيل خادم تطوير Nuxt.js.

npm run dev

سيقوم هذا الأمر ببناء الموقع باستخدام webpack ، وهو عبارة عن حزمة وحدة نمطية ، وسيخدم الموقع على منفذ localhost ، والذي سيكون بشكل عام منفذًا 3000. سيتيح لك أيضًا الوصول إلى وحدات إعادة التحميل الساخنة ، والتي ستزيل الحاجة إلى إعادة تشغيل التطبيق في كل مرة تقوم فيها بتغيير ملف. نظرًا لأننا نقوم بتشغيل التطبيق في الوضع العام ، فسيتم ترجمة التطبيق على كل من العميل والخادم. الآن سيتم تشغيل التطبيق الخاص بك على المنفذ 3000.

البناء للإنتاج

وضع التطوير مفيد جدًا عندما تقوم بتطوير تطبيقك بنشاط. ومع ذلك ، عندما تكون جاهزًا لجعل تطبيقك عامًا ، تصبح الإضافات مثل أدوات إعادة التحميل الساخنة وأدوات التطوير أقل أهمية. هذا هو السبب في أننا نريد إنشاء تطبيقنا مرة واحدة ، لبيئة إنتاج. لحسن الحظ ، يتضمن Nuxt.js أداة يمكننا استخدامها لبناء وحدات تطبيقنا للإنتاج بسرعة. قم بتشغيل ما يلي لبدء عملية بناء الإنتاج.

npm run build

بشكل أساسي ، ما نقوم به هنا هو أننا نقوم بتجميع جميع وحدات حزم الويب الخاصة بنا ، مع تحسينات للإنتاج.

بمجرد اكتمال البناء ، ستتمكن من تشغيل الموقع للإنتاج.

npm start

الآن ، إذا انتقلت إلى http://yourip:3000، سترى شاشة البداية Nuxt.js ، والتي تؤكد أنك تعمل في وضع الإنتاج.

PM2: إدارة التطبيق الخاص بك بكل سهولة

الآن نحن نفهم أساسيات تشغيل تطبيقنا للإنتاج. فيما يتعلق ببيئة الإنتاج ، نفضل طريقة جيدة للحفاظ على تشغيل تطبيقنا إلى الأبد ، وإعادة تشغيل التطبيق تلقائيًا عند الضرورة ، ومراقبة موارد التطبيق لدينا. هذا هو المكان الذي تأتي فيه Process Manager 2 (PM2). PM2 هو مدير عمليات Node.js لتطبيقات الإنتاج ، والذي يتضمن العديد من أدوات الإنتاج المهمة مثل موازنة التحميل والسجلات المتقدمة ونصوص بدء التشغيل والمزيد. أولاً ، قم بتثبيت PM2.

npm install pm2 -g

يؤدي هذا إلى تثبيت PM2 عالميًا حتى نتمكن من استخدامه في أي مكان على الخادم الخاص بنا. بمجرد الانتهاء من تنزيل PM2 ، يمكننا بدء تطبيقنا.

pm2 start <appfolder>/server/index.js

لاحظ أننا نبدأ ملف الخادم الموجود داخل جذر التطبيق الخاص بنا.

إذا كنت ترغب في عرض الموارد التي يستهلكها تطبيقك ، يمكنك القيام بذلك باستخدام pm2 monitالأمر. سيؤدي ذلك إلى إظهار واجهة مشابهة لتلك الموجودة في ncurses ، حيث يمكنك جمع البيانات بدقة حول ذاكرة الوصول العشوائي للتطبيق ووحدة المعالجة المركزية واستخدام القرص.

في الوقت الحالي ، سيتم تشغيل تطبيقك تمامًا كما كان عند تشغيله باستخدام npm في وقت سابق ، باستثناء الآن لدينا المزيد من التحكم عندما يتعلق الأمر بتحسينات الإنتاج.

لديك الآن بنية تطبيق Nuxt.js تم نشرها للإنتاج باستخدام Node.js و Ubuntu 18.04. إذا كنت ترغب في معرفة المزيد عن Nuxt ، وجميع ميزاته المتعمقة ، فلا تتردد في زيارة وثائقهم الرسمية .