في الأسبوع الماضي، في تمام الساعة 2:23 صباحًا، دفعت تصحيحًا عاجلًا لتطبيق Laravel-Next.js هجين لعميل تأجير سيارات فاخرة في دبي. فشل البناء لأنني نسيت تعيين DATABASE_URL في البيئة التجريبية. بعد ساعتين من تناول القهوة، أدركت أنني قمت بتضمين سر إنتاج في next.config.js. إذا كان هذا يبدو مألوفًا - أو مرعبًا - فلنتحدث عن كيفية التعامل مع متغيرات البيئة دون أن تفقد صوابك.
التطوير المحلي: الأساس الذي لا أتخطاه أبدًا
في 7 سنوات من شحن التطبيقات التي تركز على الإمارات العربية المتحدة (بالنظر إليك، منصة Greeny Corner لتحديد النباتات)، تعلمت أن إدارة الأسرار تبدأ محليًا. إليك إعدادي:
- •لا تقم أبدًا بتضمين ملفات
.env.local. تجاهلها بشدة في Git. - •قم بهيكلة المتغيرات حسب الاصطلاح، مثل
NEXT_PUBLIC_*من جانب العميل، وDB_لاتصالات قاعدة البيانات. - •استخدم أنواع
process.envفي TypeScript لاكتشاف الأخطاء مبكرًا - أضعت 6 ساعات في تصحيح الأخطاء لمعرفة سبب كونAPI_KEYغير مُعرّفundefinedبسبب خطأ إملائي في ثلاثة ملفات.
بالنسبة لمشاريع Next.js المستضافة على Vercel، أضيف ملف .vercel/.env.local ولكن لا أقوم بتضمينه أبدًا. يتيح لي ذلك اختبار متغيرات شبيهة بالإنتاج دون الكشف عن قيم حقيقية. مثال:
// next.config.js
const nextConfig = {
env: {
API_URL: process.env.NODE_ENV === 'production'
? 'https://api.prod-domain.ae'
: 'https://api.dev-domain.ae'
}
}أنقذني هذا خلال إعادة بناء موقع DAS Holding للشركات عندما استمر فريق ضمان الجودة في الوصول إلى نقاط نهاية API الخاطئة.
البيئة التجريبية مقابل البيئة الإنتاجية: أتمتة الفرق
في أول وظيفة لي في شركة ناشئة في الإمارات العربية المتحدة، قمت بنشر ملفات .env عن طريق الخطأ إلى البيئة الإنتاجية لتطبيق توصيل مقره في الشارقة. هددني المدير التقني بمنعي من آلة القهوة إلى الأبد. الآن؟ أستخدم هذه القواعد الصارمة:
- لا تعيد استخدام أسرار الإنتاج في البيئة التجريبية أبدًا. إطلاقا. أراد أحد العملاء "توفير المال" باستخدام نفس مفتاح Firebase API لكلا البيئتين - كان علينا إعادة بناء نظام المصادقة الخاص بهم عندما كشف تسريب مطور عن أكثر من 800 بريد إلكتروني للمستخدمين.
- قم بتعيين قيم خاصة بالبيئة في لوحة معلومات Vercel. بالنسبة لـ Tawasul Limo، قمت بتكوين
NEXT_PUBLIC_STRIPE_PUBLICبشكل منفصل لعمليات النشر للمعاينة والبيئة التجريبية والإنتاجية. - أتمتة التحقق من صحة المتغيرات. استخدم
cross-envفي نصوص package.json لفرض المتغيرات المطلوبة قبل تشغيل عمليات البناء:
"scripts": {
"build:prod": "cross-env -V NODE_ENV=production NEXT_PUBLIC_ANALYTICS_ID REQUIRED_VAR_1 REQUIRED_VAR_2 next build"
}الأمان: الأخطاء التي لن أكررها
في عام 2023، قمت ببناء تطبيق عقاري ثنائي اللغة لشركة Reach Home Properties حيث أصر العميل على تخزين بيانات اعتماد قاعدة البيانات في واجهة مستخدم Vercel. لقد نجح الأمر حتى قام المتدرب الخاص بهم بلصق DATABASE_URL الخاص بالإنتاج في مشكلة GitHub عامة. الآن أنا:
- •أقوم بتدوير الأسرار كل 6 أشهر باستخدام خزنة Bitwarden مشتركة.
- •استخدم متغيرات البيئة المشفرة المدمجة في Vercel للإنتاج.
- •بالنسبة للقيم بالغة الأهمية (فكر في واجهات برمجة التطبيقات المصرفية التابعة لجهات خارجية)، قم بتنفيذ جلب وقت التشغيل من خلال وكيل آمن بدلاً من متغيرات env ثابتة.
لا تقم أبدًا بتخزين الملفات التي تحتوي على أسرار في مجلد /public - لقد تعلمت ذلك بالطريقة الصعبة عندما كشف عنوان URL التجريبي لأحد العملاء عن .env.local عبر سجل GitHub.
الأسئلة الشائعة
كيف يمكنني إدارة متغيرات البيئة في Vercel لمشاريع متعددة؟
بالنسبة للمشاريع الفردية (مثل مولد رمز الاستجابة السريعة لقائمة المطاعم في الإمارات العربية المتحدة)، أستخدم أمر CLI vercel env add <environment> لمزامنة القيم يدويًا. بالنسبة لعملاء المؤسسات ذوي احتياجات الامتثال، قم بتعيينها من خلال واجهة المستخدم وقفل الأذونات ضمن قسم "متغيرات البيئة".
هل يجب علي تخزين الأسرار محليًا إذا كنت أعمل في فريق؟
فقط إذا كنت تريد أن يغضب زملاء الفريق ويستقيلوا. استخدم حلولاً مُدارة: مجلدات Bitwarden المشتركة لكلمات المرور، و Vercel env لمتغيرات التطبيق، وقوالب .env.example للتكوين غير السري. ذات مرة حاولت مزامنة Dropbox لملفات .env.local - كارثة في الانتظار.
كيف يمكنني التحقق مما إذا كانت الأسرار معروضة في سجل git؟
قم بتشغيل git log -S 'DATABASE_URL' للبحث في الالتزامات التاريخية. وجدت البعض في مستودع شركة لوجستية في أبو ظبي قبل ثلاث سنوات. كان علي إعادة كتابة التاريخ باستخدام git filter-branch وإبطال 27 مفتاح API.
هل يمكنني استخدام متغيرات البيئة لمنطق React Native من جانب العميل؟
بحذر! في Expo SDK 54 لميزة التعريف بالنباتات بالذكاء الاصطناعي في Greeny Corner، كشفت فقط عن NEXT_PUBLIC_ANALYTICS_ID وقمت بإخفاء القيم الأخرى خلف نقاط نهاية API. إذا كان يمكن فك تجميعه من حزمة التطبيق، فإنه لا يستحق أن يكون سرًا.
لقد كنت أدير متغيرات البيئة بالطريقة الفوضوية والواقعية لأكثر من 7 سنوات - من إعدادات الواجهة الخلفية Laravel في البنوك الكويتية إلى عمليات نشر Vercel للشركات الناشئة في الرياض. عندما يتوسع تطبيقك من 10 إلى 10000 مستخدم إماراتي بين عشية وضحاها، فأنت بحاجة إلى أنظمة تعمل عند الحاجة. إذا كنت سئمت من أخطاء 502 Bad Gateway في منتصف الليل، احجز استشارة مجانية - سنبني خط أنابيب الأسرار الخاص بك قبل أن يصبح تقرير حادث.