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

陪她去流浪 桃子 2018年07月06日 编辑 阅读次数:5495

前言

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

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

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

mkcert

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

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

安装

macOS

使用 HomeBrew 进行安装:

1
2
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 为例。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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 啦,没有任何警告。

WX20180706-105451.png

标签:nginx · HTTPS · 证书 · OpenSSL