كيفية تشغيل Nuxt.js على DigitalOcean؟

كما تعلمون ، Nuxt.js هو إطار عمل لإنشاء تطبيقات Universal Vue.js. لذا فإن أكبر ميزة في Nuxt هي أنه يمكننا إنشاء تطبيق R Serverings Renderings (SSR) ويزيل الكثير من المشاكل مع SEO ، والتي يمكن أن نواجهها مع Vue.js Single Page Applications ، وخاصة مع المحتوى المحمّل ديناميكيًا (من API). ولكن إذا كنت تريد استخدام Nuxt.js مع SSR ، فأنت بحاجة إلى وجود بيئة node.js وهذه مشكلة أكبر قليلاً. بقدر ما يمكننا وضع Vue.js SPA على كل استضافة تقريبًا ، دون أي متطلبات ، فإن الاستضافة مع node.js أقل شيوعًا وتتطلب غالبًا اتباع نهج مختلف قليلاً.

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

حسنًا ... إذا كان لدينا بعض المعلومات الأساسية ، فلنبدأ!

التسجيل وكيفية الحصول على أرصدة مجانية للبدء في DigitalOcean

إذا لم يكن لديك حساب على الحساب ، سجل واحدًا من عنوان url هذا - ستحصل على 10 دولارات مجانًا ... وسأحصل على مكافأة صغيرة أيضًا ، بحيث يفوز الجميع! ؛).

يمكنك أيضًا زيارة عنوان url هذا: https://gitlab.com/snippets/1740855 والتحقق من رموز الترويجي لملء حقل "هل لديك رمز ترويجي؟". سوف يمنحك رصيد مجاني بقيمة 10 دولارات على الأقل.

إنشاء قطرة جديدة

عند الانتهاء من التسجيل ، قم بتسجيل الدخول إلى حسابك وإنشاء قطرة جديدة. أقترح عليك اختيار Ubuntu 18.04 والقياس القياسي بقيمة 5 دولارات / شهر - 1 جيجا بايت و 1 وحدة معالجة فيزيائية و 25 جيجابايت يجب أن يكونا كافيين للبدء. في المستقبل ، يمكنك تغيير حجم القطرة بسهولة بالغة.

املأ الحقول المتبقية وانتظر إنشاء الحبرية.

تحضير البيئة

أفترض أنه في هذه اللحظة تم إنشاء قطرة بالفعل وقمت بتسجيل الدخول إليها بواسطة SSH. أفترض أيضًا أن جميع الأوامر الواردة في الجزء التالي من هذا الدليل ستعمل كمستخدم بلا جذر ، لذلك سنستخدم `sudo` (تحقق من هذا البرنامج التعليمي إذا كنت بحاجة إلى مزيد من المعلومات). لنبدأ…

تحديث قائمة الحزم:

sudo الحصول على التحديث

تثبيت node.js & npm:

sudo-apt-get install nodejs npm

إذا كنت تريد تثبيت الغزل ، فقم بتشغيل هذه الأوامر:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
صدى "deb https://dl.yarnpkg.com/debian/ مستقرة الرئيسية" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get تثبيت الغزل

اذهب الآن إلى دليل منزلك:

مؤتمر نزع السلاح ~

وإنشاء دليل للمشروع:

mkdir ./your-project-name

مما لا شك فيه ، لديك مشروع Nuxt.js على جهاز الكمبيوتر الخاص بك ، لذلك انسخه الآن إلى هذا الدليل. افتح نافذة طرفية جديدة وقم بتشغيل:

scp -r / path / to / your / local / project / * your-user-name @ : ~ / your-project-name /

حسنًا ، عد إلى المحطة حيث تكون متصلاً بالقطرة وتحقق من وجود الملفات في الدليل الصحيح:

ls. / your-project-name

يجب أن تشاهد قائمة ملفات المشروع.

بدء تشغيل Nuxt.js

الآن أنشأنا خادمنا مع node.js وملفات مشروعنا. لنقم بتشغيل Nuxt.js!

cd. / your-project-name
تشغيل npm بناء
npm تشغيل nuxt

يجب أن يعمل المشروع على العنوان: http: // localhost: 3000. بالطبع ، كان فقط للاختبار ونحن بحاجة إلى المزيد من التشغيل التلقائي ، لأنك لن تبدأ موقع الويب الخاص بك يدويًا في كل مرة.

سنستخدم PM2 - مدير عمليات node.js. تثبيته:

سودو npm تثبيت pm2-ز

وابدأ المشروع بحلول الساعة الثانية بعد الظهر الآن:

pm2 بدء npm - البدء

يجب أن ترى:

تشغيل Nginx كخادم وكيل

يتم تشغيل مشروع Nuxt.js الخاص بنا ، لكنه متوفر فقط على مضيف محلي من الحبرية. يجب أن نخبر خادمنا الآن: ey مهلاً ، إذا قام شخص ما بزيارة my-domain.com ، فأظهر له موقع ويب لمشروع Nuxt.js ". سوف نستخدم خادم Nginx للقيام بذلك:

sudo - الحصول على تثبيت تثبيت إنجن إكس

بعد ذلك ، سننشئ تكوينًا أساسيًا لمشروع واحد ، ولكن في المستقبل يمكنك تكراره وتشغيل العديد من التطبيقات والمجالات node.js المختلفة على قطرة واحدة.

sudo nano /etc/nginx/sites-available/your-domain.com

في هذا الملف ، ضع المحتوى التالي (تذكر تغيير عبارة "your-domain.com" إلى اسم نطاقك الحقيقي):

الخادم {
    الاستماع 80 ؛
    استمع [::]: 80؛
    index index.html؛
    server_name your-domain.com ؛

    موقعك / {
        proxy_pass http: // localhost: 3000؛
        proxy_http_version 1.1؛
        proxy_set_header ترقية $ http_upgrade؛
        proxy_set_header اتصال 'ترقية' ؛
        proxy_set_header Host $ host؛
        proxy_cache_bypass $ http_upgrade؛
    }
}

سيتم الآن إعادة توجيه كل حركة المرور الواردة إلى your-domain.com على منفذ http 80 الافتراضي إلى المضيف المحلي: 3000.

الآن قم بإزالة التكوين الافتراضي الحالي:

sudo rm / etc / nginx / تمكين المواقع / الافتراضي

وربط ملف التهيئة الجديد الخاص بنا بالدليل المتاح للمواقع:

sudo ln -sf /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/your-domain.com

أخيرًا ، اختبر تكوين nginx جديد وإذا كان كل شيء على ما يرام - أعد تشغيل خادم nginx:

sudo nginx -t
سودو systemctl إعادة تشغيل إنجن إكس

بعد ذلك فقط أضف نطاقك إلى القطرة واستمتع بمشروع Nuxt.js الخاص بك!

ملحوظة

تذكر أن الغرض من هذا الدليل ليس الاستخدام العام لأمن DigitalOcean وقطرات ، ولكن فقط تثبيت Nuxt.js. إذا كنت مستخدمًا جديدًا تمامًا لـ DO ، فسوف أعطيك بعض الروابط إلى أدلة إضافية تستحق القراءة:

  • إعداد الخادم الأولي مع أوبونتو 18.04
  • كيفية إضافة مفاتيح SSH إلى القطرات
  • المجالات و DNS
  • كيفية تأمين Nginx باستخدام Let Let's Encrypt على Ubuntu 18.04