web-dev-qa-db-ja.com

create-react-app：httpの代わりにhttpsを使用する方法？

'create-react-app'環境でdevでhttpsを使用する方法を知っている人がいるかどうか疑問に思っていました。 READMEまたはクイックグーグルでそれについて何も表示されません。 https：// localhost：30 を動作させるか、または https：// localhost：3001 を動作させたいだけです。

reactjscreate-react-app
42
Ringo

開始コマンドを実行する前に、HTTPS=trueを設定します。

ドキュメント

実装では、 HTTPS環境変数 を使用して、サーバーの起動時に使用する どのプロトコル を決定します。

57
Steve Buzonas

Package.jsonスクリプトセクションを編集して、以下を読むことができます。

"scripts": { "start": "set HTTPS=true&&react-scripts start", ... }

または単にset HTTPS=true&&npm startを実行します

ちょっとした補足ですが、この変更を行うと、何らかの理由でホットリロードが中断されます。

-注：OS === Windows 10 64ビット

16
Smitty

MAC/UNIXの場合

export HTTPS=true
npm start

またはシンプルなライナー

export HTTPS=true&&npm start

または、package.jsonの開始スクリプトを更新して

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

httpsにアクセスできるはずです。

8
best wishes

プロジェクトのルートに.envというファイルを作成して、次のように書くこともできます。

HTTPS=true

その後、アプリを起動するために通常行うように「npm start」を実行します。

ドキュメント： https://facebook.github.io/create-react-app/docs/advanced-configuration

ここに掲載されている他の回答とは異なり、LinuxとWindowsの両方で動作します。

4
wm1sr

コマンドプロンプトでこれを使用してください

 set HTTPS=true&&npm start
4
Suneet Patil

サーバーとブラウザの両方に自己署名CAチェーンをインストールする必要がある場合があります。 自己署名CAと自己署名証明書の違い

3
codeislife

set HTTPS=true&&react-scripts start in scripts> start：以下に示すようにpackage.jsonの。

"scripts"in package.json：

"scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  • コマンドの間にスペースを入れないでください。つまり、HTTPS=true && npm startは機能しません。

公式ドキュメントで参照してください。 開発でのHTTPSの使用

（注：空白の欠如は意図的なものです。）

3
Abhinav Kinagi

「接続がプライベートではない」という問題のためにまだ適切に動作しない場合（クロム）、これは私のためにうまくいきました：

https://github.com/facebook/create-react-app/issues/3441

要するに：

  1. 最初に、chromeから証明書をエクスポートしました（これを表示）。
  2. 証明書をWindowsにインポートしました（certmgr.mscを使用）。
  3. Chrome：// flags /＃allow-insecure-localhostフラグを許可しました。 安全でないローカルホストを許可する方法
1
KurgerBing

PORT=443、デフォルトのHTTPS標準ポートを設定することは言及する価値があると思います。毎回、アドレスの末尾に:PORTを付けることを避けることができます。

私のpackage.jsonは次のようなものです（Ubuntu Server 18.04でテスト済み）：

{
  ...
  "scripts": {
    "start": "HTTPS=true PORT=443 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}
1
GyuHyeon Choi
HTTPS=true npm start

ターミナルでは、Create-React-Appで私のために働いた

1
ozzy432836

私はそれを動作させることができませんでした（HTTPS = trueを設定する）代わりに、私は使用しました

react-https-redirect

Appコンポーネントの単純なラッパー。

0
PatrickGoethe