如何通过本地自签名证书为React应用实现HTTPS服务？

本文共计489个文字，预计阅读时间需要2分钟。

简介：+ 现在是前端的时代，我们在本地开发React项目，非常方便。这不是本文的重点，今天要分享的主题是如何为这些本地项目添加https的支持。为什么考虑这个问题呢？

简介

现在是大前端的时代，我们在本地开发 React 项目非常方便。这不是本文的重点，今天要分享一个话题是，如何为这些本地的项目，添加 create-react-app.dev/docs/using-localhost:3000 这个地址访问

如果你想启用 localhost:3000 去访问它了。但很显然这个证书是无效的。下面就继续来学习如何创建自定义证书并且用它来绑定到我们的应用端口上来。

安装自签名证书工具

推荐使用 mkcert，我一般会用 choco 这个工具来安装，请参考我的步骤

# 请在管理员模式下打开Powershell Set-ExecutionPolicy Bypass -Scope Process -Force; ` [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;` iex ((New-Object System.Net.WebClient).DownloadString('community.chocolatey.org/install.ps1')) choco install mkcert -y 安装证书信任机构（CA）

mkcert -install 创建证书

# 创建一个用来保存证书文件的目录 mkdir -p .cert # 可以一次性为多个域名创建证书，这个非常强大 mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost" "dev.teamsapp.local" 使用证书来启动当前项目

在当前项目根目录下面创建一个 .env 文件，填写如下的内容

HTTPS=true SSL_CRT_FILE=.cert/cert.pem SSL_KEY_FILE=.cert/key.pem

然后，直接还是运行 npm start ，你会发现默认打开的 localhost:3000 已经带有合法的证书了