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

IT技术 node.js facebook reactjs ssl https
2021-04-07 16:24:02


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

6个回答

我能够在修改webpack-dev-server文件的情况下使用本地证书react-scripts 3.4.1(技术上添加,3.4.0但我有一些 - 可能不相关的 - 问题)。我将这两个环境变量添加到我的.env.development

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

笔记:

它是自签名的。
2021-05-25 16:24:02
您的脚本生成的证书是自签名还是由证书颁发机构签名?
2021-05-31 16:24:02
该脚本不起作用,它几乎卡在每个 openssl 命令上(使用 Windows 10)
2021-06-08 16:24:02
如果它卡在 openssl(生成 rootCA.key)上,请通过在任何“oppenssl”命令之前添加“winpty”来修改脚本。在这里找到答案stackoverflow.com/questions/34156938/...
2021-06-21 16:24:02

更新:见下面安迪的回答在最近的版本中,您应该设置环境变量来配置证书

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"
}
  • 我的解决方案基于此线程
我要补充./local-certificate.gitignore
2021-05-25 16:24:02
您通常不想将证书提交给 Git,所以是的。
2021-06-01 16:24:02
正如react-scripts@3.4.0安迪的回答中所述,证书可以通过环境变量提供,这是一种现代、优雅且独立于操作系统的方法,而不是上面提议的 bash 脚本解决方法。因为这是一个高度赞成并且被接受的答案,我相信它应该更新,至少说明对于现代版本的 React 任务有一个开箱即用的解决方案。
2021-06-01 16:24:02
如果我理解正确,可以将三个文件移动到node_modules/webpack-dev-server/ssl/目录,然后执行npm run build && serve -s build. 或者,npm run postinstall && npm run build && serve -s build……对吗?
2021-06-05 16:24:02
不完全是。您应该在应用程序的根目录(即 的同级node_modules)中创建一个文件夹,其中包含您的server.pem和脚本文件。然后将postinstall脚本添加到您的package.json. 然后脚本会在每个 之后自动运行npm install,因此无需更改您的工作流程。哈。
2021-06-14 16:24:02

扩展埃拉德的回答:

    1. 按照链接到https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https的说明创建自签名证书
    1. 将 pem 文件(包含证书和私钥)保存在项目中的某个位置(例如/cert/server.pem
    1. 修改你的 package.json 脚本:
      "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",
      
请注意,上面第 2 步的关键是将证书和私钥连接到一个文件中。对于我们制作的 LetsEncrypt 证书,那就是 privkey.pem + fullchain.pem。
2021-06-01 16:24:02
如果我有 cert.pem 和 key.pem,我该如何创建 server.pem?
2021-06-06 16:24:02
我最终使用 devcert-cli(我今天刚看到 mkcert 看起来也不错)为./cert. 然后我将以下prestart脚本添加到我的 package.json: 中cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl使用 devcert 的好处是您可以获得签名证书而不是自签名证书,因此您不会在 Chrome 中看到任何警告或错误。
2021-06-08 16:24:02
如果我们还需要添加密钥和密码,会发生什么?
2021-06-19 16:24:02

您从该端口提供文件的服务器需要配置为使用您的 SSL 证书。我猜你在那个端口上使用 webpack-dev-server(这就是npm startcreate-react-app 中的用途),也许在端口 80 上使用不同的服务器(apache、nginx 等)?

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

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

注意:您需要一个额外的东西--来通过 npm run 将参数传递给底层命令,例如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 不打算在生产环境中使用。

玩得开心!

@MontasarJarraya 也许您可以为初学者逐步发布自己的解决方案?
2021-05-22 16:24:02
请注意,如果您使用react-app-rewired— 请参阅 github.com/timarney/react-app-rewired,您不一定需要弹出才能执行此操作我发现要让它工作,我仍然需要将环境变量 HTTPS 设置为true
2021-05-22 16:24:02
救命恩人!太感谢了。我在运行后配置了 webpack-dev-server,它运行完美。
2021-06-06 16:24:02
很高兴我能帮上忙!:)
2021-06-07 16:24:02
太棒了,@NatKuhn。我不知道那个选项。
2021-06-14 16:24:02

这是与HTTPS=trueside SSL_CRT_FILE&一起使用时 react-scripts 的 webpack 配置SSL_CRT_FILE所以你应该能够将它添加到 env 以设置你的证书的路径。

react脚本中的 https 配置