كيفية نشر تطبيق Node.js (Express.js) باستخدام Docker على Ubuntu 20.04

Hark Labs2021-10-15 · 34 min read

كيفية نشر تطبيق Node.js (Express.js) باستخدام Docker على Ubuntu 20.04

مقدمة

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

تبدأ عملية بناء تطبيق باستخدام Docker بقيام المطور بإنشاء صورة لتطبيقه. بعد ذلك، سيتم نشر الصورة داخل حاوية. تحتوي الصورة على المكونات المحددة للتطبيق مثل كود التطبيق، والمكتبات، وملفات التكوين، ومتغيرات البيئة، وبيئة التشغيل. تعمل الصورة على توحيد البيئة داخل الحاوية مما يمنح تقنية الحاويات خصائص قابلية النقل. Node.js هي بيئة تشغيل جافا سكريبت خلفية مفتوحة المصدر ومتعددة المنصات يمكنها تنفيذ كود جافا سكريبت خارج متصفح الويب. تم بناؤها فوق محرك V8 JavaScript Engine. Express.js هو إطار عمل جافا سكريبت خلفي بسيط يعمل فوق Node.js.

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

المتطلبات الأساسية

سيكون هذا برنامجًا تعليميًا عمليًا. يجب عليك إنشاء بيئة تمكنك من المتابعة.

يجب أن يكون لديك نسخة مثبتة من Ubuntu 20.04 كبيئة تشغيل أولية و إنشاء مستخدم غير جذر بصلاحيات sudo. قم بتسجيل الدخول باستخدام المستخدم غير الجذر وتابع الخطوات التالية.
تحتاج إلى تثبيت Docker. اتبع الخطوات 1 و 2 و 3 و 4 من برنامجنا التعليمي حول كيفية تثبيت وتشغيل Docker على Ubuntu. يجب أن يعمل هذا مع أي توزيعة Ubuntu.
أنشئ حسابًا على Docker Hub إذا لم يكن لديك حساب بالفعل. يمكنك اتباع هذا الرابط للحصول على دليل البدء السريع لـ Docker Hub.
قم بتثبيت Node.js و NPM. يعد NPM مدير حزم جافا سكريبت. يمكنك اتباع هذه التعليمات الخاصة بتثبيت Node و npm.

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

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

mkdir node_express

1	mkdir node_express

بعد ذلك، انتقل إلى هذا الدليل:

cd node_express

1	cd node_express

سيكون هذا هو الدليل الجذري لتطبيقك. يتوقع تطبيق node.js وجود ملف package.json في المجلد الجذري. Npm يستخدم هذا الملف لتحديد التبعيات التي يحتاجها تطبيقك. أدخل الأمر التالي لإنشاء هذا الملف:

nano package.json

1	nano package.json

بعد ذلك، أضف مقتطف الكود التالي إلى الملف. يمكنك تحديث الاسم والمؤلف والوصف وملف نقطة الدخول كما تريد:

{
"name": "node-express-docker-image",
"version": "1.0.0",
"description": "Nodejs Express Docker Image Example",
"author": "hackins",
"main": "index.js",
"license": "ISC",
"keywords": [
"nodejs",
"express",
"bootstrap"
],
"dependencies": {
"express": "^4.17.1"
}
}

{

"name": "node-express-docker-image",

"version": "1.0.0",

"description": "Nodejs Express Docker Image Example",

"author": "hackins",

"main": "index.js",

"license": "ISC",

"keywords": [

"nodejs",

"express",

"bootstrap"

"dependencies": {

"express": "^4.17.1"

}

كما ترى، يحدد هذا الملف اسم المشروع وإصداره ومؤلفه والترخيص الذي سيتم بموجبه مشاركة كود التطبيق. يوصى باستخدام اسم قصير ووصفي لمشروعك لتجنب التكرار في npm registry. لقد حددنا ISC license للمشروع والذي يسمح بنسخ كود التطبيق أو تعديله أو توزيعه مجانًا.

الأهم من ذلك، يجب عليك ملاحظة التوجيهات التالية في الملف:

“main”: يحدد هذا التوجيه نقطة الدخول للتطبيق، والتي قمنا بتعيينها كـ index.js. سنقوم بإنشاء هذا الملف قريبًا.
“dependencies”: يحدد هذا التوجيه تبعيات التطبيق التي سيتم سحبها من سجل npm عندما نقوم بتشغيل الأمر npm، في حالتنا، نريد إصدار Express 4.17.1 وما فوق.

يمكنك الآن حفظ الملف بالضغط على Ctrl + O. ثم إغلاق الملف بالضغط على Ctrl + X. بعد ذلك، سنقوم بتثبيت التبعيات عن طريق تشغيل الأمر التالي:

npm install

1	npm install

يقوم الأمر بتثبيت تبعيات التطبيق المحددة في ملف package.json داخل مجلدات node_modules. لقد تم إنشاؤها تلقائيًا عند تشغيل الأمر لأول مرة. مع تثبيت تبعيات تطبيقنا، يمكنك الآن البدء في إضافة كود التطبيق.

الخطوة 2: إضافة ملفات كود التطبيق الخاص بك

سنقوم بإنشاء موقع ويب أساسي للوصفات، مقدم من allrecipes. نقطة الدخول الرئيسية للتطبيق هي ملف index.js. سنقوم بإضافة مجلد views الذي سيحتوي على الصفحات المختلفة والأصول الثابتة للمشروع. سيحتوي موقع الويب على صفحة هبوط تحتوي على معلومات تمهيدية وروابط لبعض الوصفات.

سيتم وضع كود صفحة الهبوط الخاصة بنا في ملف home.html. أولاً، قم بإنشاء ملف index.js عن طريق إدخال الأمر التالي:

nano index.js

1	nano index.js

أضف الكود التالي، الذي يستورد وينشئ تطبيق Express. كما يحدد كائن Router، والدليل الأساسي، والمنفذ الذي سيتم تقديم هذا التطبيق عليه:

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/views/';
const port = 8090;

const express = require('express');

const app = express();

const router = express.Router();

const path = __dirname + '/views/';

const port = 8090;

require هي وظيفة JavaScript تقوم بتحميل وحدة (module). في هذه الحالة، نقوم بتحميل وحدة express. بعد ذلك، سنستخدم الوحدة المستوردة لإنشاء كائني express و router. يقوم كائن router بوظائف التوجيه للتطبيق من خلال الاستجابة لاستدعاءات أساليب HTTP التي ستتم إضافتها إلى هذا الكائن مع تقدمنا في البرنامج التعليمي.

لقد قمنا أيضًا بتعيين path و port. يحدد الثابت path الدليل الأساسي للكود. في حالتنا، هو الدليل الفرعي views داخل الدليل الجذري للمشروع. يحدد port المنفذ الذي يجب أن يستمع إليه تطبيق express، في مثالنا، قمنا بتعيينه إلى 8090.

بمجرد حصولنا على الثوابت، يمكننا تحديد بعض المسارات للتطبيق باستخدام كائن router. أضف الكود التالي إلى ملف index.js لتحديد المسارات:

router.use(function (req,res,next) {
console.log('/' + req.method);
next();
});

router.get('/', function(req,res){
res.sendFile(path + 'home.html');
});

router.get('/lasagna', function(req,res){
res.sendFile(path + 'lasagna.html');
});

router.get('/guacamole', function(req,res){
res.sendFile(path + 'guacamole.html');
});

router.get('/banana-bread', function(req,res){
res.sendFile(path + 'banana_bread.html');
});

router.use(function (req,res,next) {

console.log('/' + req.method);

next();

});

router.get('/', function(req,res){

res.sendFile(path + 'home.html');

});

router.get('/lasagna', function(req,res){

res.sendFile(path + 'lasagna.html');

});

router.get('/guacamole', function(req,res){

res.sendFile(path + 'guacamole.html');

});

router.get('/banana-bread', function(req,res){

res.sendFile(path + 'banana_bread.html');

});

يمكنك إضافة برمجيات وسيطة إلى المسارات باستخدام وظيفة router.use. في هذه الحالة، نضيف وظيفة تقوم بتسجيل طلبات الموجه قبل تمريرها إلى مسارات التطبيق. سيؤدي طلب GET إلى قاعدة التطبيق إلى إرجاع home.html الصفحة. بعد ذلك، قمنا بإضافة صفحات لثلاث وصفات سيتم استردادها أيضًا باستخدام طلب GET لصفحة الوصفة المحددة.

أخيرًا، أضف الكود التالي لتركيب router البرمجية الوسيطة والأصول الثابتة للتطبيق. بالإضافة إلى ذلك، اطلب من تطبيق express الاستماع على المنفذ 8090:

app.use(express.static(path));
app.use('/', router);

app.listen(port, function () {
console.log('Nodejs Express Example App listening on port ' + port)
})

app.use(express.static(path));

app.use('/', router);

app.listen(port, function () {

console.log('تطبيق Nodejs Express التجريبي يستمع على المنفذ ' + port)

})

ملف index.js الكامل يجب أن يبدو كالتالي:

const express = require('express');
const app = express();
const router = express.Router();

const path = __dirname + '/views/';
const port = 8090;

router.use(function (req,res,next) {
console.log('/' + req.method);
next();
});

router.get('/', function(req,res){
res.sendFile(path + 'home.html');
});

router.get('/lasagna', function(req,res){
res.sendFile(path + 'lasagna.html');
});

router.get('/guacamole', function(req,res){
res.sendFile(path + 'guacamole.html');
});

router.get('/banana-bread', function(req,res){
res.sendFile(path + 'banana_bread.html');
});

app.use(express.static(path));
app.use('/', router);

app.listen(port, function () {
console.log('Nodejs Express Example App listening on port ' + port)
})

const express = require('express');

const app = express();

const router = express.Router();

const path = __dirname + '/views/';

const port = 8090;

router.use(function (req,res,next) {

console.log('/' + req.method);

next();

});

router.get('/', function(req,res){

res.sendFile(path + 'home.html');

});

router.get('/lasagna', function(req,res){

res.sendFile(path + 'lasagna.html');

});

router.get('/guacamole', function(req,res){

res.sendFile(path + 'guacamole.html');

});

router.get('/banana-bread', function(req,res){

res.sendFile(path + 'banana_bread.html');

});

app.use(express.static(path));

app.use('/', router);

app.listen(port, function () {

console.log('تطبيق Nodejs Express التجريبي يستمع على المنف ' + port)

})

يمكنك حفظ الملف وإغلاقه الآن. الخطوة التالية هي إضافة صفحات الويب الثابتة إلى دليل views. ابدأ بإدخال الأمر التالي لإنشاء الدليل:

mkdir views

1	mkdir views

أدخل الأمر التالي لفتح home.html الخاص بصفحة الهبوط:

nano views/home.html

1	nano views/home.html

أضف الكود التالي إلى الملف. يستورد الكود Bootstrap ويقدم لزوار الموقع بعض المعلومات حول موضوع الموقع:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>وصفات رائعة</title>

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">

</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>
</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">الرئيسية</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">لازانيا</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">غواكامولي</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">خبز الموز</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">وصفة رائعة</h1>

<p class="lead text-muted">
ابحث عن إلهام الطبخ اليومي وشاركه من هذه الوصفات الرائعة. اكتشف الوصفات، والطهاة، ومقاطع الفيديو، والإرشادات بناءً على الطعام الذي تحبه والأصدقاء الذين تتابعهم.
<br />
<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker)</em>
</p>

</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>وصفات رائعة</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>

</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<a href="/" class="nav-link">الرئيسية</a>

</li>

<a href="/lasagna" class="nav-link">لازانيا</a>

</li>

<a href="/guacamole" class="nav-link">غواكامولي</a>

</li>

<a href="/banana-bread" class="nav-link">خبز الموز</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">وصفة رائعة</h1>

اعثر على إلهام الطبخ اليومي وشاركه من هذه الوصفات الرائعة. اكتشف الوصفات، والطهاة،

ومقاطع الفيديو، والإرشادات بناءً على الطعام الذي تحبه والأصدقاء الذين تتابعهم.

<br />

<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker الخاصة بنا)</em>

</p>

</div>

</section>

</main>

</body>

</html>

بالإضافة إلى استيراد Bootstrap، تضيف الصفحة أيضًا قائمة تنقل أساسية لمساعدتنا في التنقل عبر الصفحات والعودة إلى الصفحة الرئيسية. أضفنا أيضًا سطرًا لاستيراد ملف CSS المخصص لدينا:

<link href="css/custom.css" rel="stylesheet">

1	<link href="css/custom.css" rel="stylesheet">

سنستخدم هذا الملف لإضافة تنسيق مخصص إلى التطبيق لاحقًا. الآن، لنقم بإنشاء الصفحات الثلاث للوصفات. نبدأ أولاً بإنشاء صفحة اللازانيا . افتح الملف باستخدام محرر nano باستخدام الأمر التالي:

nano views/lasagna.html

1	nano views/lasagna.html

في الملف المفتوح، أضف الكود التالي. سيقوم هذا الملف باستيراد Bootstrap، وملف custom.css ، وتحديد قائمة تنقل وتقديم بعض المعلومات عن وصفة اللازانيا:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>وصفة اللازانيا</title>

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>
</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">الرئيسية</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">لازانيا</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">غواكامولي</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">خبز الموز</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">أفضل وصفة لازانيا</h1>

<p class="lead text-muted">
هذه أفضل لازانيا ستصنعها على الإطلاق.
<br />
<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker)</em>
</p>
<h3>المكونات</h3>
<ul class="list-group">
<li class="list-group-item">1 رطل سجق إيطالي حلو</li>
<li class="list-group-item">¾ رطل لحم بقر مفروم قليل الدسم</li>
<li class="list-group-item">½ كوب بصل مفروم</li>
<li class="list-group-item">2 فص ثوم مهروس</li>
<li class="list-group-item">1 علبة (28 أونصة) طماطم مهروسة</li>
<li class="list-group-item">2 علبة (6 أونصة) معجون طماطم</li>
<li class="list-group-item">2 علبة (6.5 أونصة) صلصة طماطم معلبة</li>
<li class="list-group-item">½ كوب ماء</li>
<li class="list-group-item">2 ملعقة كبيرة سكر أبيض</li>
<li class="list-group-item">1 ½ ملعقة صغيرة أوراق ريحان مجففة</li>
<li class="list-group-item">½ ملعقة صغيرة بذور الشمر</li>
<li class="list-group-item">1 ملعقة صغيرة بهارات إيطالية</li>
<li class="list-group-item">1 ½ ملعقة صغيرة ملح، مقسمة، أو حسب الرغبة</li>
<li class="list-group-item">¼ ملعقة صغيرة فلفل أسود مطحون</li>
<li class="list-group-item">4 ملاعق كبيرة بقدونس طازج مفروم</li>
<li class="list-group-item">12 شريحة معكرونة لازانيا</li>
<li class="list-group-item">16 أونصة جبن ريكوتا</li>
<li class="list-group-item">1 بيضة</li>
<li class="list-group-item">¾ رطل جبن موزاريلا، شرائح</li>
<li class="list-group-item">¾ كوب جبن بارميزان مبشور</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>وصفة اللازانيا</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>

</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<a href="/" class="nav-link">الرئيسية</a>

</li>

<a href="/lasagna" class="nav-link">لازانيا</a>

</li>

<a href="/guacamole" class="nav-link">غواكامولي</a>

</li>

<a href="/banana-bread" class="nav-link">خبز الموز</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">أفضل وصفة لازانيا</h1>

هذه أفضل لازانيا ستصنعها على الإطلاق.

<br />

<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker)</em>

</p>

<h3>المكونات</h3>

<li class="list-group-item">1 رطل سجق إيطالي حلو</li>

<li class="list-group-item">¾ رطل لحم بقر مفروم قليل الدسم</li>

<li class="list-group-item">½ كوب بصل مفروم</li>

<li class="list-group-item">2 فص ثوم، مهروس</li>

<li class="list-group-item">1 علبة (28 أونصة) طماطم مهروسة</li>

<li class="list-group-item">2 علبة (6 أونصة) معجون طماطم</li>

<li class="list-group-item">2 علبة (6.5 أونصة) صلصة طماطم معلبة</li>

<li class="list-group-item">2 ملعقة كبيرة سكر أبيض</li>

<li class="list-group-item">1 ½ ملعقة صغيرة أوراق ريحان مجففة</li>

<li class="list-group-item">½ ملعقة صغيرة بذور الشمر</li>

<li class="list-group-item">1 ملعقة صغيرة بهارات إيطالية</li>

<li class="list-group-item">1 ½ ملعقة صغيرة ملح، مقسمة، أو حسب الرغبة</li>

<li class="list-group-item">¼ ملعقة صغيرة فلفل أسود مطحون</li>

<li class="list-group-item">4 ملاعق كبيرة بقدونس طازج مفروم</li>

<li class="list-group-item">12 شريحة معكرونة لازانيا</li>

<li class="list-group-item">16 أونصة جبن ريكوتا</li>

<li class="list-group-item">¾ رطل جبن موزاريلا، شرائح</li>

<li class="list-group-item">¾ كوب جبن بارميزان مبشور</li>

</ul>

</div>

</section>

</main>

</body>

</html>

دعونا نتبع نفس العملية لإنشاء ملف لصفحة وصفة غواكامولي . افتح الملف باستخدام nano عن طريق تشغيل الأمر التالي:

nano views/guacamole.html

1	nano views/guacamole.html

ثم أضف هذا الكود إلى الملف:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>وصفة الجواكامولي</title>

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>
</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">الرئيسية</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">لازانيا</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">جواكامولي</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">خبز الموز</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">أفضل وصفة جواكامولي</h1>

<p class="lead text-muted">
يمكنك إعداد سلطة الأفوكادو هذه ناعمة أو خشنة حسب ذوقك.
<br />
<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker)</em>
</p>
<h3>المكونات</h3>
<ul class="list-group">
<li class="list-group-item">3 حبات أفوكادو - مقشرة، منزوعة النواة، ومهروسة</li>
<li class="list-group-item">عصير حبة ليمون حامض واحدة</li>
<li class="list-group-item">1 ملعقة صغيرة ملح</li>
<li class="list-group-item">½ كوب بصل مقطع مكعبات</li>
<li class="list-group-item">3 ملاعق كبيرة كزبرة طازجة مفرومة</li>
<li class="list-group-item">2 طماطم روما (برقوقية)، مقطعة مكعبات</li>
<li class="list-group-item">1 ملعقة صغيرة ثوم مفروم</li>
<li class="list-group-item">رشة واحدة من الفلفل الحار المطحون (اختياري)</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>وصفة الجواكامولي</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>

</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<a href="/" class="nav-link">الرئيسية</a>

</li>

<a href="/lasagna" class="nav-link">لازانيا</a>

</li>

<a href="/guacamole" class="nav-link">غواكامولي</a>

</li>

<a href="/banana-bread" class="nav-link">خبز الموز</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">أفضل وصفة غواكامولي</h1>

يمكنك جعل سلطة الأفوكادو هذه ناعمة أو خشنة حسب ذوقك.

<br />

<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker الخاصة بنا)</em>

</p>

<h3>المكونات</h3>

<li class="list-group-item">3 حبات أفوكادو - مقشرة، منزوعة النوى، ومهروسة</li>

<li class="list-group-item">1 ليمون حامض، معصور</li>

<li class="list-group-item">1 ملعقة صغيرة ملح</li>

<li class="list-group-item">½ كوب بصل مقطع مكعبات</li>

<li class="list-group-item">3 ملاعق كبيرة كزبرة طازجة مفرومة</li>

<li class="list-group-item">2 طماطم روما (برقوقية)، مقطعة مكعبات</li>

<li class="list-group-item">1 ملعقة صغيرة ثوم مفروم</li>

<li class="list-group-item">رشة واحدة من الفلفل الحار المطحون (اختياري)</li>

</ul>

</div>

</section>

</main>

</body>

</html>

أخيرًا، لنقم بإنشاء ملف banana_bread.html عن طريق إدخال الأمر:

nano views/banana_bread.html

1	nano views/banana_bread.html

ثم، أضف كود HTML التالي إلى الملف:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>وصفة خبز الموز</title>

<!-- ملف CSS الأساسي لـ Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">

<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-static-top navbar-expand-md">
<div class="container">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>
</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<div class="collapse navbar-collapse justify-content-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav justify-content-center">
<li class="active nav-item">
<a href="/" class="nav-link">الرئيسية</a>
</li>
<li class="nav-item">
<a href="/lasagna" class="nav-link">لازانيا</a>
</li>
<li class="nav-item">
<a href="/guacamole" class="nav-link">غواكامولي</a>
</li>
<li class="nav-item">
<a href="/banana-bread" class="nav-link">خبز الموز</a>
</li>
</ul>
</div>
</div>
</nav>

<main>

<section class="py-5 text-center container bg-light">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">

<h1 class="fw-light">أفضل وصفة لخبز الموز</h1>

<p class="lead text-muted">
لماذا تساوم على نكهة الموز؟ خبز الموز هذا رطب ولذيذ ومليء بنكهة الموز! الأصدقاء والعائلة يحبون وصفتي ويقولون إنها الأفضل على الإطلاق! إنه رائع ومحمص!! استمتع به!
<br />
<em>(لا شيء جدي، هذا مجرد تطبيق تجريبي لصورة node-express-docker)</em>
</p>
<h3>المكونات</h3>
<ul class="list-group">
<li class="list-group-item">2 كوب دقيق متعدد الاستخدامات</li>
<li class="list-group-item">1 ملعقة صغيرة بيكربونات الصودا</li>
<li class="list-group-item">¼ ملعقة صغيرة ملح</li>
<li class="list-group-item">½ كوب زبدة</li>
<li class="list-group-item">¾ كوب سكر بني</li>
<li class="list-group-item">2 بيضة، مخفوقة</li>
<li class="list-group-item">2⅓ كوب موز ناضج جداً ومهروس</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>

<!DOCTYPE html>

<head>

<title>وصفة خبز الموز</title>

crossorigin="anonymous">

</head>

<body>

<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">تبديل التنقل</span>

</button> <a class="navbar-brand" href="#">وصفات رائعة</a>

<a href="/" class="nav-link">الرئيسية</a>

</li>

<a href="/lasagna" class="nav-link">لازانيا</a>

</li>

<a href="/guacamole" class="nav-link">غواكامولي</a>

</li>

<a href="/banana-bread" class="nav-link">خبز الموز</a>

</li>

</ul>

</div>

</nav>

<main>

<h1 class="fw-light">أفضل وصفة لخبز الموز</h1>

لماذا تساوم على نكهة الموز؟ خبز الموز هذا رطب ولذيذ ومليء بنكهة الموز! يحب الأصدقاء والعائلة وصفتي ويقولون إنها الأفضل على الإطلاق! إنه رائع ومحمص!! استمتع به!

<br />

<em>(لا شيء جدي، هذا مخصص فقط لتطبيقنا التجريبي node-express-docker image)</em>

</p>

<h3>المكونات</h3>

<li class="list-group-item">2 كوب دقيق متعدد الاستخدامات</li>

<li class="list-group-item">1 ملعقة صغيرة بيكربونات الصودا</li>

<li class="list-group-item">¼ ملعقة صغيرة ملح</li>

<li class="list-group-item">2 بيضة، مخفوقة</li>

<li class="list-group-item">2⅓ كوب موز ناضج جداً ومهروس</li>

</ul>

</div>

</section>

</main>

</body>

</html>

الآن، قمنا بإنشاء جميع الصفحات. إذا كنت تتذكر، يتعين علينا إضافة ملف css/custom.css . أدخل الأمر التالي لإنشاء الدليل:

mkdir views/css

1	mkdir views/css

ثم قم بإنشاء الملف وفتحه في محرر nano باستخدام الأمر:

nano views/css/custom.css

1	nano views/css/custom.css

يمكنك إضافة المزيد من أكواد CSS لتنسيق موقع الويب الخاص بك كما تشاء. للإيجاز، دعنا نضيف مقتطف الكود التالي إلى الملف:

.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

.bd-placeholder-img {

font-size: 1.125rem;

text-anchor: middle;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size: 3.5rem;

}

احفظ الملف وأغلقه عند الانتهاء.

يمكنك بدء تشغيل التطبيق بما أننا نملك الآن كود مصدر التطبيق والتبعيات الخاصة بالمشروع مثبتة.

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

sudo ufw allow 8090

1	sudo ufw allow 8090

الآن، يمكنك بدء تشغيل التطبيق. ولكن أولاً، تأكد فقط من أنك في الدليل الجذري للمشروع عن طريق تشغيل الأمر التالي:

cd ~/node_express

1	cd ~/node_express

ابدأ تشغيل التطبيق باستخدام node index.js. إذا قمت بتحديد نقطة إدخال مختلفة، فاستبدلها بنقطة الإدخال الخاصة بك:

node index.js

1	node index.js

إذا قمت بالانتقال بمتصفحك إلى http://your_public_server_ip:8090، فسترى الصفحة الرئيسية للوصفات كما هي محددة:

يمكنك رؤية الروابط المؤدية إلى الوصفات المختلفة في شريط التنقل. دعنا ننقر على بعضها. أدناه لدينا صفحة وصفة Lasagna:

وهنا لدينا صفحة وصفة Guacamole:

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

الخطوة 3: إنشاء ملف Dockerfile

يقرأ Docker التعليمات المحددة في Dockerfile عند بناء الصور. وهو يحدد بيئة تشغيل التطبيق. وبالتالي، فإنه يساعد المطورين على تجنب التعارضات مع الاعتماديات أو تغيير إصدارات بيئة التشغيل. أدخل الأمر التالي لإنشاء Dockerfile:

nano Dockerfile

1	nano Dockerfile

يتم إنشاء صورة Docker باستخدام طبقات متعددة من الصور التي تبنى فوق بعضها البعض. تبدأ بإضافة صورة أساسية لتشكل نقطة البداية للتطبيق.

بما أن التطبيق يتوقع التشغيل في بيئة node.js، سنبدأ بإضافة صورة node:10-alpine لـ node.js. حاليًا، أثناء كتابة هذا البرنامج التعليمي، هذا هو إصدار LTS الموصى به لـ Node.js. لقد اخترنا هذه الصورة المحددة لأنها مشتقة من مشروع Alpine Linux. وبالتالي، ستساعد في إبقاء حجم صورتنا عند الحد الأدنى. هناك عدة متغيرات للصور تحت صفحة صور Node على Docker Hub التي يمكنك الاختيار من بينها بناءً على احتياجاتك.

أضف الكود التالي لتعيين الصورة الأساسية للتطبيق باستخدام توجيه FROM:

FROM node:10-alpine

1	FROM node:10-alpine

تتضمن هذه الصورة Node.js و npm. يجب أن يبدأ كل Dockerfile بتوجيه FROM. تأتي صورة Docker لـ node مع مستخدم node غير جذري افتراضيًا والذي يمكنك استخدامه لتشغيل حاوية تطبيقك كجذر. توصي معايير أمان Docker بعدم تشغيل الحاويات كجذر وتقييد الصلاحيات لتقتصر فقط على تلك المطلوبة لتشغيل مواردها.

في هذه الحالة، سنستخدم الدليل الرئيسي للمستخدم node كدليل عمل للتطبيق بالإضافة إلى المستخدم داخل الحاوية. يمكنك مراجعة دليل أفضل الممارسات لصورة Docker Node لمزيد من المعلومات.

سنقوم بإنشاء الدليل الفرعي node_modules داخل /home/node إلى جانب دليل التطبيق للمساعدة في تبسيط الأذونات الخاصة بكود التطبيق. يضمن إنشاء هذه الأدلة حصولها على الأذونات الصحيحة عندما نقوم بتشغيل الأمر npm install محليًا داخل الحاويات. بمجرد إنشاء الأدلة، يجب عليك تعيين ملكيتها للمستخدم node. سنقوم بذلك داخل Dockerfile عن طريق إضافة السطر التالي:

mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

1	mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

ثم ستقوم بتعيين دليل العمل عن طريق إضافة السطر التالي:

WORKDIR /home/node/app

1	WORKDIR /home/node/app

من الجيد دائمًا تعيين WORKDIR حتى لا يضطر Docker إلى إنشاء واحد افتراضيًا.

أضف السطر التالي لنسخ ملفات package.json و package-lock.json :

COPY package*.json ./

1	COPY package*.json ./

يوصى بإضافة تعليمة COPY قبل تشغيل npm install أو نسخ كود مصدر التطبيق. يتيح لك ذلك الاستفادة من آلية التخزين المؤقت لـ Docker. أثناء عملية البناء، يتحقق Docker مما إذا كان لديه طبقة مخزنة مؤقتًا لكل تعليمة. هذا يعني أنه إذا لم تقم بتغيير ملف package.json، فسيستخدم Docker طبقة الصورة الحالية ويتجنب إعادة تثبيت node modules، وبالتالي تسريع عمليات البناء.

قبل تشغيل npm install، أضف السطر التالي لتبديل المستخدم إلى node لضمان أن جميع ملفات التطبيق ودليل node_modules مملوكة لمستخدم node غير الجذري:

USER node

USER node

حاويتنا الآن جاهزة لتشغيل الأمر npm install. أضف السطر التالي إلى Dockerfile:

RUN npm install

1	RUN npm install

بمجرد تثبيت node_modules، أضف السطر التالي الذي سيخبر Docker بنسخ كود التطبيق إلى دليل التطبيق في الحاوية بالأذونات والملكية الصحيحة، أي مستخدم node غير الجذري:

COPY --chown=node:node . .

1	COPY --chown=node:node . .

الخطوة الأخيرة هي كشف المنفذ 8090 على الحاوية، كما حددنا في ملف المدخل index.js :

EXPOSE 8090
CMD [ "node", "index.js" ]

1 2	EXPOSE 8090 CMD [ "node", "index.js" ]

EXPOSE يحدد المنافذ التي ستكون مفتوحة على الحاوية في وقت التشغيل. CMD يقوم بتشغيل الأمر لبدء التطبيق، في هذه الحالة، node index.js.

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

يجب أن يبدو ملف Dockerfile الكامل الخاص بك كما يلي:

FROM node:10-alpine
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 8090
CMD [ "node", "index.js" ]

FROM node:10-alpine

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

WORKDIR /home/node/app

COPY package*.json ./

USER node

RUN npm install

COPY --chown=node:node . .

EXPOSE 8090

CMD [ "node", "index.js" ]

يمكنك الآن حفظ الملف وإغلاقه.

الشيء التالي الذي تفعله هو إضافة ملف .dockerignore . تمامًا مثل ملف .gitignore ، فإن ملف .dockerignore يحدد الملفات والمجلدات داخل مجلد المشروع التي لا ينبغي نسخها إلى الحاوية.

افتح الملف باستخدام محرر nano:

nano .dockerignore

1	nano .dockerignore

أضف الأسطر التالية داخل الملف:

node_modules
npm-debug.log
Dockerfile
.dockerignore

node_modules

npm-debug.log

Dockerfile

.dockerignore

إذا كنت تعمل مع مستودع git ، فيجب عليك أيضًا إضافة مجلد .git وملف .gitignore . احفظ الملف وأغلقه.

إذا سارت الأمور على ما يرام، فقد حان الوقت لبناء صورة التطبيق باستخدام أمر docker build . يمكنك إضافة علامة –t إلى أمر docker build لتسمية الصورة باسم يسهل تذكره بدلاً من السلسلة العشوائية التي يحددها docker افتراضيًا. سنقوم أيضًا بدفع الصورة إلى Docker Hub، لذا من الأفضل تضمين اسم مستخدم Docker Hub الخاص بك في العلامة.

سنستخدم nodejs-express-image كاسم للعلامة. أنت حر في اختيار اسم العلامة الذي تفضله. إليك الأمر لبناء الصورة:

sudo docker build -t your_dockerhub_username/nodejs-express-image .

1	sudo docker build -t your_dockerhub_username/nodejs-express-image .

تذكر استبدال your_dockerhub_username باسم مستخدم Docker Hub الفعلي الخاص بك. تحدد النقطة (.) في النهاية أن سياق البناء هو المجلد الحالي.

تستغرق عملية البناء دقيقة أو دقيقتين. بمجرد الانتهاء، أدخل الأمر للتحقق من صورك:

sudo docker images

1	sudo docker images

يجب أن ترى شيئًا كهذا:

تذكر أننا استبدلنا your_dockerhub_username باسم مستخدم حقيقي.

بعد التأكد من بناء صورتك، يمكنك الآن إنشاء حاوية باستخدام الصورة باستخدام docker run . سيتم تضمين العلامات التالية:

-p: ينشر المنفذ على الحاوية ويرسمه إلى منفذ على النظام المضيف. سنستخدم المنفذ 80 على النظام المضيف لأغراض العرض التوضيحي. ومع ذلك، إذا كان لديك عملية أخرى تعمل على هذا المنفذ، فلا تتردد في تعديل ذلك حسب الضرورة. تعرف على المزيد حول ربط المنافذ من وثائق Docker.
-d: للوضع المنفصل. يسمح للحاوية بالاستمرار في العمل في الخلفية.
--name: يمكنك استخدام هذا لتعيين اسم يسهل تذكره بدلاً من السماح لـ Docker بتعيين سلسلة عشوائية.

أمر بناء الحاوية هو كما يلي. استبدل اسم مستخدم Docker Hub الخاص بك بشكل مناسب:

sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

1	sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

انتظر حتى يتم بناء الحاوية وتبدأ في العمل. يمكنك استخدام هذا الأمر لفحص جميع الحاويات قيد التشغيل:

sudo docker ps

1	sudo docker ps

يجب أن ترى مخرجات مشابهة لما يلي:

كما هو موضح في المخرجات، فإن الحاوية تعمل الآن. يمكنك عرضها في المتصفح إذا قمت بزيارة عنوان IP العام لخادمك دون المنفذ في المتصفح. سيتم تحميل صفحتك الرئيسية:

لقد قمت بنشر موقع ويب ثابت Node Express بنجاح باستخدام Docker. دعنا نرى كيف يمكننا دفع هذه الصورة إلى Docker Hub لاستخدامها في المستقبل ولأغراض التوسيع.

الخطوة 4: العمل مع مستودعات صور Docker

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

استخدم الأمر التالي لتسجيل الدخول إلى حساب Docker Hub الخاص بك. استبدله باسم مستخدم Docker Hub الفعلي الخاص بك:

sudo docker login -u your_dockerhub_username

1	sudo docker login -u your_dockerhub_username

أدخل كلمة المرور الخاصة بك عندما يُطلب منك ذلك. بمجرد تسجيل الدخول، سيتم إنشاء ملف ~/.docker/config.json في الدليل الرئيسي للمستخدم الخاص بك والذي يحتوي على بيانات اعتماد Docker Hub الخاصة بك.

مع ضبط ذلك، أدخل الأمر التالي لدفع الصورة إلى Docker Hub، مع تحديد العلامة التي قمت بتعيينها عند بناء الصورة سابقًا:

sudo docker push your_dockerhub_username/nodejs-express-image

1	sudo docker push your_dockerhub_username/nodejs-express-image

يقوم هذا الأمر بدفع صورة docker إلى حساب Docker Hub الخاص بك. إذا قمت بزيارة حسابك، يمكنك رؤية الصورة التي قمت بدفعها مؤخرًا:

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

قم بسرد حاوياتك الحالية عن طريق إدخال الأمر:

sudo docker ps

1	sudo docker ps

يجب أن ترى مخرجات مشابهة لهذا:

لاحظ CONTAINER ID المدرج في مخرجاتك، وقم بنسخه، واستخدمه لإيقاف الحاوية الخاصة بك باستخدام الأمر، مع استبدال المعرف بالمعرف الخاص بك:

sudo docker stop 1bb2d65279bb

1	sudo docker stop 1bb2d65279bb

أدخل الأمر التالي لسرد جميع صور docker المتاحة في نظامك:

sudo docker images –a

1	sudo docker images –a

ستظهر المخرجات اسم صورتك، وصورة node.js، وصورًا أخرى من عملية البناء.

أدخل الأمر التالي لإزالة الصور، بما في ذلك الصور غير المستخدمة أو المعلقة:

sudo docker system prune

1	sudo docker system prune

اكتب y للتأكيد. يؤدي هذا إلى إزالة الحاويات والصور المتوقفة. إذا قمت بسردها، فسترى قائمة فارغة في المخرجات:

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

يمكننا الآن إعادة إنشاء العملية بأكملها عن طريق سحب الصورة أولاً من Docker Hub باستخدام الأمر التالي. استبدل اسم مستخدم Docker Hub الخاص بك بشكل مناسب:

sudo docker pull your_dockerhub_username/nodejs-express-image

1	sudo docker pull your_dockerhub_username/nodejs-express-image

قم بسرد صور Docker الخاصة بك مرة أخرى باستخدام الأمر:

sudo docker images

1	sudo docker images

يجب أن ترى الصورة في المخرجات:

يمكنك الآن إعادة بناء حاويتك باستخدام الأمر من الخطوة 3. بالطبع، استبدل اسم مستخدم Docker Hub الخاص بك حيثما كان ذلك مناسبًا:

sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

1	sudo docker run --name nodejs-express-image -p 80:8090 -d your_dockerhub_username/nodejs-express-image

قم بسرد حاوياتك للتأكد من أنه قد تم إعادة بنائها:

sudo docker ps

1	sudo docker ps

يجب أن ترى مخرجات مشابهة:

في متصفحك، انتقل إلى عنوان IP العام لخادمك ويجب أن ترى تطبيقك قيد التشغيل.

الخاتمة

إذا كنت قد تابعت البرنامج التعليمي حتى هذه النقطة، فلديك الآن موقع ويب ثابت تم إنشاؤه باستخدام Express و Bootstrap، وتم نشره باستخدام Docker. لقد استخدمت ملفات موقع الويب الثابت لبناء صورة Docker واستخدمت الصورة لإنشاء حاوية. ثم قمت بدفع الصورة إلى سجل صور Docker، Docker Hub، مما يجعلها متاحة للاستخدام المستقبلي أو لتوسيع نطاقها. لاختبار استخدام سجل الصور، قمت بتدمير الصور والحاويات، وسحبت الصور من السجل، وأعدت بناء الحاويات.

شرح هذا البرنامج التعليمي كيفية نشر تطبيق Node.js. إذا كنت ترغب في معرفة كيفية استخدام بيئة تطوير ويب مختلفة، فلدينا برنامج تعليمي حول نشر تطبيق Laravel باستخدام Docker Compose على Nginx.

لمزيد من الموارد حول استخدام Docker، راجع البرامج التعليمية التالية:

حوسبة سعيدة!

Hark Labs

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.

كيفية نشر تطبيق Node.js (Express.js) باستخدام Docker على Ubuntu 20.04

مقدمة

المتطلبات الأساسية

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

الخطوة 2: إضافة ملفات كود التطبيق الخاص بك

الخطوة 3: إنشاء ملف Dockerfile

الخطوة 4: العمل مع مستودعات صور Docker

الخاتمة

Hark Labs

التعليقات