سلسلة تجارب في التطوير (2): بيئة تطوير سحابية باستخدام GitHub Codespaces

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

بمعنى ان جهازك يبقى فارغ ، حتى ماتحتاج تحمل فيه أطر عمل أو برامج

أحد الحلول العملية لتحقيق هذا المفهوم هو نقل بيئة التطوير نفسها إلى الكلاود، وهنا يأتي دور GitHub Codespaces.

إذا ما سمعت ب GitHub ، هو منصة لاستضافة وإدارة الشيفرة المصدرية باستخدام Git ويُستخدم على نطاق واسع للتعاون بين المطورين، مراجعة الشيفرة البرمجة (الكود) وإدارة المشاريع البرمجية.

تنويه : متوقع منك قبل قراءة هذه السلسلة أن يكون عندك إلمام أساسي بالمفاهيم التالية+ سبق لك التعامل معها بشكل عملي.

المفهوم	التعريف المختصر	مصادر التعلّم
GitHub	منصة لإدارة الشيفرة المصدرية والتعاون بين المطورين، مبنية على نظام التحكم بالإصدارات Git، وتُستخدم لاستضافة المشاريع، إدارة الفروع، وطلبات الدمج.	https://docs.github.com/en/get-started
Container (Development Container)	بيئة تطوير معزولة يتم العمل بداخلها، تحتوي على الأدوات والمكتبات المطلوبة للمشروع، وغالبًا ما تكون مبنية باستخدام Docker.	https://docs.docker.com/get-started/
IDE (Integrated Development Environment)	أداة تطوير تُستخدم لكتابة وتشغيل وتصحيح الشيفرة، ويمكنها الاتصال بـ Codespaces لعرض بيئة التطوير سواء عبر المتصفح أو تطبيقات مثل VS Code أو JetBrains.	https://code.visualstudio.com/docs https://www.jetbrains.com/help/

طيب ، ماهو Github Codespaces

GitHub Repositories هو بيئة تطوير سحابية مرتبطة مباشرة ب

، تعمل داخل حاويات (Containers) مجهّزة بالأدوات اللازمة للتطوير، ويمكن فتحها مباشرة من المتصفح أو عبر VS Code او Jetbrains

ببساطة:بدل ما تجهّز البيئة على جهازك، GitHub يجهّزها لك.

لماذا نحتاج Codespaces؟

✓ بدون إعداد محلي

✓ نفس البيئة لجميع أعضاء الفريق

✓ يعمل من أي جهاز

✓ مناسب للتجارب، الورش، والتعلّم

✓ تكامل مباشر مع GitHub و repositories

الرسم البياني أدناه يوضح تدفق العمليات

الورشة العملية (Workshop)

أول ما تنشئ الريبو رح تطلعلك هالصفحة اضغط ع create codespace

بعدها صفحة ثانية تشرح لك الموضوع

وبعدها رح تفتح لك صفحة مشابهة للواجهة الرئيسية للVS code ومعها ايجنت copilot

حتى نبدأ التجربة رح أنشئ برنامج مبدئي Hello World من خلال الcommand line ,وبعدها push :

الآن ، بمجرد انك أنشأت كودسبيس .. تم إنشاء Default Codespace Container خاص لك وهو عبارة عن دوكر حسب الموثق في الموقع الرسمي لGithub , وهو مخصص لهذي الريبو الي انت الآن تشتغل عليها ، هل تقدر تغيره نعم ؟

بس كيف داخلياً تصير هذي الآلية ، إذا ضغطت  CMD + SHIFT + P رح يفتحلك خانة بحث فوق ، الخانة هذي عبارة عن أداة تحكم توفرها Github , الأداة هذي ماهي جزء من الدوكر الي انت فيه حالياً ، انما هي أداة خارجية ، تعلم Github ان الدوكر الحالي الي انت فيه ما ترغب فيه ، انما تطلب انشاء دوكر آخر لهذي الريبو

بعدها بخانة البحث هذي ، ممكن تكتب:

>Add Dev Container Configuration Files

في نفس الخانة (تقدر تختار اي لغة بس لغرض التجربة حالياً بنكتب .. ) :

Node.js & JavaScript 

اختر الفيرجن الي تبيه ،بعدها اختر الconfig ثم ok

احنا الآن أنشأنا دوكر جديد لهذي الريبو

نلاحظ انشاء مجلد devcontainer. في الExplore

هذا المجلد هو العقد بينك وبين البيئة.

داخله ملف الـdevcontainer.json وأحياناً Deockerfile

اذا فتحنا الـdevcontainer.json بنجد شيء مشابه :

{
	"name": "Node.js",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm",
	"features": {
		"ghcr.io/devcontainer-config/features/dot-config:3": {}
	}
}

هذي كلها تحددت في البداية لما اخترنا Dev Container Configuration أثناء إعداد الـ في الcodespace

يوفّر ملف devcontainer.json مجموعة واسعة من الخيارات التي تسمح بتخصيص بيئة التطوير بالكامل حسب احتياجات المشروع أو الفريق ، هي نفسها الي يحددها نوع الحاوية ،، فمثلا اذا تستخدم docker ، اكتب الاعدادات هنا مثل ما تكتبها بالدوكر

للاطلاع يُنصح بالرجوع إلى التوثيق الرسمي ل Dev Containers

كذلك : ملف devcontainer.json غالبًا يكون موجود داخل مجلد .devcontainer في الريبو.

و تقدر تحطه مباشرة في جذر الريبو، لكن وقتها لازم يكون اسم الملف يبدأ بنقطة:

.devcontainer.json

مشاركة نفس البيئة بين عدة ريبو

في الواقع الموضوع مو كذا بالضبط، فعلياً كل شخص عنده بيئته الخاصة بل انه عنده codespace. لكل ريبو

الفرق هنا ان الريبو تتشارك نفس الconfig file الي هو بحالتنا devcontainer.json

أنت وزميلك على نفس المشروع، كل واحد على جهازه الخاص، كل جهاز يحتوي على نسخة محلية من الكود، تبنون عليها، تطوّرونها، ثم تقومون بعمل push  للتغييرات إلى الـrepo في GitHub

القصة نفسها، لكن مكان بيئة العمل تغيّر، بدل ما يكون لكل شخص بيئة تطوير محلية على جهازه، صار لكل واحد Codespace  خاص به يحتوي على نسخة من الكود وبيئة التطوير كاملة.

ما زلتم تعملون بشكل مستقل، وكل واحد يطوّر ويعمل  push إلى نفس GitHub repo،لكن التنفيذ والتطوير يتم داخل بيئة سحابية مُدارة بدل الجهاز المحلي.

رح يكون عندك ٣ ملفات اساسية devcontainer.json ، لما المبرمج يفتح مشروع جديد ، يستخدم هذا الملف حسب نوعية المشروع الي عنده ، وبالتالي اذا كان السيرفر في codespace سبق وتعرف على هذي الملف الثلاثة ، ما يحتاج يحمل المكتبات في كل مرة لأنها مُعرفة عنده

طيب ، اذا كنا نلعب دور قائد فريق كيف أهيئ البيئة للفريق ؟

توفر  Github Codespace امكانية انشاء كونتينرات بإعدادات معدة مسبقاً ( predefined dev container configuration)

كقائد للفريق يمكنك إنشاء ٣–٤ ملفات إعدادات، ومشاركتها مع أعضاء الفريق، بحيث يستخدم كل شخص الملف المناسب لتخصصه ونوع المشاريع التي يعمل عليها.

فمثلًا، لو كان فريقك يعمل على ٢٠ مشروع بلغات مختلفة مثل بايثون، جافا، دوتنت، وReact، تقدر تنشئ أربعة ملفات إعدادات جاهزة.

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

طيب لو حطينا بالمجلد الواحد عدة ملفات إعدادات ؟

إذا حاب يكون عندك أكثر من إعداد لـ Dev Container في نفس الريبو، فكل إعداد لازم يكون في مجلد مستقل داخل المسار:

.devcontainer/SUBDIRECTORY/devcontainer.json

مثال:

.devcontainer/database-dev/devcontainer.json

.devcontainer/gui-dev/devcontainer.json

وفي حال كان عندك أكثر من ملف devcontainer.json، فكل Codespace يتم إنشاؤه باستخدام إعداد واحد فقط منها، وما تقدر تجمع أو تورّث الإعدادات بين الملفات، لأن كل ملف إعداد يعتبر مستقل تمامًا عن غيره.

ولو كان ملف devcontainer.json موجود داخل مجلد فرعي ويعتمد على ملفات ثانية، مثل Dockerfile أو سكربتات يتم تشغيلها من داخل الإعدادات، فالأفضل إنك تضعها في نفس المجلد، عشان يكون التنظيم أوضح وأسهل في الإدارة.

مثال:

هل أقدر استخدم codespace مع Jetbrains ؟

صحيح ممكن ، اقرأ هذه الصفحة

المعمارية الخاصة بكودسبيس

لعل الرسمة أدناه توضح البنية التحتية ، مع العلم التفاصيل الدقيقة غير واضحة بحكم ان Github هي الي تدير الاستضافة

بالنسبة للفرق الي تعمل في بيئة غير سحابية ، بمعنى أعمال حكومية أو شركات عندها شبكتها وخوادمها الخاصة ، أو إذا كانت طبيعة العمل تتطلب بقاء الكود والبيئة داخل الشبكة الداخلية بسبب السرية، هل يمكن استضافة GitHub Codespaces — مع GitHub — على خوادم فيزيائية خاصة (On‑Prem) بدل الاعتماد على السحابة؟

الإجابة لا.

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

المعمارية البديلة :