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

How can I provide a SSL certificate with create-react-app?

提问by mjarraya

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

回答by Elad

Update: see Andi's answerbelow. In recent version you should set environment variable to configure the certificate

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

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

---

---

Ejecting create-react-appis 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 postinstallscript that creates a symlink. Here is a scriptI created:

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"

Your package.jsonshould look something like:

你package.json应该看起来像：

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

• My solution is based on this thread

• 我的解决方案基于此线程

回答by senornestor

To expand on Elad's answer:

扩展埃拉德的回答：

• 1. Create a self-signed certificate following the instructions linked to from https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
• 2. Save the pem file (containing both the certificate and private key) somewhere in your project (e.g. /cert/server.pem)
• 3. Modify your package.json scripts:

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

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

回答by Alex K

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 startdoes in create-react-app), and maybe a different server (apache, nginx, etc) on port 80?

您从该端口提供文件的服务器需要配置为使用您的 SSL 证书。我猜你在那个端口上使用 webpack-dev-server（这就是npm startcreate-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 --certoption. See https://webpack.github.io/docs/webpack-dev-server.html

为此，您可以使用 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 run 传递给底层命令，例如npm start -- --cert ....

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 ejectcommand 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!

玩得开心！

回答by Andi

I was able to get a local certificate working withoutmodifying the webpack-dev-serverfiles using react-scripts3.4.1(technically added in 3.4.0but I had some—probably unrelated—issues). I added these two environment variables to my .env.development:

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

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

Notes:

笔记：

• .certis a folder I created in the root of my project
• My script that generates the SSL certificate
• Official documentation on these two environment variables

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

回答by w35l3y

This is what I did:

这就是我所做的：

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

Then I double clicked and imported: rootCA.pemand server.pem

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

Then I modified package.json:

然后我修改了package.json：

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

Very important sources:

非常重要的来源：

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

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