كيفية تكوين HTTPS في تطبيق React على المضيف المحلي

إذا قمت بإنشاء تطبيق باستخدامcreate-react-appوتقوم بتشغيله محليًا على جهاز الكمبيوتر الخاص بك ، ويتم تقديمه افتراضيًا باستخدام بروتوكول HTTP.

سيتم تقديم أي تطبيق قيد الإنتاج باستخدام HTTPS ، الإصدار الآمن من HTTP.

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

لكن محليًا .. الأمر أكثر تعقيدًا بعض الشيء الذي نرغب فيه.

دعونا نرى كيف يمكنك القيام بذلك!

كما تعلم ، فإنcreate-react-appيتم تشغيل التطبيق باستخدامnpm run start، أو ببساطةnpm start، لأنه فيpackage.jsonالملفscriptsالقسم لدينا هذا الخط:

"start": "react-scripts start"

change that to:

"start": "HTTPS=true react-scripts start"

This sets the HTTPS environment variable to the true value.

That’s not enough, though.

Now we also need to generate a local certificate. This step will work fine for any app, not just create-react-app apps, but I will include it in this post, as a reference.

Note: I ran these commands on macOS. Linux should work in the same way. I don’t guarantee for Windows.

In the project root folder, run:

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

Now run:

openssl rsa -in keytmp.pem -out key.pem

You should now have the files cert.pem and key.pem in the folder.

Now change the start script in the package.json file to:

"start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",

If you ran npm run start, and access https://localhost:3000 (or the port your app uses, if different - in my case it’s 3008), you should see this warning message:

To fix it on macOS, follow the instructions of my tutorial how to install a local certificate in macOS.

Once you do, you will be able to see the app without problems, served using SSL:

Download my free React Handbook


More react tutorials: