如何在本地主機上的React應用程序中配置HTTPS

如果您使用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: