دليلك الشامل لتطوير ونشر أول تطبيق ويب متكامل (Full-Stack) باستخدام موقع ثابت وNode.js

يقدم هذا الدليل الشامل خطوات مفصلة لتحويل موقع ويب ثابت يعتمد على تقنيات HTML و CSS و JavaScript (JS) إلى تطبيق ويب ديناميكي متكامل. سنستفيد من مجموعة تقنيات قوية تشمل MongoDB لإدارة قواعد البيانات، و Express كإطار عمل لجانب الخادم، بالإضافة إلى Node.js لتشغيل التطبيق. على الرغم من أن حزمة التقنيات لدينا ستكون مشابهة للحزم الشهيرة مثل MEAN أو MERN (التي تتضمن MongoDB و Express و Angular أو React و Node.js)، إلا أننا سنختار محرك قوالب (templating engine) يُعرف باسم EJS (Embedded JavaScript) بدلاً من أطر عمل الواجهة الأمامية المعقدة مثل Angular أو React. من محركات القوالب الشائعة الأخرى نذكر Handlebars و Pug و Nunjucks.

بعد الانتهاء من تطوير التطبيق، سنتطرق إلى عملية نشر تطبيق الويب المبني على Node.js على منصة DigitalOcean، وسنغطي جوانب أساسية مثل أسماء النطاقات (domain names)، وشهادات SSL، والوكلاء العكسيين (reverse proxies)، ومديري العمليات (process managers).

يُعد تعلم لغة قوالب أسهل بكثير من إتقان إطار عمل JavaScript كامل، حيث يمكنك ببساطة كتابة HTML والسماح لها بإدراج أجزاء متكررة من الكود في أماكن متعددة (تُعرف باسم partials) أو تمرير المتغيرات من جانب الخادم لعرضها في الواجهة الأمامية (مثل اسم المستخدم).

جدول المحتويات

• تطوير أول تطبيق ويب باستخدام Node.js
  • تثبيت Node.js
  • اختبار عملية التثبيت
  • إنشاء الخادم الأول
  • الخطوات التالية
• أساسيات محركات القوالب
  • تثبيت EJS
  • تحويل الصفحات الثابتة إلى ملفات EJS
  • إعادة استخدام الكود: إنشاء أول جزء قالب (Partial) باستخدام EJS
  • عرض صفحات EJS
• تمرير البيانات من جانب الخادم إلى الواجهة الأمامية
• نشر أول تطبيق ويب باستخدام Node.js
  • إعداد DigitalOcean
  • الاتصال بالخادم الافتراضي (Droplet) الخاص بك
  • نشر تطبيق الويب المبني على Node.js
  • تكوين اسم النطاق الخاص بك
  • إزالة رقم المنفذ من عنوان URL
  • تشغيل التطبيق عند الإقلاع (إعداد مدير العمليات)
• الخلاصة التقنية

تطوير أول تطبيق ويب باستخدام Node.js

تثبيت Node.js

قبل البدء، تأكد من تثبيت بيئة Node.js على جهازك المحلي أو على مزود استضافة الخادم الافتراضي الخاص بك (VPS). إذا لم تكن قد قمت بتثبيته بعد، يمكنك زيارة الموقع الرسمي لـ Node.js واتباع التعليمات هناك. يتيح لك Node.js كتابة شيفرة جانب الخادم (server-side code) باستخدام صيغة خاصة من JavaScript، مما يمكنك من الاستفادة من لغة برمجة مألوفة لديك بالفعل.

يأتي مثبت Node.js مدمجًا مع مدير الحزم NPM (Node Package Manager). يُعد NPM مستودعًا لوحدات Node (Node Modules)، وهي أجزاء من الشيفرة قابلة لإعادة الاستخدام وتعمل على توسيع وظائف الخادم الخاص بك. يمكن تشبيهه بمستودع إضافات (plugin repository)، ويمكن اعتبار وحدات Node بمثابة مقتطفات برمجية أو مكتبات (حسب حجمها وتعقيدها).

ملاحظة لمستخدمي Windows: قد تحتاج إلى إضافة مسارات Node و NPM إلى متغير البيئة PATH لتتمكن من استدعائها بسهولة من سطر الأوامر. للحصول على إرشادات أكثر تفصيلاً، يمكنك الرجوع إلى الدلائل المخصصة لذلك.

اختبار عملية التثبيت

للتحقق من نجاح عملية التثبيت، افتح نافذة طرفية (terminal) واكتب الأوامر التالية: node -v ثم npm -v. إذا كانت الرسالة الناتجة تبدأ بالحرف v متبوعًا بسلسلة من الأرقام (التي تشير إلى رقم الإصدار)، فهذا يعني أن التثبيت قد تم بنجاح. أنت الآن جاهز لإنشاء خادمك الأول.

إنشاء الخادم الأول

بعد أن تكون قد أنشأت موقع ويب ثابتًا، تتمثل الخطوة الأولى في بناء تطبيق Node.js في إنشاء خادم ويب باستخدام إطار عمل Express.

ابدأ بنقل جميع ملفات موقعك الثابتة (مثل HTML و CSS و JS والصور وغيرها) إلى مجلد جديد تسميه public. ثم، أنشئ ملفًا جديدًا باسم server.js في الدليل الجذر لمجلد موقعك.

داخل ملف server.js، أضف الشيفرة التالية:

 // تحميل وحدات Node
var express = require ( 'express' );

// تهيئة Express
var app = express();

// عرض الملفات الثابتة من مجلد 'public'
app.use(express.static( 'public' ));

// المنفذ الذي سيعمل عليه موقع الويب
app.listen( 8080 );

بعد ذلك، في نافذة الطرفية، اكتب الأمر: npm init. اضغط على مفتاح الإدخال (Enter) لقبول الإعدادات الافتراضية لجميع الخيارات التالية، ولكن تأكد من أن نقطة الدخول (entry point) هي server.js.

أخيرًا، اكتب الأمر: npm start. ثم افتح متصفح الويب الخاص بك وانتقل إلى عنوان IP الخاص بمضيف VPS الخاص بك، أو localhost:8080/index.html (أو اسم أي من صفحات الويب الخاصة بك). يجب أن يقوم خادم Express الذي أنشأته للتو بتقديم الملفات الثابتة لموقعك.

الخطوات التالية

في الأقسام القادمة، سنتعمق في كيفية تحويل ملفاتك الثابتة إلى ملفات ديناميكية باستخدام محرك القوالب EJS. سنتناول بعد ذلك كيفية إعادة استخدام الشيفرة المتكررة باستخدام مفهوم الأجزاء (partials) وكيفية حقن المتغيرات من جانب الخادم في الواجهة الأمامية.

أساسيات محركات القوالب

تثبيت EJS

الخطوة الأولى لاستخدام محرك القوالب EJS هي تثبيته. يمكن إنجاز ذلك ببساطة عن طريق تنفيذ الأمر التالي في الطرفية: npm install ejs --save.

يعمل المعامل --save على حفظ الوحدة (module) في ملف package.json الخاص بمشروعك. هذا يضمن أن أي شخص يقوم باستنساخ مستودع Git (أو يقوم بتنزيل ملفات الموقع بطريقة أخرى) يمكنه تثبيت جميع وحدات Node المطلوبة للمشروع (التي تُعرف باسم التبعيات dependencies) باستخدام الأمر npm install فقط، بدلاً من الاضطرار إلى كتابة npm install (اسم الوحدة) لكل وحدة يحتاجها.

تحويل الصفحات الثابتة إلى ملفات EJS

الخطوة التالية هي تحويل ملفات HTML الثابتة إلى ملفات EJS ديناميكية، وإعداد هيكل المجلدات بالطريقة التي يتوقعها EJS.

في الدليل الجذر لموقع الويب الخاص بك، أنشئ مجلدًا باسم views. داخل هذا المجلد، أنشئ مجلدين فرعيين آخرين: أحدهما باسم pages والآخر باسم partials. انقل جميع ملفات HTML الخاصة بك إلى المجلد الفرعي pages، ثم أعد تسمية امتدادات الملفات من .html إلى .ejs.

يجب أن يبدو هيكل المجلدات الخاص بك مشابهًا للصورة أدناه:

إعادة استخدام الكود: إنشاء أول جزء قالب (Partial) باستخدام EJS

عند بناء المواقع الثابتة، غالبًا ما تجد نفسك تكرر أجزاء معينة من الشيفرة في كل صفحة، مثل قسم الرأس (head) حيث توجد علامات meta، وقسم الترويسة (header)، وقسم التذييل (footer). يصبح تغيير هذه الأجزاء في كل صفحة أمرًا غير عملي، خاصة في المواقع الكبيرة. لكن باستخدام أجزاء القوالب (EJS partials)، لن تضطر إلى ذلك؛ فمجرد تعديل ملف قالب واحد (partial) سيؤدي إلى تحديث الشيفرة في جميع الصفحات التي تتضمن هذا الملف.

لنأخذ قسم الترويسة (header) كمثال لجزء نموذجي من موقع الويب يمكن تحويله إلى قالب.

أنشئ ملفًا جديدًا باسم header.ejs داخل مجلد partials. انسخ والصق جميع الشيفرة الموجودة بين وسمي <header></header> من إحدى صفحات EJS الخاصة بك إلى هذا الملف الجديد.

أخيرًا، في جميع الصفحات التي تحتوي على ترويسة، احذف الشيفرة الموجودة بين وسمي <header></header> (وهي نفس الشيفرة التي نسختها إلى ملف header.ejs)، واستبدلها بالشيفرة التالية: <% include('../partials/header') %>.

تهانينا، لقد أنشأت الآن أول جزء قالب EJS خاص بك. كرر هذه العملية لأي أجزاء أخرى متكررة من الشيفرة، مثل أقسام الرأس والتذييل.

نصيحة سريعة: إذا وجدت صعوبة في التمييز بين صفحاتك وأجزاء القوالب نظرًا لأنهما يمتلكان نفس امتداد الملف .ejs، فقد يكون من المفيد وضع شرطة سفلية (_) قبل أسماء أجزاء القوالب (على سبيل المثال، _header.ejs). هذا هو تقليد تسمية يستخدمه بعض المطورين ويمكن أن يكون مفيدًا للغاية.

عرض صفحات EJS

الآن ننتقل إلى الجزء المثير: جعل الخادم يقوم بعرض صفحات EJS وأجزاء القوالب (partials) لتتمكن من رؤيتها في الواجهة الأمامية.

مثال لملف server.js:

 // تحميل وحدات Node
var express = require ( 'express' );
const ejs = require ( 'ejs' ); // إضافة وحدة EJS

// تهيئة Express
var app = express();

// عرض الملفات الثابتة
app.use(express.static( 'public' ));

// تعيين محرك العرض إلى ejs
app.set( 'view engine' , 'ejs' );

// المنفذ الذي سيعمل عليه موقع الويب
app.listen( 8080 );

// *** مسارات GET - لعرض الصفحات ***
// المسار الجذري
app.get( '/' , function ( req, res ) {
    res.render( 'pages/index' );
});

أولاً، نحتاج إلى إضافة وحدة Node الخاصة بـ EJS إلى خادمنا. لذا، في ملف server.js (انظر المثال أعلاه)، أضف السطر: const ejs = require('ejs');.

ثانيًا، يجب أن نخبر خادم Express الخاص بنا باستخدام EJS كمحرك عرض، لذا أضف السطر: app.set('view engine', 'ejs');.

الآن، نحتاج إلى تكوين المسارات (routes). تخبر المسارات الخادم بما يجب فعله عندما ينتقل المستخدم إلى عنوان URL معين في موقع الويب الخاص بك، مثل http://testapp.com/login. هناك نوعان رئيسيان من المسارات: GET و POST. تُستخدم مسارات GET لعرض الصفحات، بينما تُستخدم مسارات POST لتحميل البيانات من الواجهة الأمامية إلى الخادم (عادةً عبر نموذج) قبل عرض الصفحة واستخدام البيانات المحملة بطريقة ما.

نظرًا لأننا نريد فقط عرض صفحات EJS الخاصة بنا، فسنستخدم مسارات GET فقط. أضفها بعد سطر app.listen(8080) في ملف server.js.

بالنسبة للصفحة الرئيسية (index page)، سيكون المسار كالتالي:

 // *** مسارات GET - لعرض الصفحات ***
// المسار الجذري
app.get( '/' , function ( req, res ) {
    res.render( 'pages/index' );
});

يحدد الرمز '/' عنوان URL للموقع الذي ستنشط عليه الشيفرة، ويرمز req إلى الطلب (request) و res إلى الاستجابة (response). لذا، فإن الاستجابة التي يتم إرجاعها عند الانتقال إلى http://testapp.com هي عرض (إظهار للمتصفح) صفحة pages/index.ejs. أضف مسارات مشابهة لصفحات EJS الأخرى الخاصة بك.

تمرير البيانات من جانب الخادم إلى الواجهة الأمامية

تكمن الجاذبية الرئيسية لاستخدام محركات القوالب، بخلاف إعادة استخدام الشيفرة، في قدرتها على تمرير المتغيرات من جانب الخادم (server-side variables) إلى الواجهة الأمامية (front-end). يمكن أن يكون هذا متغيرًا واحدًا، مثل اسم المستخدم الحالي، أو مصفوفة (array) تحتوي على تفاصيل جميع المستخدمين المسجلين. ومع ذلك، تظهر القوة الحقيقية لتمرير متغيرات جانب الخادم عند التعامل مع واجهات برمجة التطبيقات (APIs) أو قواعد البيانات.

كمثال أساسي، ستعرض الشيفرة أدناه الاسم “Louise” داخل وسم <h2> في الصفحة الرئيسية (index page):

ملف server.js:

 // المسار الجذري
app.get( '/' , function ( req, res ) {
    var name = "Louise" ; // تعريف متغير
    // عرض الصفحة الرئيسية مع تمرير المتغير
    res.render( 'pages/index' , {
        // متغير EJS ومتغير جانب الخادم
        name : name
    });
});

يشير name الأول إلى اسم متغير EJS (الاسم المستخدم لعرضه في الواجهة الأمامية)، بينما يشير name الثاني إلى المتغير الذي يحتوي على البيانات التي ترغب في إرسالها. (لا يشترط أن يكونا متطابقين.)

ملف index.ejs:

 < h2 > اسمي هو < %= name %> </ h2 >

للحصول على مثال بسيط باستخدام مصفوفة، يمكنك استخدام الشيفرة التالية التي ستنشئ وسم <p> لكل اسم في متغير listnames:

ملف server.js:

 // المسار الجذري
app.get( '/' , function ( req, res ) {
    var listnames = [ "Louise" , "Sadie" , "Erik" , "Raph" , "Gina" ];
    // عرض الصفحة الرئيسية مع تمرير المصفوفة
    res.render( 'pages/index' , {
        // متغير EJS ومتغير جانب الخادم
        listnames : listnames
    });
});

ملف index.ejs:

 < % listnames.forEach ( function ( name ) { %>
    < p > < %= name %> </ p >
< % }); %>

تهانينا! لقد انتهيت من تطوير أول تطبيق ويب لك باستخدام Node.js. في الجزء التالي، سنتعلم كيفية جعله متاحًا للجمهور (نشره) على الويب لكي تتمكن من عرضه.

نشر أول تطبيق ويب باستخدام Node.js

تتوفر العديد من منصات الاستضافة التي يمكنك استخدامها لنشر تطبيقات الويب المبنية على Node.js، مثل Section و Heroku و Vultr و Linode و Google Cloud Platform و Amazon Web Services. في هذا الدليل، سنستخدم منصة DigitalOcean لنشر تطبيق Node.js الخاص بنا.

إعداد DigitalOcean

أولاً، قم بإنشاء حساب على منصة DigitalOcean. تتوفر غالبًا أكواد خصم لإضافة رصيد مجاني إلى حسابك، مثل الكود المتاح في حزمة المطورين الطلاب من Github Student Developer Pack. انتبه إلى أنه يمكنك استرداد كود واحد فقط لكل حساب.

ثانيًا، ستحتاج إلى إنشاء “قطرة” (droplet). القطرة هي خادم افتراضي خاص (VPS - Virtual Private Server)، وهي تشبه آلة افتراضية (Linux VM) مستضافة في مزرعة خوادم. بمجرد تسجيل الدخول إلى حسابك، انتقل إلى قسم “droplets” تحت عنوان “Manage“، ثم انقر على “create” ومن ثم “droplets“.

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

أيضًا، اختر مركز البيانات الأقرب إلى الجمهور المستهدف لتطبيقك، وقم بتغيير طريقة المصادقة إلى كلمة مرور (password). بينما تعد المصادقة بكلمة المرور أقل أمانًا (يُوصى باستخدام مفاتيح SSH)، إلا أنها أسهل بكثير في الإعداد. لذا، لأغراض العرض التوضيحي، سنستخدم هذه الطريقة.

كل ما تبقى الآن هو اختيار اسم (hostname) والنقر على “Create Droplet“.

الاتصال بالخادم الافتراضي (Droplet) الخاص بك

بعد فترة وجيزة من إنشاء القطرة، ستتلقى رسالة بريد إلكتروني تحتوي على اسم المستخدم وكلمة المرور لقطرتك، والتي ستستخدمها لتسجيل الدخول.

عد إلى موقع DigitalOcean، وفي قسم “droplets“، انقر على اسم القطرة التي أنشأتها للتو، ثم انقر على “Console“. سيؤدي هذا إلى فتح علامة تبويب جديدة تتيح لك التحكم في قطرتك.

بدلاً من ذلك، يمكنك استخدام أي عميل SSH مع عنوان IP وبيانات اعتماد المستخدم الموجودة في البريد الإلكتروني. عند تسجيل الدخول لأول مرة، وبما أنك استخدمت المصادقة بكلمة المرور، سيُطلب منك تعيين كلمة مرور جديدة. من الطرق الممتازة لإنشاء كلمات مرور آمنة وتخزينها هو استخدام مدير كلمات مرور مثل LastPass.

نشر تطبيق الويب المبني على Node.js

أولاً، ستحتاج إلى نسخ شيفرة تطبيق الويب الخاص بك إلى قطرتك (droplet). إذا كنت تستخدم نظام تحكم بالمصادر مثل Git، فالأمر بسيط مثل تثبيت Git باستخدام الأمر apt-get install git -y، ثم استخدام أمر git clone (رابط المستودع الخاص بك)، مع إضافة رابط مستودعك في النهاية.

ثانيًا، ستحتاج إلى تثبيت Node.js. اكتب الأمر التالي:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

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

اكتب cd ثم اسم المجلد الذي يظهر. اكتب ls مرة أخرى ويجب أن ترى ملفات الدليل الجذر لتطبيق الويب الخاص بك.

بعد ذلك، ستحتاج إلى تثبيت وحدات Node (التبعيات dependencies) لتطبيق الويب الخاص بك. إذا قمت بتثبيت جميع وحداتك باستخدام المعامل --save في النهاية، والذي يحفظها في ملف package.json، فما عليك سوى كتابة npm install والضغط على Enter. إذا لم يكن الأمر كذلك، فعند تشغيل npm start، سيظهر خطأ يفيد بعدم العثور على الوحدة (module not found). اكتب npm install (اسم الوحدة) واضغط على Enter ثم حاول تشغيل npm start مرة أخرى. كرر العملية حتى يختفي الخطأ.

إذا كنت بحاجة إلى تثبيت MongoDB (إذا كنت قد أنشأت قاعدة بيانات MongoDB)، فاتبع هذه التعليمات.

أخيرًا، اكتب npm start لبدء تشغيل تطبيق الويب الخاص بك.

الآن بعد أن أصبح تطبيق الويب الخاص بك يعمل، في علامة تبويب جديدة بالمتصفح، اكتب عنوان IP الخاص بقطرتك (الموجود في البريد الإلكتروني الذي أرسلته DigitalOcean عند إنشاء القطرة) متبوعًا بنقطتين ورقم المنفذ الذي يعمل عليه تطبيقك. على سبيل المثال: 167.172.54.51:8080.

إذا كنت تستخدم خادم ويب Express (وهو ما فعلته إذا اتبعت دليل البدء الخاص بي مع Node.js)، فستجد رقم المنفذ في سطر app.listen() داخل ملف server.js. على سبيل المثال: app.listen(8080) وهو منفذ شائع الاستخدام.

تهانينا، يجب أن يظهر تطبيق الويب الأول الخاص بك المبني على Node.js في متصفح الويب الخاص بك وهو يعمل على قطرة DigitalOcean الخاصة بك.

تكوين اسم النطاق الخاص بك

لقد قمت بإدخال عنوان IP ورقم منفذ لعرض تطبيق الويب الخاص بك ولكن، ألا تفضل اسم نطاق مخصصًا مثل yourapp.com؟

بافتراض أنك قد اشتريت نطاقًا بالفعل، فإن الخطوة الأولى هي إضافة سجل DNS لكي يتم توجيه اسم نطاقك إلى عنوان IP الخاص بقطرة DigitalOcean. يخبر سجل DNS متصفحك بما يجب فعله عند تحميل نطاقك. في هذه الحالة، يجب أن يتجه إلى عنوان IP الخاص بقطرتك.

إذا لم تكن قد اشتريت نطاقًا، فإن مسجلي النطاقات مثل Namecheap يبيعون أسماء النطاقات وغالبًا ما يقدمون خدمات أخرى مثل البريد الإلكتروني واستضافة المواقع الثابتة أو مواقع إدارة المحتوى (CMS)، على الرغم من وجود فوائد للتعامل مع مزود استضافة وبريد إلكتروني متخصص. تقدم Netlify استضافة للمواقع الثابتة و SiteGround لمواقع CMS. ويعتبر Office365 و GSuite روادًا في توفير خدمات البريد الإلكتروني المخصص.

سجل الدخول إلى مسجل النطاقات الخاص بك وانتقل إلى إعدادات DNS المتقدمة لنطاقك. على سبيل المثال، في Namecheap، تكون علامة التبويب “Advanced DNS” في شاشة “Manage Domain“.

تريد إضافة سجل جديد على النحو التالي: يجب تعيين النوع (type) على A، ويجب أن يكون المضيف (host) إما @ أو فارغًا (حسب مزودك)، ويجب أن تكون القيمة (value) هي عنوان IP الخاص بقطرتك. كرر العملية للمضيف www الذي سيفعل الشيء نفسه لإصدار www من نطاقك.

قد تستغرق التغييرات ما يصل إلى 24-48 ساعة للمعالجة، ولكنها عادةً ما تكون بين 15 دقيقة وساعة. طريقة سريعة للتحقق عند الانتهاء هي الانتقال إلى DNSChecker. اكتب اسم نطاقك وتأكد من تعيين النوع على A. عندما تكون النتيجة عنوان IP الخاص بقطرتك، تكون قد ربطت نطاقك بنجاح. الاختبار الأخير هو كتابة اسم نطاقك متبوعًا بنقطتين ثم رقم المنفذ (على سبيل المثال: yourdomain.com:8080). يجب أن ترى الآن تطبيق الويب الخاص بك يتم تحميله.

إزالة رقم المنفذ من عنوان URL الخاص بك

الآن بعد أن قمت بربط اسم نطاق جذاب بتطبيق الويب الخاص بك، سترغب على الأرجح في إزالة رقم المنفذ المزعج من عنوان URL. يمكننا تحقيق ذلك عن طريق إعداد ما يُعرف بالوكيل العكسي (reverse proxy). سيخبر الوكيل العكسي قطرتك (droplet) أنه عندما ينتقل المستخدم إلى yourdomain.com، يجب أن يقدم الموقع الموجود على yourdomain.com:8080. سنستخدم الوكيل العكسي الشهير Nginx للقيام بذلك.

الخطوة الأولى هي تثبيت Nginx. اكتب الأوامر التالية لتحديث قائمة حزمك (للحصول على أحدث إصدار) وتثبيت Nginx:

sudo apt-get update
sudo apt-get install nginx

نظرًا لأن قطرات DigitalOcean تُنشأ مع تمكين جدار الحماية (firewall)، سيتعين عليك السماح لـ Nginx بالمرور عبره ليعمل بشكل صحيح. سيقوم الأمر sudo ufw allow 'Nginx Full' بذلك. للتحقق من أن التثبيت قد سار بسلاسة، انتقل إلى إصدار http من اسم نطاقك، على سبيل المثال: http://yourdomain.com. إذا رأيت صفحة ترحيب Nginx، فهذا يعني أن العملية كانت ناجحة.

الخطوة الثانية هي تأمين الوكيل العكسي الخاص بك. حاليًا، الانتقال إلى https://yourdomain.com لن يعمل. هذا لأننا لم نقم بتكوين شهادة SSL بعد، ونحتاج إلى تثبيت حزمة تسمى Certbot للقيام بذلك. لتثبيت Certbot، اكتب ما يلي لضمان حصولك على أحدث إصدار:

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get install python-certbot-nginx

بعد ذلك، تحتاج إلى إضافة نطاقك إلى Nginx حتى يتمكن Certbot من إنشاء شهادة للنطاق الصحيح. افتح ملف التكوين باستخدام sudo nano /etc/nginx/sites-available/default واستبدل الشرطات السفلية في سطر server_name بنطاقك. على سبيل المثال: server_name yourdomain.com www.yourdomain.com;. احفظ الملف واخرج بالضغط على CTRL+x، ثم y، ثم Enter. لاختبار عدم وجود أخطاء في الملف، اكتب sudo nginx -t، وإذا لم يكن هناك أي أخطاء، فاكتب sudo systemctl reload nginx لإعادة تحميل Nginx بحيث يستخدم التكوين المحدث.

الآن نحتاج فقط إلى إنشاء شهادة SSL. سيبدأ الأمر sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com العملية. يجب عليك اختيار الخيار 2 لعملية إعادة التوجيه (redirect) لأنه سيعيد توجيه أي شخص يحاول الوصول إلى الإصدار غير الآمن من موقعك (http) إلى الإصدار الآمن (https) بدلاً من ذلك. لاختبار ذلك، انتقل إلى https://yourdomain.com ويجب أن ترى شاشة ترحيب Nginx مرة أخرى.

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

اكتب: sudo nano /etc/nginx/sites-available/default لتعديل ملف التكوين الافتراضي. تحتاج إلى تغيير معلمة server_name إلى اسم نطاقك. على سبيل المثال: yourdomain.com. تحت location /، يجب تغيير proxy_pass إلى http://localhost:(اسم المنفذ). يجب تعديل ssl_certificate_key إلى: /etc/letsencrypt/live/(اسم النطاق)/privkey.pem. أخيرًا، أضف كتلة الشيفرة أدناه إلى نهاية الملف ثم اضغط CTRL+X، ثم y للخروج.

server {
    if ( $host = auroraspotter.space) {
        return 301 https:// $host $request_uri ;
    } # managed by Certbot

    listen 80 default_server;
    listen [::]:80 default_server;

    server_name auroraspotter.space;

    return 404; # managed by Certbot
}

إليك مثال كامل لما يجب أن يبدو عليه التكوين. ملاحظة: يجب أن يكون server_name هو اسم نطاقك.

server {
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name auroraspotter.space; # استبدل auroraspotter.space بنطاقك

    location / {
        proxy_set_header X-Real-IP $remote_addr ;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for ;
        proxy_set_header X-NginX-Proxy true ;
        proxy_pass http://localhost:8080; # استبدل 8080 برقم منفذ تطبيقك
        proxy_set_header Host $http_host ;
        proxy_cache_bypass $http_upgrade ;
        proxy_redirect off;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/auroraspotter.space/fullchain.pem; # استبدل auroraspotter.space بنطاقك
    ssl_certificate_key /etc/letsencrypt/live/auroraspotter.space/privkey.pem; # استبدل auroraspotter.space بنطاقك
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ( $host = auroraspotter.space) {
        return 301 https:// $host $request_uri ;
    } # managed by Certbot


    listen 80 default_server;
    listen [::]:80 default_server;

    server_name auroraspotter.space; # استبدل auroraspotter.space بنطاقك

    return 404; # managed by Certbot
}

لاختبار عدم وجود أخطاء في الملف، اكتب sudo nginx -t. إذا لم يكن هناك أي أخطاء، فاكتب sudo systemctl reload nginx لإعادة تحميل Nginx بحيث يستخدم التكوين المحدث. أخيرًا، يجب أن تكون قادرًا على الانتقال إلى yourdomain.com وسيعمل تطبيق الويب الخاص بك.

تشغيل التطبيق عند الإقلاع (إعداد مدير العمليات)

لقد قمت بربط اسم نطاقك بقطرتك (droplet) وكونت Nginx لتقديم تطبيق الويب الخاص بك، ولكن كيف تحافظ على تشغيله طوال الوقت، خاصة بعد إعادة تشغيل قطرتك؟ هنا يأتي دور مدير العمليات (process manager). سيتولى هذا المدير إدارة تطبيق الويب الخاص بك المبني على Node.js، ويسجل أي أخطاء، ويبدأه/يوقفه حسب الحاجة.

سنستخدم مدير العمليات المسمى PM2.

الخطوة الأولى هي تثبيت PM2 باستخدام الأمر: sudo npm install pm2@latest -g.

بعد ذلك، لتشغيله عند الإقلاع، قم بتشغيل الأمر: pm2 startup systemd. يجب أن يطلب منك إعداد نص بدء التشغيل (startup script)، قم بنسخ ولصق الأمر التالي، والذي سيكون: sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u (اسم المستخدم) --hp /home/(اسم المستخدم). إذا كنت تستخدم تسجيل الدخول الافتراضي الذي قدمته DigitalOcean، فسيكون اسم المستخدم هو root. اكتب هذا في الطرفية واضغط Enter. إذا ظهرت رسالة “command successfully executed” (كما هو موضح أدناه)، فهذا يعني أنه قد نجح.

[ 'systemctl enable pm2-root' ]
[PM2] Writing init configuration in /etc/systemd/system/pm2-root.service
[PM2] Making script booting at startup...
[PM2] [-] Executing: systemctl enable pm2-root...
[PM2] [v] Command successfully executed.

باستخدام الأمر cd، انتقل إلى مجلد تطبيق الويب الخاص بك. ثم اكتب pm2 start server.js. سيؤدي هذا إلى بدء تشغيل تطبيق الويب باستخدام PM2. بعد ذلك، اكتب pm2 save والذي سيحفظه ليتم تشغيله عند الإقلاع. إذا ظهرت رسالة “successfully saved“، فهذا يعني أنه تم حفظه بشكل صحيح.

[PM2] Saving current process list...
[PM2] Successfully saved in /root/.pm2/dump.pm2

أخيرًا، اكتب sudo systemctl start pm2-(اسم المستخدم). حاول إعادة تشغيل قطرتك عن طريق كتابة reboot، وبعد بضع دقائق، انتقل إلى yourdomain.com. يجب أن يكون تطبيق الويب الخاص بك يعمل بشكل طبيعي.

إذا كنت تتطلع إلى البناء على المهارات التي تعلمتها في هذا الدليل، أقترح استخدام قوالب EJS للعمل مع واجهات برمجة التطبيقات (APIs) وقواعد البيانات.

الخلاصة التقنية

لقد قطعنا شوطًا طويلاً في هذا الدليل، بدءًا من تحويل موقع ويب ثابت بسيط إلى تطبيق ويب ديناميكي متكامل (Full-Stack) باستخدام Node.js وإطار عمل Express ومحرك القوالب EJS. هذه الرحلة لا تقتصر على مجرد بناء تطبيق، بل تمثل أساسًا متينًا لفهم كيفية عمل تطبيقات الويب الحديثة، وكيفية دمج جانب الخادم مع الواجهة الأمامية بسلاسة.

إن اختيار EJS كبديل لأطر عمل JavaScript المعقدة مثل React أو Angular يقدم مسارًا أسهل للمبتدئين للتعمق في تطوير الويب المتكامل، مع الحفاظ على القدرة على إنشاء محتوى ديناميكي وفعال. كما أن عملية النشر على DigitalOcean، وتكوين DNS، وتأمين التطبيق بشهادات SSL عبر Nginx، وإدارة العمليات باستخدام PM2، كلها خطوات حاسمة تحول المشروع من مجرد فكرة على الجهاز المحلي إلى خدمة ويب حية ومتاحة للعالم.

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