关于node.js：如何通过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并尝试访问https://example.net:3000时遇到此错误：

Your connection is not private (NET:ERR_CERT_AUTHORITY_INVALID)

文档对我没有太大帮助：

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证书(该证书已经在我域中的另一个应用程序上使用，并且像超级按钮一样工作)，而不是这个自签名证书？我错过了什么吗？

更新：请参阅下面的安迪答复。
在最新版本中，您应该设置环境变量以配置证书

1
2
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脚本。
这是我创建的脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/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应该类似于：

1
2
3
4
"scripts": {
    ...
   "postinstall":"sh ./scripts/link-certificate.sh"
}
  • 我的解决方案基于此线程
相关讨论

我能够在不使用react-scripts 3.4.1修改webpack-dev-server文件的情况下获得本地证书的工作(技术上已添加到3.4.0中，但存在一些(可能无关)问题)。我将这两个环境变量添加到了.env.development：

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

注意事项：

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

扩展Elad的答案：

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

    1
    2
    "start":"HTTPS=true react-scripts start",
    "prestart":"rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",
相关讨论

从该端口提供文件的服务器需要配置为使用SSL证书。我猜您正在该端口上使用webpack-dev-server(这是npm start在create-react-app中的功能)，也许在端口80上使用了其他服务器(apache，nginx等)？

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

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

NOTE: you need an extra -- to pass arguments through npm run to the underlying command, e.g. npm start -- --cert ....

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

这是开始脚本的源代码：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

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

玩得开心！

相关讨论

这是在SSL_CRT_FILE边使用HTTPS=true时的react-scripts的webpack配置

这就是我所做的：

1
bash <(wget -qO- https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh)

然后我双击并导入：rootCA.pem和server.pem

然后我修改了package.json：

1
2
"start":"HTTPS=true react-scripts start",
"prestart":"cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl",

非常重要的来源：

  • https://serverfault.com/questions/226386/wget-a-script-and-run-it
  • https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177
相关讨论