كيفية نشر مشروعك من freeCodeCamp على AWS: دليل عملي للمبتدئين إلى الحوسبة السحابية

9 min read Aldawsari
دقائق القراءة: 9

مقدمة: لماذا يستحق تعلم النشر على السحابة وقتك؟

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

تعلم النشر على AWS لا يمنحك مجرد طريقة لعرض مشروعك، بل يعرّفك أيضاً على واحدة من أهم المهارات المطلوبة في وظائف البرمجة الحديثة: التعامل مع البنية السحابية، وإدارة الاستضافة، وفهم طريقة تقديم التطبيقات للمستخدم النهائي.

شرح نشر مشروع فرونت إند على منصة AWS للمبتدئين

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

  • النشر عبر AWS S3 للمواقع الثابتة.
  • النشر عبر AWS Elastic Beanstalk لتطبيقات الويب المدعومة بخادم.
  • النشر عبر AWS Lambda وAPI Gateway كمدخل إلى العالم Serverless.

المتطلبات الأساسية قبل البدء

  • إتمام مشروع واحد على الأقل من مشاريع الواجهة الأمامية في freeCodeCamp.
  • امتلاك حساب على AWS.
  • توفر ملفات مشروعك بصيغة HTML وCSS وJavaScript.
  • يفضّل وجود محرر شيفرة مثل Visual Studio Code.

ما معنى نشر المشروع تقنياً؟

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

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

ما هي AWS؟ مقدمة مختصرة في الحوسبة السحابية

Amazon Web Services هي منصة سحابية تقدم مئات الخدمات التقنية، بدءاً من تخزين الملفات وتشغيل الخوادم، وصولاً إلى الذكاء الاصطناعي وتحليل البيانات والشبكات الخاصة.

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

أهم مزايا الاعتماد على السحابة

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

لهذا السبب تظهر خبرة العمل على منصات مثل AWS أو Azure أو Google Cloud في كثير من الوصفات الوظيفية للمطورين.

الطريقة الأولى: نشر مشروع freeCodeCamp عبر AWS S3

ما هو S3؟

S3 اختصار لـ Simple Storage Service، وهو من أشهر خدمات التخزين في AWS. وظيفته الأساسية هي تخزين الكائنات أو الملفات، مثل الصور والفيديوهات وملفات HTML وCSS وJavaScript.

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

كيف تجهز مشروعك قبل رفعه إلى S3؟

إذا كان مشروعك موجوداً داخل CodePen، فابدأ بفصل الملفات إلى ثلاثة ملفات مستقلة داخل مجلد جديد، مثل random-quote-machine:

  • index.html
  • styles.css
  • main.js

إنشاء ملفات index.html وstyles.css وmain.js لتحضير المشروع للنشر

انسخ محتوى HTML من CodePen إلى ملف index.html، ومحتوى CSS إلى styles.css، ومحتوى JavaScript إلى main.js.

ربط الملفات داخل index.html

لأن CodePen يربط الملفات تلقائياً، ستحتاج هنا إلى إضافتها يدوياً داخل ملف index.html.

أضف وسم ربط التنسيقات أعلى وسم <body>:

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

وأضف وسم السكربت أسفل إغلاق </body>:

<script src="main.js"></script>

وتأكد أيضاً من وجود وسم <body> بشكل صحيح داخل الملف.

اختبار المشروع محلياً قبل النشر

قبل رفع الملفات إلى AWS، افتح ملف index.html مباشرة في المتصفح وتأكد أن المشروع يعمل. إذا كنت تستخدم مكتبات خارجية أو تنسيقات SASS أو إضافات كانت مفعلة داخل CodePen، فقد تحتاج إلى استيرادها عبر CDN.

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

الدخول إلى لوحة S3 وإنشاء Bucket

بعد تسجيل الدخول إلى AWS، ابحث عن S3 من الشريط العلوي ثم افتح لوحة الإدارة الخاصة به.

البحث عن خدمة S3 في لوحة تحكم AWSواجهة إدارة خدمة S3 في منصة AWS

اضغط على Create bucket، ثم اختر اسماً فريداً عالمياً للحاوية، مع الانتباه إلى أن الأسماء لا تقبل المسافات.

إدخال اسم فريد لحاوية S3 الجديدة

ضمن إعدادات الوصول العام، أزل تحديد خيار Block all public access ثم وافق على التحذير الظاهر، لأننا نريد أن يتمكن الزوار من فتح ملفات الموقع.

تعطيل الحظر العام للوصول في إعدادات حاوية S3

رفع ملفات المشروع إلى الحاوية

بعد إنشاء الحاوية، افتحها واضغط على Upload ثم اختر الملفات الثلاثة:

  • index.html
  • styles.css
  • main.js

من خيارات الرفع الإضافية، انتقل إلى Access control list (ACL) وفعّل صلاحية القراءة العامة Read للجميع، ثم وافق على التحذير.

تفعيل صلاحية القراءة العامة للملفات المرفوعة إلى S3

تفعيل استضافة الموقع الثابت

بعد رفع الملفات، افتح تبويب Properties داخل الحاوية.

فتح تبويب Properties في حاوية S3

مرر إلى قسم Static website hosting، واضغط Edit، ثم:

  • فعّل خيار Enable.
  • ضع index.html في خانة Index document.
  • ضع index.html أيضاً في خانة Error document إذا أردت معالجة بسيطة للأخطاء.

تفعيل استضافة الموقع الثابت داخل إعدادات S3

بعد الحفظ، سيظهر لك رابط Website endpoint الخاص بموقعك.

ظهور رابط Website endpoint بعد تفعيل الاستضافة على S3

عند فتح هذا الرابط، ينبغي أن يظهر مشروعك مباشرة على الإنترنت.

أشهر مشاكل S3 وكيف تحلها

  • تأكد من أنك رفعت الملفات الصحيحة نفسها التي عملت محلياً.
  • راجع أن خيار Block all public access معطل.
  • تأكد من منح صلاحية القراءة العامة للملفات.
  • أعد رفع الملفات إذا شككت بوجود خطأ أثناء الرفع.
  • تحقق من أسماء الملفات، خصوصاً index.html.

متى يكون S3 خياراً مناسباً؟

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

استخدامات إضافية مهمة لـ S3

  • تخزين ملفات JSON التي تسحبها تطبيقات الواجهة الأمامية.
  • أرشفة الملفات قليلة الاستخدام عبر Glacier.
  • الاحتفاظ بسجلات التشغيل Logs لتحليل الأعطال.
  • توفير مخزن مركزي تشترك فيه تطبيقات متعددة.

الطريقة الثانية: نشر المشروع عبر AWS Elastic Beanstalk

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

خدمة Elastic Beanstalk لنشر تطبيقات الويب على AWS

لماذا نحتاج Node.js وExpress.js هنا؟

في حالة S3، كانت المنصة تقدم ملف index.html مباشرة. أما هنا، فنحن سنجهز تطبيقاً بسيطاً يقوم بخدمة الملفات عبر خادم باستخدام Node.js وإطار العمل Express.js.

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

هيكل المشروع

داخل المشروع الذي سترفعه إلى Elastic Beanstalk ستجد مجلداً باسم public يحتوي على:

  • index.html
  • main.js
  • styles.css

انسخ ملفاتك العاملة إلى هذا المجلد، ثم اترك بقية الملفات كما هي، خصوصاً ملف app.js.

كيف يعمل ملف app.js؟

الفكرة الأساسية في الملف هي استيراد الوحدات المطلوبة ثم توجيه Express لخدمة الملفات الثابتة من مجلد public.

const express = require("express");
const path = require("path");
const app = express();

app.use(express.static(path.join(__dirname, "public")));

const port = 8080;
app.listen(port);
console.log("listening on port: " + port);

شرح مختصر للشيفرة

  • require("express") يستورد إطار Express.
  • require("path") يستورد وحدة التعامل مع المسارات.
  • express() ينشئ التطبيق.
  • express.static() يحدد أن الملفات الثابتة موجودة في مجلد public.
  • app.listen(port) يجعل التطبيق يستمع إلى الطلبات على المنفذ 8080.

اختبار التطبيق محلياً

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

npm start

تشغيل تطبيق Node وExpress محلياً باستخدام npm start

إذا ظهرت رسالة مشابهة لـ listening on port: 8080، فهذا يعني أن التطبيق يعمل.

رسالة نجاح تشغيل التطبيق على المنفذ 8080

بعدها افتح المتصفح وانتقل إلى localhost:8080 لمعاينة النتيجة.

إنشاء تطبيق على Elastic Beanstalk

من لوحة AWS ابحث عن خدمة Elastic Beanstalk، ثم افتحها واضغط على Create Application.

واجهة خدمة Elastic Beanstalk في AWS

أدخل اسم التطبيق.

إدخال اسم تطبيق Elastic Beanstalk

ثم اختر الإعدادات التالية:

  • Platform: Node.js
  • Platform Branch: Node.js 14 running on 64bit Amazon Linux 2 أو الإصدار المقترح من المنصة
  • ارفع كود المشروع بعد ضغطه في ملف ZIP

إعداد منصة Node.js داخل Elastic Beanstalk

ضغط المشروع ورفعه بشكل صحيح

هذه خطوة مهمة جداً: اضغط محتويات المجلد نفسه، وليس المجلد الخارجي بالكامل. أي يجب أن يحتوي ملف ZIP مباشرة على الملفات مثل app.js وpackage.json ومجلد public.

ضغط محتويات مشروع Elastic Beanstalk بالطريقة الصحيحة

بعد ذلك اضغط Upload and Deploy وارفع الملف المضغوط.

رفع مشروع مضغوط إلى Elastic Beanstalk

ستظهر لك سجلات النشر أثناء تجهيز البيئة وتشغيل التطبيق.

سجلات نشر التطبيق في Elastic Beanstalk

في البداية قد تظهر حالة الصحة Health باللون الأحمر، وهذا طبيعي مؤقتاً لأن AWS لا يزال ينشئ الموارد المطلوبة.

رابط التطبيق وحالة الصحة داخل Elastic Beanstalk

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

نجاح تشغيل تطبيق Elastic Beanstalk بحالة صحية سليمة

ماذا يجهز Elastic Beanstalk خلف الكواليس؟

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

نظرة عامة على إعدادات Elastic Beanstalk والخدمات المرتبطة به

ما هو EC2؟

EC2 هو خدمة تشغيل الخوادم الافتراضية في AWS. عندما تستخدم Elastic Beanstalk، تقوم المنصة غالباً بإنشاء مثيل EC2 Instance لتشغيل تطبيقك.

قسم Instances ضمن إعدادات Elastic Beanstalkعرض مثيل EC2 المستخدم لتشغيل التطبيق

ما هو Load Balancer؟

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

واجهة موازن الأحمال Load Balancer في AWS

ما هو Auto Scaling Group؟

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

قائمة مجموعات التوسع التلقائي Auto Scaling Groupsإعدادات السعة داخل Auto Scaling Groupسياسات التوسع التلقائي داخل Auto Scaling Group

ما دور CloudWatch؟

CloudWatch هو نظام المراقبة وجمع القياسات في AWS. من خلاله يمكن متابعة مؤشرات الأداء، مثل الشبكة والمعالج وعدد الطلبات، واستخدامها لتفعيل التوسع التلقائي أو التنبيهات.

تنبيه مهم حول التكلفة

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

الطريقة الثالثة: نشر المشروع عبر AWS Lambda وAPI Gateway

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

ماذا يعني Serverless؟

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

لماذا يفضّل المطورون هذا النموذج؟

  • تقليل الإعدادات المتعلقة بالبنية التحتية.
  • تقليل التكاليف لأن الدفع يكون غالباً حسب عدد مرات التنفيذ والزمن المستهلك.
  • الانسجام مع أسلوب Microservices لتقسيم التطبيقات إلى وظائف صغيرة مستقلة.

إنشاء دالة Lambda

من لوحة AWS Lambda اضغط على Create Function.

ثم اختر:

  • Author from scratch
  • اسم مناسب للدالة
  • بيئة التشغيل Node.js 14.x أو الإصدار المتاح الموصى به

إنشاء دالة Lambda جديدة باستخدام Node.js

بعد إنشاء الدالة ستصل إلى محرر الشيفرة المدمج. ستجد ملف index.js موجوداً، وأنشئ ملفاً جديداً باسم index.html.

إضافة ملف index.html داخل محرر AWS Lambda

تعديل المشروع ليتوافق مع Lambda

في هذا السيناريو من الأفضل دمج ملفات التنسيق والسكربت داخل ملف index.html نفسه، بدلاً من ربطها كملفات منفصلة. السبب هو أن التطبيق في هذا الشكل سيعيد صفحة واحدة، ولن نريد أن يبحث المتصفح عن مسارات إضافية منفصلة لملفات CSS وJS.

  1. استبدل سطر ربط التنسيقات <link href="styles.css" /> بوسم <style></style>.
  2. انسخ محتوى ملف styles.css وضعه بين وسمي <style> و</style>.
  3. احذف الإشارة إلى src="main.js" من وسم <script>.
  4. انسخ محتوى ملف main.js وضعه داخل وسم <script> في أسفل الصفحة.

بهذا يصبح ملف index.html مكتفياً ذاتياً، وهي طريقة عملية للتجارب التعليمية البسيطة في بيئات Serverless.

مقارنة سريعة بين طرق النشر الثلاث

الطريقة مناسبة لـ درجة التعقيد التكلفة المتوقعة
AWS S3 المواقع الثابتة منخفضة منخفضة جداً
Elastic Beanstalk تطبيقات الويب التي تحتاج خادماً متوسطة أعلى من S3
AWS Lambda الوظائف الصغيرة والتطبيقات Serverless متوسطة إلى متقدمة فعالة حسب الاستخدام

أي خيار تختار لمشروعك الأول؟

  • اختر S3 إذا كان مشروعك مجرد واجهة ثابتة.
  • اختر Elastic Beanstalk إذا أردت فهم بيئة أقرب إلى تطبيقات الإنتاج وخدمات AWS الأساسية.
  • اختر Lambda إذا كنت تريد التعرف مبكراً على فلسفة Serverless وتقليل الانشغال بالبنية التحتية.

أفضل ممارسات لتحسين الجودة والقبول في AdSense

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

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

نشر مشروعك على AWS ليس مجرد خطوة شكلية لعرض رابط على الإنترنت، بل هو انتقال فعلي من مرحلة كتابة الشيفرة إلى مرحلة فهم كيفية تشغيل التطبيقات في بيئة إنتاج. إذا كنت مبتدئاً، فابدأ بـ S3 لأنه الأسرع والأوضح. وإذا أردت تعميق فهمك للبنية السحابية، فانتقل إلى Elastic Beanstalk. أما إذا كان هدفك مواكبة التوجهات الحديثة في البنية البرمجية، فتعلم Lambda وبيئات Serverless سيكون استثماراً ممتازاً على المدى الطويل.

باختصار: كل طريقة من هذه الطرق تعلّمك طبقة مختلفة من عالم السحابة، والجمع بينها يمنحك أساساً عملياً قوياً يميزك في سوق العمل التقني.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *