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

Question

我正在尝试托管我使用 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 证书（我已经在我的域中的另一个应用程序上使用它并且像一个魅力一样工作）而不是这个自签名证书？我错过了什么吗？

Answer 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

Answer 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

Answer 3

扩展 Elad 的答案：

• 1. 按照链接到https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https 的说明创建自签名证书
• 2. 将 pem 文件（包含证书和私钥）保存在项目中的某个位置（例如 /cert/server.pem）
• 3. 修改你的 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",
     

Answer 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 不打算在生产环境中使用。

玩得开心！

Answer 5

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

Answer 6

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

如果仅启用 SSL，

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

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

2. 创建您的 SSL 证书

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

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

4. 运行

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

5. 启用您的证书 (.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"
    },
   

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

Answer 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

Answer 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",

Answer 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

示例文件夹结构