本地开发告别“您的连接不是私密连接”，使用mkcert生成本地证书

前端技术发表留言

前言

本地开发过程中如果启用了https但是没有配置证书，浏览器就会下面的警告错误

ssl_error

我们必须手动点击高级 -> 继续前往 xxx 才可以正常访问，这也是浏览器的保护机制，既然是本地开发，我们肯定网站是安全的，我们可以信任的。我们如果配置了证书就能解决上面的警告，获取证书有下面的两个渠道：

1、获取网站真实的证书
2、自己创建本地信任的证书

我们一般选择“自己创建本地信任的证书”，因为线上证书一般是保密的，不会轻易给别人，否则证书被不法分子得到会有数据泄露的风险。

本地创建证书

创建本地证书，我们需要借助于一个工具，该工具是开源的，仓库地址： https://github.com/FiloSottile/mkcert

安装方法在上述的仓库地址readme文档有详细的描述，以MacOS为例，可以使用brew一条命令安装

brew install nss mkcert

本地设置信任证书

如果要让mkcert生成的证书让浏览器信任，需要执行下面的命令

mkcert -install

生成指定域名证书

我们观察前言部分，因为 dev.example.com 这个域名需要证书，可以使用生成一个 *.example.com 都可以已使用的证书，该证书可以使用在 xxx.example.com、admin.example.com 等域名上。

mkcert "*.example.com"
# Created a new certificate valid for the following names 📜
# - "*.example.com"
# Reminder: X.509 wildcards only go one level deep, so this won't match a.b.example.com ℹ️
# The certificate is at "./_wildcard.example.com.pem" and the key at "./_wildcard.example.com-key.pem" ✅

# It will expire on 13 October 2025 🗓

执行完毕之后，在当前目录就会生成两个文件，这两个文件放哪里都无所谓，只要知道路径就可以了。例如我放到了nginx的配置目录下面：/opt/homebrew/etc/nginx/certs/

_wildcard.example.com-key.pem
_wildcard.example.com.pem

项目配置

对于 create-react-app 或者 antd pro 生成的项目都可以使用环境变量来设置https证书，以 antd-pro 项目为例，在项目根目录添加 .env.local 文件写入下面的内容（ .env.local 默认是git忽略的，所以不用怕影响别人的代码 ）：

SSL_CRT_FILE=/opt/homebrew/etc/nginx/certs/_wildcard.example.com.pem  
SSL_KEY_FILE=/opt/homebrew/etc/nginx/certs/_wildcard.example.com-key.pem

测试

重新启动一下项目，浏览器重新打开后网站已经显示安全的了。

留下回复