web-dev-qa-db-ja.com

create-react-appでSSL証明書を提供するにはどうすればよいですか？


Facebookのボイラープレートを使用してローカルで作成およびテストした反応アプリをホストしようとしています。
クライアントアプリは、node.jsを使用して作成したAPIと対話し、安全な接続をセットアップする際に問題はありませんでした（node.jsクライアントがテスト用にSSL証明書を送信する）。
しかし、自己署名証明書ではなく、reactを使用してSSL証明書を送信する際に、chromeを使用してこのエラーが発生し、 https://example.net:30 へのアクセス：

接続はプライベートではありません（NET：ERR_CERT_AUTHORITY_INVALID）

ドキュメントは私を完全には助けませんでした：

サーバーは自己署名証明書を使用するため、Webブラウザーはページにアクセスすると警告をほぼ確実に表示します。 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

この自己署名証明書の代わりに、自分のSSL証明書（ドメインの別のアプリですでに使用していて、チャームのように機能する）を使用するにはどうすればよいですか？私は何か見落としてますか ？

node.jsfacebookreactjssslhttps
17
Montasar

create-react-appのイジェクトは、シームレスにアップグレードすることができないためお勧めできません。さらに、イジェクトせずに簡単に有効なSSL証明書を取得できます。
証明書をnode_modules/webpack-dev-server/ssl/server.pemにコピーする必要があります。欠点は、ファイルを手動でコピーする必要があることです。ただし、これをシームレスにする1つの方法は、シンボリックリンクを作成するpostinstallスクリプトを追加することです。これが script です：

#!/bin/bash
# With create-react-app, a self signed (therefore invalid) certificate is generated.
# 1. Create some folder in the root of your project
# 2. Copy your valid development certificate to this folder
# 3. Copy this file to the same folder
# 4. In you package.json, under `scripts`, add `postinstall` script that runs this file.
# Every time a user runs npm install this script will make sure to copy the certificate to the 
# correct location

TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/$(dirname "./local-certificate/server.pem")/server.pem

echo Linking ${TARGET_LOCATION} TO ${SOURCE_LOCATION}
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION} # after 30 days create-react-app tries to generate a new certificate and overwrites the existing one. 
echo "Created server.pem symlink"

package.jsonは次のようになります。

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}
  • 私の解決策はこれに基づいています thread
24
Elad

Eladの答えを拡張するには：

    1. https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https からリンクされている指示に従って、自己署名証明書を作成します
    1. プロジェクトのどこかにpemファイル（証明書と秘密鍵の両方を含む）を保存します（例：/cert/server.pem）
    1. Package.jsonスクリプトを変更します：
      "start": "HTTPS=true react-scripts start",
"prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",
14
senornestor

そのポートからファイルを提供するサーバーは、SSL証明書を使用するように構成する必要があります。私はあなたがそのポートでwebpack-dev-server（それがnpm startがcreate-react-appで行うことです）を使用していて、おそらくポート80で別のサーバー（Apache、nginxなど）を使用していると思いますか？

既に設定されているサーバーを使用してコンパイル済みファイルを提供するか、SSL証明書を使用するようにwebpack-dev-serverを設定できます。

これを行うには、webpack-dev-serverの--certオプションを使用できます。 https://webpack.github.io/docs/webpack-dev-server.html を参照してください

カスタム開始スクリプトを呼び出すnpm startを使用してこれを行う場合は、その開始スクリプトを編集する必要があります。最初にejectコマンドを使用する必要がある場合があります。これにより、すべての構成コードがリポジトリにダンプされ、変更できるようになります。

開始スクリプトのソースコードを以下に示します。 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L2

また、webpack-dev-serverは本番環境で使用することを意図していないことにも注意してください。

楽しんで！

8
Alex K

これは私がやったことです：

bash <(wget -qO- https://Gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh)

次に、ダブルクリックしてインポートしました：rootCA.pemおよびserver.pem

次に、package.json：

"start": "HTTPS=true react-scripts start",
"prestart": "cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl",

非常に重要な情報源：

1
w35l3y

ローカル証明書を機能させることができましたなしwebpack-dev-serverreact-scriptsを使用して3.4.1ファイルを変更しました（3.4.0に技術的に追加されましたが、いくつかありました—おそらく無関係-問題）。これら2つの環境変数を.env.developmentに追加しました。

SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key

ノート：

1
Andi