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

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 :

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

Your connection is not private (NET:ERR_CERT_AUTHORITY_INVALID)

您的连接不是私有的（NET：ERR_CERT_AUTHORITY_INVALID）

The documentation did not quite help me:

文档对我没有帮助：

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

请注意，服务器将使用自签名证书，因此您的Web浏览器在访问页面时几乎肯定会显示警告。 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

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 ?

我如何使用我自己的SSL证书（我已经在我的域上的另一个应用程序上使用并且像魅力一样工作）而不是这个自签名证书？我错过了什么？

2 个解决方案

#1

Your server that serves files from that port needs to be configured to use your SSL cert. I'm guessing you are using webpack-dev-server on that port (that's what npm start does in create-react-app), and maybe a different server (apache, nginx, etc) on port 80?

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

You can either serve your compiled files using your already configured server, or configure webpack-dev-server to use your SSL cert.

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

To do this, you can use webpack-dev-server's --cert option. See https://webpack.github.io/docs/webpack-dev-server.html

为此，您可以使用webpack-dev-server的--cert选项。请参阅https://webpack.github.io/docs/webpack-dev-server.html

If you want to do this using npm start, which calls a custom start script, you'll have to edit that start script. You may need to use the eject command first, which dumps all the config code into your repo so you can change it.

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

Here is the source code of the start script: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

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

I should also note that webpack-dev-server isn't intended to be used in a production environment.

我还应该注意，webpack-dev-server不适用于生产环境。

Have fun!

玩的开心！

#2

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:

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

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

Your package.json should look something like:

你的package.json应该是这样的：

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}

My solution is based on this thread
我的解决方案基于这个主题

#1