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

一尘不染

如何通过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