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

Posted 2023-02-22

【中文标题】如何使用 create-react-app 提供 SSL 证书？

【英文标题】：How can I provide a SSL certificate with create-react-app?

【发布时间】：2017-05-02 17:28:32

【问题描述】：

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

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

文档对我帮助不大：

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

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

【参考方案1】：

我能够获得一个工作的本地证书没有使用react-scripts 3.4.1 修改webpack-dev-server 文件（技术上添加到3.4.0 但我有一些可能不相关的问题） .我将这两个环境变量添加到我的.env.development：

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

注意事项：

.cert 是我在项目根目录中创建的文件夹 My script that generates the SSL certificate Official documentation on these two environment variables

【讨论】：

您的脚本生成的证书是自签名的还是由证书颁发机构签名的？

它是自签名的。

脚本不起作用，它几乎卡在每个 openssl 命令上（使用 windows 10）

如果它卡在 openssl 上（生成 rootCA.key），通过在任何 'oppenssl' 命令之前添加 'winpty' 来修改脚本。在这里找到答案***.com/questions/34156938/…

@viethieule 对于 Ubuntu 有什么解决方法吗？

【参考方案2】：

更新：见下方 Andi 的 answer。 在最近的版本中，您应该设置环境变量来配置证书

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

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

我的解决方案是基于这个thread

【讨论】：

如果我理解正确的话，可以将这三个文件移动到node_modules/webpack-dev-server/ssl/ 目录，然后执行npm run build && serve -s build。或者，npm run postinstall && npm run build && serve -s build ... 对吗？

不完全是。您应该在应用程序的根目录（即node_modules 的同级）中创建一个文件夹，其中包含您的server.pem 和脚本文件。然后将postinstall 脚本添加到package.json。然后脚本在每个npm install 之后自动运行，因此无需更改您的工作流程。 HTH。

我应该将./local-certificate 添加到.gitignore 吗？

你通常不想将证书提交给 Git，所以是的。

As of react-scripts@3.4.0 如 Andi 的回答所述，证书可以通过环境变量提供，这是一种现代、优雅且独立于操作系统的方法，而不是上面建议的 bash 脚本解决方法。因为这是一个高度赞成且被接受的答案，我认为它应该被更新，至少说明对于现代版本的 React 的任务有一个开箱即用的解决方案。

【参考方案3】：

扩展 Elad 的答案：

按照链接到https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https 的说明创建自签名证书

将 pem 文件（包含证书和私钥）保存在项目中的某个位置（例如 /cert/server.pem）

修改你的 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",

【讨论】：

我最终使用 devcert-cli（我今天刚刚看到 mkcert，它看起来也不错）为 ./cert 中的 localhost 生成签名证书。然后，我将以下 prestart 脚本添加到我的 package.json：cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl。使用 devcert 的好处是您获得了签名证书而不是自签名证书，因此您不会在 Chrome 中看到任何警告或错误。

如果我们还需要添加密钥和密码会怎样？

请注意，上面第 2 步的关键是将证书和私钥连接到一个文件中。对于我们制作的 LetsEncrypt 证书，就是 privkey.pem + fullchain.pem。

如果我有 cert.pem 和 key.pem，如何创建 server.pem？

【参考方案4】：

您从该端口提供文件的服务器需要配置为使用您的 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

注意：您需要一个额外的 -- 来通过 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 不打算在生产环境中使用。

玩得开心！

【讨论】：

救命！太感谢了。我在运行弹出后配置了 webpack-dev-server，它运行良好。

很高兴我能提供帮助！ :)

@MontasarJarraya 也许您可以为初学者逐步发布自己的解决方案？

请注意，如果您使用react-app-rewired，请注意您不一定需要弹出来执行此操作，请参阅github.com/timarney/react-app-rewired。我发现要让它工作，我仍然需要将环境变量 HTTPS 设置为 true

太棒了，@NatKuhn。我不知道那个选项。

【参考方案5】：

这里是使用 HTTPS=true 和 SSL_CRT_FILE 和 SSL_CRT_FILE 时 react-scripts 的 webpack 配置。因此，您应该能够将其添加到环境中以设置证书的路径。

【参考方案6】：

我们是否正在寻找将 SSL (HTTPS) 集成到 localhost 的应用程序？或使用任何加密（特定）算法安全地调用 API。

如果仅启用 SSL，

需要在 package.json 文件中更改为 HTTPS 之类的 –

"scripts": 
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
,

创建您的 SSL 证书

在项目根文件夹中，运行：

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

运行

openssl rsa -in keytmp.pem -out key.pem
mkdir .cert
mv key.pem .cert/key.pem
mv cert.pem .cert/cert.pem

启用您的证书 (.perm)，例如 –

"scripts": 
    "start": "HTTPS=true SSL_CRT_FILE='./.cert/cert.pem' SSL_KEY_FILE='./.cert/key.pem' react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 ,

现在使用 https://lochost:3000 运行

【参考方案7】：

这就是我所做的：

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

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

然后我修改package.json：

"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

【讨论】：

完美！非常感谢！

【参考方案8】：

使用mkcert 创建自签名证书并安装它。我尝试了其他方法，但它们容易出错。

使用 macOS 的示例：

brew install mkcert
mkcert -install
mkcert localhost

编辑 package.json：

"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",

【参考方案9】：

最简单的方法是在 Ubuntu 和 windows 上使用 SSL 运行 reactjs -

创建cert.pem和key.pem文件，放到app根目录下的ssl文件夹中

在 package.json 的脚本中添加以下行

"scripts": 
    "start": "...",
    "build": "...",
    "ssl-linux": "export HTTPS=true&&SSL_CRT_FILE=/ssl/cert.pem&&SSL_KEY_FILE=/ssl/key.pem craco start",
    "ssl-win": "set HTTPS=true&&npm start"
  ,

Ubuntu - npm 在 ubuntu 上运行 ssl-linux

Windows - npm run ssl-win

在ubuntu上创建pem文件

Step 1.  openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365
Step 2.  openssl rsa -in keytmp.pem -out key.pem

示例文件夹结构