当前位置: 首页 > 面试题库 >

如何通过create-react-app提供SSL证书?

黄兴业
2023-03-14
问题内容

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


问题答案:

在最新版本中,您应该设置环境变量来配置证书

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"
}
  • 我的解决方案基于此html" target="_blank">线程


 类似资料:
  • 问题内容: 当我在终端中键入命令时,它似乎可以正常工作- 成功下载所有库等。但是,在该过程结束时,我收到一条消息,提示您。 输入项 输出量 在的package.json中: 我检查了CRA 更改日志,看起来好像增加了对自定义模板的支持-但是看起来命令似乎没有更改。 知道这里发生了什么吗? 问题答案: 如果您以前通过进行了全局安装,建议您使用来卸载软件包,以确保始终使用最新版本。 文件 使用以下命令

  • Create React App 不用配置就可以创建 React App。 全局安装: npm install -g create-react-app 创建 App: create-react-app my-appcd my-app/ 启动 npm: npm start 打开 http://localhost:3000/  查看你的 App。 如果你准备将其部署到生产环境,只需创建一个压缩包,并且运行 npm run build。

  • Create React Native App The fastest way to create universal React Native apps npx create-react-native-app Once you're up and running with Create React Native App, visit this tutorial for more informat

  • Create React Redux App Structure Create React + Redux app structure with build configurations. What can I find here? Express, Cors React + Redux, ES6, async/await Web Components (Custom Elements) inte

  • create-react-app React Project with Node Express Backend Example on using create-react-app with a Node Express Backend Usage Install nodemon globally npm i nodemon -g Install server and client depende

  • 我想知道是否有人知道如何在“创建-反应-应用”环境中使用https。我在自述文件或快速搜索中找不到任何相关信息。我只希望https://localhost:3000能够工作,或者https://localhost:3001能够工作。