一尘不染

如何通过create-react-app提供SSL证书?

node.js

我正在尝试托管一个我使用Facebook样板在本地创建和测试的React应用。
客户端应用程序与我使用node.js制作的API进行了交互,并且使用该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证书(该证书已经在我域中的另一个应用程序上使用,并且像超级按钮一样工作)而不是这个自签名证书?我错过了什么 ?


阅读 683

收藏
2020-07-07

共1个答案

一尘不染

在最新版本中,您应该设置环境变量来配置证书

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

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"
}
  • 我的解决方案基于此线程
2020-07-07