كيفية إعداد HTTPS محليًا باستخدام تطبيق create-react-app

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

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

هذا الدليل مخصص لمستخدمي macOS ويتطلب منك brewتثبيته.

إضافة HTTPS

في ملفك package.json، قم بتحديث نص البداية لتضمين https:

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

yarn startسيظهر لك الجري بعد هذه الخطوة هذه الشاشة في متصفحك:

في هذه المرحلة ، أنت جاهز بالفعل https. لكن ليس لديك شهادة صالحة ، لذلك يُفترض أن اتصالك غير آمن.

إنشاء شهادة SSL

أسهل طريقة للحصول على الشهادة هي عبر mkcert.

# Install mkcert tool brew install mkcert # Install nss (only needed if you use Firefox) brew install nss # Setup mkcert on your machine (creates a CA) mkcert -install

بعد تشغيل الأوامر المذكورة أعلاه ، ستكون قد أنشأت مرجعًا مصدقًا على جهازك والذي يمكّنك من إنشاء شهادات لجميع مشاريعك المستقبلية.

من جذر create-react-appمشروعك ، يجب عليك الآن تشغيل:

# Create .cert directory if it doesn't exist mkdir -p .cert # Generate the certificate (ran from the root of this project) mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

سنقوم بتخزين الشهادات التي تم إنشاؤها في .certالدليل. لا ينبغي أن تلتزم هذه بالتحكم في الإصدار ، لذلك يجب عليك تحديثها .gitignoreلتضمين .certالدليل.

بعد ذلك ، نحتاج إلى تحديث startالبرنامج النصي مرة أخرى لتضمين الشهادة التي تم إنشاؤها حديثًا:

 "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مرة أخرى ، يجب أن ترى الآن أن اتصالك آمن.

لا تكن غريبا! لا تتردد في الكتابة إذا كان لديك أي أسئلة - تواصل معي على Linkedin أو تابعني على Twitter.