[前端开发] 用 mkcert 搭建本地开发受信 HTTPS 证书环境

前言

在Let's Encrypt推出免费证书以后，越来越多的网站都用上了免费的证书，HTTPS网站已然成为了标配。

我博客的出现时机跟 Let's Encrypt 差不多，当时自己不知道怎么安全传输登录密钥，于是直接就不支持HTTP，仅支持HTTPS。

这样一来，就算在本地，也需要启用HTTPS，但这些证书以往多数是手动调用 OpenSSL 生成自签的证书，然后添加到浏览器的受信证书列表，很麻烦，且不方便使用。

mkcert

最近发现了一款用 Go 写的小工具，mkcert，作者是 Google 员工。它用于在本地搭建受信证书环境。试用了一下，非常便捷。

首次运行时，它会生成一个本地CA，即本地公证机构根证书，然后把此CA添加到系统受信列表。最后，由此CA颁发（签名）新的下级证书给各网站使用。

安装

macOS

使用 HomeBrew 进行安装：

brew install mkcert
brew install nss # 如果使用的是火狐浏览器需要安装这个

Linux

直接到 https://github.com/FiloSottile/mkcert/releases 下载预编译的二进制。

Windows

暂时不支持 ?

创建证书

首次运行时，先生成并安装根证书：

$ mkcert ---install
Created a new local CA at "/Users/tao/Library/Application Support/mkcert" ?
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires restart)! ?

然后就可以签名啦：

$ mkcert localhost 127.0.0.1 taoblog.local phpmyadmin.local
Using the local CA at "/Users/tao/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names ?
 - "localhost"
 - "127.0.0.1"
 - "taoblog.local"
 - "phpmyadmin.local"

The certificate is at "./localhost+3.pem" and the key at "./localhost+3-key.pem" ✅

证书已经生成：

$ ls -l *.pem
-rw-------  1 tao  staff  1704 Jul  6 10:42 localhost+3-key.pem
-rw-r--r--  1 tao  staff  1480 Jul  6 10:42 localhost+3.pem

使用证书

我仅以 nginx 为例。

server {
    listen          443 ssl http2; # 启用HTTPS
    server_name     taoblog.local; # 这里是刚才的域名

    ## 这里现行就是填写刚才生成的证书
    ## 可以是绝对路径，也可以是nginx的配置文件相对路径
    ## 注意不要把公钥、私钥弄混了，带key的是私钥
    ssl_certificate         localhost+3.pem;
    ssl_certificate_key     localhost+3-key.pem;

    ...
}

查看浏览器证书

可以看到已经是 HTTPS 啦，没有任何警告。