الدليل النهائي لنشر تطبيقات Docker Apps

أحدث Docker ثورة في طريقة تطوير البرمجيات واختبارها ونشرها. فقد قضى على العديد من المشاكل الشائعة في نشر البرمجيات مثل مشاكل التوافق والاختلافات البيئية بين بيئات التطوير وبيئات الإنتاج.

في هذه المقالة، سنستكشف عملية نشر حاوية Docker في بيئة الإنتاج. سنتحدث عن الحاويات، و Docker، وفوائد استخدام Docker، وخيارات النشر الخاصة به. أخيرًا، سنشرح كيفية إنشاء تطبيق Next.js وإرساءه ونشره على حاويات Back4app – مجانًا تمامًا!

ما هي الحاويات؟

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

فوائد استخدام الحاويات

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

• قابلية النقل: يمكن نشر الحاويات في أي مكان!
• عزل التطبيق: تعزل الحاويات التطبيق وتوابعه عن النظام المضيف.
• فصل المسؤولية: يتم تقسيم العمل بين المطورين وفريق عمليات تكنولوجيا المعلومات.
• تطوير أسرع للتطبيقات: لا حاجة للعبث ببيئات التطوير المحلية، CI/CD.
• سهولة التوسع: يمكن للحاويات أن تتوسع بسهولة مع برنامج التنسيق.

لمزيد من المعلومات حول الحاويات ألق نظرة على ما هي الحاويات في الحوسبة السحابية؟

الحاويات مقابل الآلات الافتراضية

الأجهزة الافتراضية (VMs) هي تجريد للأجهزة المادية، بينما الحاويات افتراضية على مستوى نظام التشغيل. توفر الأجهزة الافتراضية (VMs) عزلة وأمانًا أكبر، بينما لا تشغل الحاويات مساحة كبيرة، وهي أكثر كفاءة وقابلية للتطوير.

من الممكن الجمع بين الحاويات والأجهزة الافتراضية للحصول على أفضل ما في كليهما.

ما هو Docker؟

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

وهي تقنية مستقرة ومختبرة في المعارك، وقد تم إصدارها في عام 2013. ومنذ ذلك الحين تم اعتمادها من قبل الكثير من الشركات الكبرى بما في ذلك Google، وAWS، وMicrosoft. وهو مدعوم بمجتمع ضخم من المطورين، مما يعني أنه يمكنك بسهولة العثور على المساعدة إذا واجهتك مشكلة في أي وقت.

ليست أداة Docker هي الأداة الوحيدة لتعبئة الحاويات في السوق، ولكنها الأداة الأكثر شعبية. بعض البدائل الرائعة تشمل Podman وLXD وcontainerd وBuildah.

فوائد استخدام Docker

بالإضافة إلى جميع مزايا تقنية الحاويات، تأتي Docker مع العديد من المزايا الأخرى. دعونا نلقي نظرة عليها.

خفيف الوزن

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

التحكم في الإصدار

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

تحسين التعاون

Docker Hub هو مستودع قائم على السحابة لتخزين صور Docker ومشاركتها وإدارتها، ولا حاجة لإنشاء صورة Docker من الصفر. يوفر موقعًا مركزيًا لاكتشاف صور Docker الشائعة ومشاركتها، بما في ذلك تلك التي أنشأها مجتمع Docker والصور الرسمية من بائعي البرامج. يتكامل بشكل وثيق مع Docker CLI و Docker Desktop.

قابلية التوسع

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

Docker والتطوير المحلي

أسهل طريقة لتشغيل Docker على جهازك المحلي هي تثبيت Docker Desktop. Docker Desktop هو تطبيق يوفر واجهة مستخدم رسومية سهلة الاستخدام وأدوات مطلوبة لبناء واختبار ونشر التطبيقات المعبأة في حاويات على جهازك المحلي. يتيح لك إدارة الحاويات والصور ووحدات التخزين. يحتوي على محرك Docker Engine مدمج و Docker CLI و Docker Compose.

بالإضافة إلى ذلك، يتيح لك استخدام امتدادات Docker Extensions التي يمكن أن تساعدك على أتمتة مهام سير العمل والمهام الخاصة بك. يجعل Docker Desktop من السهل عليك التعاون مع مطورين آخرين ولديه دعم Docker Hub مدمج رائع.

يتوفر Docker Desktop على أنظمة ويندوز وماك ولينكس.

خيارات نشر Docker Docker

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

1. الاستضافة التقليدية
2. البنية التحتية كخدمة (IaaS)
3. المنصة كخدمة (PaaS)
4. الحاوية كخدمة (CaaS)

بناءً على تجريدها يمكننا تصورها في مخطط هرمي على هذا النحو:

دعونا نحلل كل واحدة منها.

Docker والاستضافة التقليدية

كما قد تكون خمنت يمكن نشر حاويات Docker بسهولة على خادمك الخاص. لتشغيل Docker على الخادم الخاص بك، يجب عليك

1. قم بتثبيت محرك Docker Engine.
2. أنشئ صور Docker (محليًا) أو اسحبها من سجل الحاويات.
3. استخدم الصور لتدوير الحاويات.
4. قم بإعداد الشبكات ووحدات التخزين وجدار الحماية وما إلى ذلك.

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

Docker على IaaS

البنية التحتية كخدمة (IaaS) هي نموذج خدمة الحوسبة السحابية الذي يوفر موارد الحوسبة مثل الخوادم والشبكات وأنظمة التشغيل والتخزين في بيئة افتراضية. وعادةً ما يتم توفير هذه الخوادم السحابية للمؤسسة من خلال واجهات برمجة تطبيقات عالية المستوى أو لوحات تحكم متقدمة تمنح العملاء تحكمًا كاملاً في البنية التحتية بأكملها.

لا يختلف Docker على IaaS كثيرًا عن استخدام خادمك الخاص. إذا اخترت هذا النهج، سيكون عليك اتباع خطوات مشابهة لخطوات الاستضافة التقليدية.

بعض مزودي خدمات IaaS تشمل AWS وGCP وAzure.

Docker على PaaS

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

تعمل منصات PaaS التي تدعم Docker على تبسيط عملية النشر بشكل أكبر. عادةً ما يوفر بائعو PaaS أدوات رائعة تتيح لك نشر تطبيق Docker الخاص بك دون عناء.

لمعرفة المزيد عن المنصة كخدمة راجع ما هي المنصة كخدمة – المنصة كخدمة؟

Docker على CaaS

الحاوية كخدمة (CaaS) هي نوع من المنصة كخدمة (PaaS) التي توفر على وجه التحديد منصة لتشغيل التطبيقات المعبأة في حاويات وإدارتها. وهي مصممة لتسهيل تشغيل حاويات Docker والخدمات المصغرة وإدارتها وتوسيع نطاقها في السحابة.

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

ومن الأمثلة على CaaS: Back4app Containers وAWS ECS وAzure ACI وGoogle GKE.

لمعرفة المزيد عن CaaS راجع ما هي CaaS – الحاوية كخدمة؟

نشر حاوية Docker على حاويات Back4app

في هذا القسم من المقالة، سنقوم بترميز تطبيق Next.js بسيط وتهيئته ونشره على حاويات Back4app.

ما هي حاويات Back4app Containers؟

حاويات Back4app Containers هي منصة مجانية مفتوحة المصدر لنشر التطبيقات وتوسيع نطاقها على حاويات موزعة عالميًا. تسمح لك بالتركيز على برامجك وشحنها بشكل أسرع دون الحاجة إلى القلق بشأن DevOps. تتكامل المنصة بشكل وثيق مع GitHub، وتحتوي على نظام CI/CD مدمج، وتتيح لك تشغيل تطبيقك في دقائق!

لماذا نستخدم حاويات Back4app Containers؟

• يتكامل بشكل جيد مع GitHub
• عمليات النشر بدون تعطّل في الوقت المحدد لها
• سهلة الاستخدام وتتوفر بها فئة مجانية
• دعم عملاء ممتاز

مقدمة المشروع

سنقوم ببناء تطبيق ويب TODO بسيط مع تخزين دائم. سيسمح التطبيق للمستخدمين بإضافة المهام وإزالتها ووضع علامة على أنها منجزة. سنقوم ببنائه باستخدام Next.js و React و Zustand لإدارة الحالة واستمرار الحالة. أخيرًا، سنقوم بإرساء التطبيق ونشره على حاويات Back4app.

سيبدو المنتج النهائي بهذا الشكل:

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

• خبرة في JavaScript ES6
• فهم أساسيات React و Next.js
• القدرة على استخدام Git وGitHub

تطبيق الكود

تهيئة المشروع

لنبدأ بإنشاء مشروع Next.js جديد.

أسهل طريقة لتهيئة مشروع Next.js هي استخدام الأداة المساعدة Create-next-app. افتح جهازك الطرفي وشغّل الأمر التالي:

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

بعد ذلك، قم بتشغيل الخادم:

$ npm run dev

انتقل إلى http://localhost:3000 وسترى صفحة الهبوط Next.js الافتراضية.

Material UI

يمكننا أن نجعل عملية بناء واجهة المستخدم أسهل مع Material UI – مكتبة مكونات React التي تتبع تصميم المواد من Google. توفر هذه المكتبة مجموعة متنوعة من المكونات الجاهزة للاستخدام، مما يجعل إنشاء واجهات المستخدم أمرًا بسيطًا وفعالًا.

لا تتردد في تبديل Material UI بإطار عمل مختلف لواجهة المستخدم مثل React Bootstrap أو Ant Design.

لإضافة Material UI إلى مشروعك قم بتشغيل:

$ npm install @mui/material @emotion/react @emotion/styled

تستخدم Material UI خط Roboto افتراضيًا. لنقم بتثبيته مع:

$ npm install @fontsource/roboto

بعد ذلك، انتقل إلى _app.js.js وأضف الواردات التالية في أعلى الملف:

واجهة المستخدم

سيحتوي تطبيق الويب الخاص بنا على الصفحتين التاليتين:

1. / سيعرض قائمة المهام
2. /إضافة سيسمح للمستخدمين بإضافة مهمة جديدة

لنبدأ بصفحة الفهرس.

لجعل شيفرتنا أكثر تنظيمًا، أنشئ دليلًا جديدًا في جذر المشروع باسم المكونات. داخل هذا الدليل أنشئ ملفًا جديدًا باسم Task.js بالمحتويات التالية:

بعد ذلك، استخدم المكون الذي تم إنشاؤه حديثًا في index.js لعرض المهام:

1. استخدمنا خطاف React useState() لإنشاء حالة للمهام.
2. قمنا بتعبئة مصفوفة المهام ببعض البيانات الوهمية.
3. استخدمنا مكوّنات MUI ومكوّن المهام لعرض المهام (أو رسالة في حال عدم وجود أي مهام بعد).

تشغيل خادم التطوير:

$ npm run dev

انتقل إلى http://localhost:3000 وسترى قائمة المهام:

للمضي قدماً دعنا ننشئ صفحة لإضافة المهام.

انطلق وأنشئ ملفًا جديدًا باسم add.js داخل دليل الصفحات:

يعرض هذا الرمز نموذجًا بسيطًا يسمح للمستخدمين بإضافة مهام جديدة.

أعد تشغيل الخادم وانتقل إلى /إضافة أو انقر على زر “إضافة مهمة” في أعلى يمين الشاشة. يجب أن ترى شيئًا كهذا:

رائع، اكتملت واجهة المستخدم الآن. في الخطوة التالية، سنقوم بتنفيذ المنطق الفعلي والحالة الفعلية.

إدارة الدولة

للتعامل مع الحالة العامة سنستخدم Zustand – مكتبة إدارة حالة صغيرة وسريعة وقابلة للتطوير لتطبيقات React.

ابدأ بتثبيته عبر npm:

$ npm install zustand

بعد ذلك، علينا إنشاء متجر.

لجعل شيفرتنا أكثر تنظيمًا دعنا ننشئ مجلدًا مخصصًا باسم store للحالة العامة. داخل هذا المجلد أنشئ ملفًا باسم storage.js بالمحتويات التالية:

1. يقوم Zustand create() بإنشاء المخزن.
2. لحفظ الحالة في localStorage استخدمنا البرنامج الوسيط persist() لحفظ الحالة في localStorage.
3. المهام هي مصفوفة تحتوي على مهام المستخدم.
4. إضافة مهمة، وحذف مهمة، ووضع علامة مهمة منتهية هي طرق لمعالجة مصفوفة المهام.

آخر ما علينا فعله هو استعراض جميع الصفحات والمكونات التي تتطلب الحالة العامة وربطها.

ابدأ بالانتقال إلى index.js وتغييره هكذا:

لا تنس إضافة الاستيراد في أعلى الملف:

import useGlobalStore from "@/store/storage";

بعد ذلك، انتقل إلى المكونات/Task.js وقم بتغييره هكذا:

أخيرًا، انتقل إلى الصفحات/إضافة.js واجعل التعامل معSubmit() يرسل المهمة:

مرة أخرى، لا تنسى الاستيراد:

import useGlobalStore from "@/store/storage";

رائع، يستخدم تطبيق الويب الخاص بنا الآن Zustand للتعامل مع التخزين العام واستمراره عبر LocalStorage. لا تتردد في إعادة تشغيل التطبيق والتأكد من أن كل شيء يعمل.

تطبيق Dockerize

ستتطلب منك الخطوات التالية تثبيت Docker. أسهل طريقة لتثبيت Docker هي تنزيل Docker Desktop.

تحقق من أن لديك Docker قيد التشغيل:

$ docker --version

Docker version 20.10.22, build 3a2c30b

تكوين Next.js

أولاً، انتقل إلى التالي.config.js الخاص بك وقم بتعيين الإخراج على "مستقل" هكذا:

سيؤدي تغيير هذا الإعداد إلى إنشاء إصدار مستقل من تطبيق Next.js الخاص بنا مع الإصدار التالي. يمكن نشر تطبيق مستقل دون تثبيت node_modules. تأتي البنية المستقلة أيضًا مع خادم ويب مدمج.

Dockerfile

لإرساء تطبيقنا سنستخدم ملف Dockerfile. ملف D ockerfile هو ملف نصي عادي يسمح لنا بتعريف الصورة الأساسية والبيئة والمتغيرات البيئية والأوامر وإعدادات الشبكات ووحدات التخزين وما إلى ذلك.

أنشئ ملف Dockerfile في جذر مشروعك بالمحتويات التالية:

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

1. تقوم مرحلة التبعيات بنسخ ملف التبعيات وتثبيت التبعيات.
2. تقوم مرحلة المنشئ بنسخ التبعيات وبناء المشروع عبر npm.
3. تقوم مرحلة العداء بنسخ البناء المستقل وتقديمه عبر الخادم المستقل.

وأخيراً، كشفنا المنفذ الذي ستستخدمه حاويات Back4app لتعيين التطبيق.

للمزيد من المعلومات حول استخدام Docker مع Next.js ألق نظرة على مستودع مع-رصيف.

.dockerignore

قبل أن يقوم Docker ببناء صورة يبحث عن ملف .dockerignore . يتيح لنا ملف .dockerignore تحديد الملفات التي لا نريد تضمينها في الصورة. يمكن أن يقلل هذا من حجم الصورة بشكل كبير. يعمل بشكل مشابه لملف .gitignore.

أنشئ ملف .dockerignore في جذر المشروع بالمحتويات التالية :

تأكد من إضافة أي دلائل أو ملفات إضافية ترغب في استبعادها.

إنشاء الصورة وتشغيلها

للمضي قدمًا، لننشئ صورة Docker ونضع علامة عليها:

$ docker build -t nextjs-todo:1.0 .

إذا قمت بإدراج صورك يجب أن ترى الصورة الجديدة:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

وأخيراً، استخدم الصورة لتدوير حاوية Docker جديدة:

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

يمكنك استخدام -d لبدء تشغيل حاوية Docker في الوضع المنفصل. وهذا يعني أن الحاوية تعمل في خلفية جهازك الطرفي ولا تتلقى مدخلات أو تعرض مخرجات.

أحسنت، تطبيقك يعمل الآن في حاوية! انتقل إلى http://localhost:3000 وسترى تطبيق TODO الخاص بك.

GitHub

لنشر التطبيق على حاويات Back4app، سيتعين عليك تحميل شفرتك المصدرية إلى مستودع GitHub. امض قدمًا وأنشئ مستودعًا جديدًا على GitHub، وأضف جهاز التحكم عن بُعد، وأضف .gitignore، وارفع شفرتك البرمجية. بمجرد أن تكون شفرتك على GitHub انتقل إلى الخطوة التالية.

إذا كنت ترغب فقط في اختبار حاويات Back4app، فلا تتردد في استخدام ريبو Back4app-containers-nextjs ونشره بدلاً من ذلك.

انشر تطبيقك في حاويات Back4app

ستتطلب الخطوات التالية أن يكون لديك حساب Back4app. إذا كان لديك حساب بالفعل قم بتسجيل الدخول وإلا فقم بالتسجيل للحصول على حساب مجاني.

للعمل مع Back4app نحتاج أولاً إلى إنشاء تطبيق. عند تسجيل الدخول إلى لوحة التحكم الخاصة بك سترى قائمة تطبيقاتك. انقر على “إنشاء تطبيق جديد” لإنشاء تطبيق جديد.

بعد ذلك، حدد “الحاويات كخدمة”.

إذا لم تكن قد قمت بالفعل بتوصيل GitHub الخاص بك ب Back4app واستيراد المستودعات التي ترغب في نشرها. بمجرد توصيل GitHub الخاص بك سيتم عرض مستودعاتك في الجدول.

اختر المستودع الذي ترغب في نشره بالنقر على “تحديد”.

بعد ذلك، سيطلب منك Back4app تهيئة البيئة. اختر اسمًا للتطبيق، سأختار اسم Nextjs-todo. لا تتردد في ترك كل شيء آخر كما هو افتراضي.

وأخيراً، انقر على “إنشاء تطبيق” لإنشاء التطبيق تلقائياً ونشره.

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

انتظر بضع دقائق حتى يتم نشر التطبيق وفويلا! أصبح تطبيقك الآن متاحًا على حاويات Back4app. لرؤية تطبيقك قيد التشغيل انقر فوق عنوان URL الأخضر المعروض على اليسار.

الخاتمة

شرحنا خلال المقال ما هو Docker، وفوائده، وكيف يمكنك دمجه في سير عملك. بحلول الآن يجب أن تكون قادرًا على ترميز تطبيقات Next.js الخاصة بك وإرساءها ونشرها على حاويات Back4app.

الشيفرة المصدرية النهائية متاحة على مستودع Back4app-containers-nextjs GitHub.

الأسئلة الشائعة