متغيرات البيئة وتنظيم الإعدادات
أنشئ طبقة إعدادات صغيرة: اقرأ متغيرات البيئة، وقدّم قيمًا افتراضية آمنة، وبدّل الإعدادات حسب NODE_ENV/APP_ENV. لا تشحن الأسرار إلى المتصفح مطلقًا.
متغيرات البيئة وتنظيم الإعدادات درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نحتاج إلى طبقة إعداد؟
الهدف: تجميع الإعدادات مركزيًا وإبعاد الأسرار عن حزمة العميل.
- قيم افتراضية آمنة
- تجاوزات خاصة بكل بيئة
- كشف المفاتيح العامة فقط
قائمة تحقق للإعدادات
- عرّف كائن config
- بدّل حسب علامة البيئة (مثل development/production)
- وفّر قيمًا افتراضية للمتغيرات المفقودة
- لا تُضمّن الأسرار مطلقًا (الرموز والمفاتيح)
عرض تجريبي: قارئ إعدادات صغير
قارئ إعدادات صغير مزوّد بقيم افتراضية. في المشاريع الفعلية، اقرأ متغيرات البيئة العامة من نظام البناء لديك.
<div id="root"></div>
عرض تجريبي: تبديل البيئة
حاكِ تبديلًا خاصًا بكل بيئة؛ إذ يعيد config حساب القيم باستخدام قيم افتراضية آمنة.
<div id="root"></div>
عرض تجريبي: استخدام الإعدادات المركزية
حافظ على وحدة config واحدة؛ واستوردها المكوّنات بدلًا من الوصول إلى env مباشرة.
<div id="root"></div>
نصائح ومزالق
- اكشف للعميل القيم غير الحساسة فقط
- فضّل استيراد config واحدًا مركزيًا
- أضف قيمًا افتراضية؛ وافشل مبكرًا عند فقدان القيم المطلوبة في البناء أو CI
اختبار أمان بيئة العميل
مراجعة سريعة
مراجعة سريعة: اجعل الإعدادات مركزية، وأضف القيم الافتراضية، وبدّل بينها حسب البيئة، واحتفظ بالأسرار على الخادم. تقرأ المكوّنات الإعدادات من وحدة config واحدة.
الأسئلة الشائعة
هل درس «متغيرات البيئة وتنظيم الإعدادات» مجاني؟
نعم — نص درس «متغيرات البيئة وتنظيم الإعدادات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «متغيرات البيئة وتنظيم الإعدادات»؟
أنشئ طبقة إعدادات صغيرة: اقرأ متغيرات البيئة، وقدّم قيمًا افتراضية آمنة، وبدّل الإعدادات حسب NODE_ENV/APP_ENV. لا تشحن الأسرار إلى المتصفح مطلقًا. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «متغيرات البيئة وتنظيم الإعدادات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ESLint وقواعد React وتكامل Prettier
- تسمية الملفات وحدود المكوّنات وتسمية الخصائص
- متغيرات البيئة وتنظيم الإعدادات