如何通过create-react-app提供SSL证书? [英] How can I provide a SSL certificate with create-react-app?

问题描述

我正在尝试托管一个我使用facebook样板在本地创建和测试的React应用.
客户端应用程序与我使用node.js制作的API进行了交互，并且使用该API可以毫无问题地建立安全连接(通过node.js客户端发送我的SSL证书进行测试).
但是，在使用react发送我的SSL证书而不是自签名证书时，我遇到了麻烦，这导致我使用chrome并尝试访问

I am trying to host a react app I created and tested locally using the facebook boilerplate.
The client app interacts with an API I made using node.js, and with which I had no issue setting up a secure connection (with a node.js client sending my SSL certificate, for testing).
However, I am encountering difficulties when it comes to using react to send my SSL certificate instead of a self-signed one which causes me to encounter this error using chrome and trying to access to https://example.net:3000 :

您的连接不是私有的(NET:ERR_CERT_AUTHORITY_INVALID)

Your connection is not private (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

Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

如何使用我自己的SSL证书(该证书已经在我域中的另一个应用程序上使用，并且像超级按钮一样工作)，而不是这个自签名证书?我错过了什么吗?

How can I use my own SSL certificate (which I already use on another app on my domain and works like a charm) instead of this self-signed one ? Did I miss something ?

推荐答案

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

Ejecting create-react-app is not recommended since you won't be able to seamlessly upgrade it. Moreover, you can easily have valid SSL certificate without ejecting.
You will need to copy your certificate to node_modules/webpack-dev-server/ssl/server.pem. The downside is that you need to manually copy the file. However, one way to make this seamless is to add a postinstall script that creates a symlink. Here is a script I created:

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

• 我的解决方案基于线程
• My solution is based on this thread

这篇关于如何通过create-react-app提供SSL证书?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！