Question

我正在尝试托管我使用facebook样板创建并在本地测试的反应应用程序。
客户端应用程序与我使用node.js创建的API进行交互，并且我在设置安全连接时没有问题（node.js客户端发送我的SSL证书进行测试）。
但是，在使用react发送我的SSL证书而不是自签名的证书时，我遇到了困难，导致我使用chrome遇到此错误并尝试访问https://example.net:3000：

您的连接不是私密的（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证书（我已经在我的域上的另一个应用程序上使用，并且像魅力一样工作）而不是这个自签名证书？我错过了什么吗？

Answer 1

不推荐弹出create-react-app，因为您无法无缝升级它。此外，您可以轻松拥有有效的SSL证书而无需弹出。
您需要将证书复制到node_modules/webpack-dev-server/ssl/server.pem。缺点是您需要手动复制文件。但是，实现此无缝的一种方法是添加一个创建符号链接的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

Answer 2

我能够使用webpack-dev-server react-scripts（在3.4.1中技术添加，而无需修改有一些（可能无关）的问题。我将这两个环境变量添加到了3.4.0中：

.env.development

注意：

SSL_CRT_FILE=.cert/server.crt SSL_KEY_FILE=.cert/server.key是我在项目根目录中创建的文件夹
My script that generates the SSL certificate
Official documentation on these two environment variables

Answer 3

扩大Elad的答案：

按照https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https链接的说明创建自签名证书
将pem文件（包含证书和私钥）保存在项目中的某个位置（例如/cert/server.pem）
修改您的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",

Answer 4

需要将提供该端口文件的服务器配置为使用SSL证书。我猜你在那个端口上使用了webpack-dev-server（这是{-1}}在create-react-app中的作用），也许在端口80上有一个不同的服务器（apache，nginx等）？

您可以使用已配置的服务器提供已编译的文件，也可以将webpack-dev-server配置为使用SSL证书。

为此，您可以使用webpack-dev-server的npm start选项。见https://webpack.github.io/docs/webpack-dev-server.html

如果你想使用调用自定义启动脚本的npm start来执行此操作，则必须编辑该启动脚本。您可能需要先使用--cert命令，将所有配置代码转储到您的仓库中，以便进行更改。

以下是启动脚本的源代码：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

我还应该注意，webpack-dev-server不适合在生产环境中使用。

玩得开心！

Answer 5

使用 mkcert 创建自签名证书并安装它。我尝试了其他方法，但它们容易出错。

使用 macOS 的示例：

brew install mkcert
mkcert -install
mkcert localhost

编辑 package.json：

"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",

Answer 6

这就是我所做的：

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",

非常重要的来源：

Answer 7

这是在HTTPS=true和SSL_CRT_FILE边使用SSL_CRT_FILE时的react-scripts的webpack配置。因此，您应该只需将其添加到环境中即可设置证书的路径。

如何使用create-react-app提供SSL证书？

7 个答案: