【React】localhostをhttps化する方法

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

Reactでlocalhostをhttps化する方法

create-react-appでReactアプリケーションを作成する

ターミナル

$ npx create-react-app sample-app 

ディレクトリを移動する

ターミナル

$ cd sample-app

サーバーを起動する

ターミナル

$ HTTPS=true npm start

以下のような警告画面が表示されるので、赤枠の「詳細設定」をクリック指定ください。

すると、画面の一番下に「localhostにアクセスする」と表示されているのでクリックしてください。

クリックするとReactの初期画面が表示されます。

デベロッパーツールのネットワークでスキームを確認するとhttpsとなっていることが確認できます。

デベロッパーツールのネットワーク内にスキームが表示されていない場合には、「名前」「ステータス」・・・と表示されている箇所を右クリックして「スキーム」にチェックマークをつけてください。