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

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

我能够在不修改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

笔记：

• .cert 是我在项目根目录下创建的文件夹
• 我生成 SSL 证书的脚本
• 关于这两个环境变量的官方文档

Answer 2

create-react-app建议不要弹出,因为您无法无缝升级.此外,您可以轻松拥有有效的SSL证书而无需弹出.
您需要将证书复制到node_modules/webpack-dev-server/ssl/server.pem.缺点是您需要手动复制文件.但是,使这种无缝化的一种方法是添加一个postinstall创建符号链接的脚本.这是我创建的脚本:

#!/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"
}

• 我的解决方案基于这个主题

Answer 3

扩展Elad的答案:

1. 按照https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https链接的说明创建自签名证书
2. 保存项目中某处的pem文件(包含证书和私钥)(例如/cert/server.pem)
3. 修改package.json脚本: /cert/server.pem

Answer 4

需要将从该端口提供文件的服务器配置为使用SSL证书.我猜你在那个端口上使用webpack-dev-server(这就是npm startcreate-react-app中的内容),也许是端口80上的不同服务器(apache,nginx等)？

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

为此,您可以使用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#L230

我还应该注意,webpack-dev-server并不打算在生产环境中使用.

玩得开心!

Answer 5

最终，这对我有帮助。在 Windows 上。

  "scripts": {
    "start": "set HTTPS=true&&set SSL_CRT_FILE=./.cert/cert.pem&&set SSL_KEY_FILE=./cert/key.pem&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

但首先，我得到了这样的证书。

//create a certficate folder
mkdir -p .cert
//create the actual certificates in the folder 
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

注意：我必须在 Windows 上使用 Chocolatey 安装 mkcert。因此，在让 React js 应用程序在 Windows 上使用 https 之前，您可能必须从这里开始。

Update1：​​如果有人想查看完整的解决方案，我将整个代码放在 github 上。链接在这里 - https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents/httpshelloworld