تأمين بيئة التطوير: إعداد HTTPS محليًا مع create-react-app

يُعد تشغيل بروتوكول HTTPS في بيئة التطوير أمرًا بالغ الأهمية، خاصةً عند التعامل مع واجهات برمجة تطبيقات (APIs) تتطلب اتصالًا آمنًا عبر HTTPS. يساعد هذا في محاكاة بيئة الإنتاج بدقة وتجنب المشكلات المحتملة المتعلقة بالأمان أو قيود المتصفح مثل (Mixed Content) أو (CORS).

في هذا المقال، سنستعرض خطوات إعداد HTTPS لتطبيق create-react-app الخاص بك في بيئة التطوير، مع استخدام شهادة SSL مخصصة لضمان أقصى درجات الأمان والاحترافية.

ملاحظة هامة: هذا الدليل موجه لمستخدمي نظام التشغيل macOS ويتطلب تثبيت مدير الحزم Homebrew مسبقًا.

تفعيل HTTPS في مشروعك

لتفعيل HTTPS في مشروعك، ابدأ بتعديل ملف package.json الخاص بك. قم بتحديث السكريبت الخاص بالتشغيل start ليشمل خيار HTTPS=true:

 "scripts": {
   "start": "HTTPS=true react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },

بعد تطبيق هذا التعديل، عند تشغيل الأمر yarn start (أو npm start)، ستلاحظ ظهور شاشة تحذير في متصفحك تشير إلى أن الاتصال غير آمن، وذلك بسبب عدم وجود شهادة SSL موثوقة.

في هذه المرحلة، تكون قد فعلت بروتوكول HTTPS بنجاح، ولكن نظرًا لعدم وجود شهادة SSL صالحة وموثوقة، يعتبر المتصفح اتصالك غير آمن ويصدر تحذيرًا للمستخدم. الخطوة التالية هي إنشاء شهادة خاصة بنا.

إنشاء شهادة SSL مخصصة

أسهل طريقة للحصول على شهادة SSL محلية هي باستخدام أداة mkcert القوية والموثوقة. هذه الأداة تسمح لك بإنشاء شهادات SSL محلية موثوقة بواسطة مرجع تصديق (CA) محلي.

للبدء، قم بتثبيت mkcert و nss (إذا كنت تستخدم متصفح Firefox) ثم قم بإعداد mkcert على جهازك:

 # تثبيت أداة mkcert
 brew install mkcert

 # تثبيت nss (مطلوب فقط إذا كنت تستخدم متصفح Firefox)
 brew install nss

 # إعداد mkcert على جهازك (ينشئ مرجع تصديق CA)
 mkcert -install

بعد تنفيذ الأوامر المذكورة أعلاه، ستكون قد أنشأت مرجع تصديق (CA) محليًا على جهازك، مما يتيح لك إصدار شهادات SSL لجميع مشاريعك المستقبلية بسهولة وفعالية.

من الجذر الرئيسي لمشروع create-react-app الخاص بك، قم الآن بتنفيذ الأوامر التالية لإنشاء الشهادة وتخزينها في مجلد .cert:

 # إنشاء مجلد .cert إذا لم يكن موجودًا
 mkdir -p .cert

 # إنشاء الشهادة (يتم تشغيله من جذر المشروع)
 mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

سنقوم بتخزين الشهادات التي تم إنشاؤها في مجلد .cert. من الضروري جدًا عدم تضمين هذه الملفات في نظام التحكم بالإصدار (مثل Git)، لذا يجب عليك تحديث ملف .gitignore الخاص بك ليشمل مجلد .cert لضمان عدم رفعها إلى المستودعات العامة.

بعد ذلك، نحتاج إلى تحديث السكريبت start مرة أخرى في ملف package.json لتضمين مسارات الشهادة الجديدة التي أنشأناها:

 "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },

عند تشغيل الأمر yarn start (أو npm start) مرة أخرى، ستلاحظ الآن أن اتصالك آمن تمامًا في المتصفح، مع ظهور علامة القفل الخضراء التي تؤكد صلاحية الشهادة المحلية.

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

يُعد إعداد HTTPS محليًا خطوة أساسية للمطورين لتقليد بيئة الإنتاج بدقة، وتجنب مشكلات (Mixed Content) و (CORS) التي قد تنشأ عند دمج واجهات برمجة تطبيقات آمنة. استخدام أدوات مثل mkcert يجعل هذه العملية سهلة وفعالة، مما يضمن أن بيئة التطوير الخاصة بك تعكس تمامًا بيئة الإنتاج من حيث الأمان. هذا لا يعزز جودة التطوير فحسب، بل يساهم أيضًا في اختبار ميزات الأمان بشكل فعال قبل النشر النهائي.