ローカルホスト上のReactアプリでHTTPSを構成する方法

を使用してアプリケーションを構築した場合create-react-appコンピュータ上でローカルに実行しています。デフォルトでは、HTTPプロトコルを使用して提供されます。

本番環境で実行されているアプリケーションはすべて、HTTPの安全なバージョンであるHTTPSを使用して提供されます。

ほとんどの場合、特にNetlifyやVercelなどの最新のプラットフォームを使用してアプリを提供している場合は、ほとんど労力をかけずにHTTPSを取得できます。

しかし、ローカルでは..私たちが望むよりも少し複雑です。

あなたがそれを行う方法を見てみましょう!

ご存知のように、create-react-appアプリケーションはを使用して実行されますnpm run start、または単にnpm startpackage.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: