localhost本地启动https服务调试-mkcert

前言

作为前端开发，某些时候需要调试一些https环境下的情况，大部分测试服务器域名是没有配置https的，所以我们需要自己本地启动https服务。

传统的解决方案中，我们需要用自签名的证书，然后在HttpServer中使用自签证书，而且还需要解决浏览器的信任问题。

下面给大家推荐一个go语言编写的生成本地自签的程序，跨平台，使用简单，支持多域名，自动信任CA等特性，可帮助我们快读搭建本地https环境。

步骤

1、安装mkcert

下载地址：https://github.com/FiloSottile/mkcert/releases/latest
ps：MacOS用户可以使用Homebrew来进行安装

brew install mkcert

安装成功后，运行mkcert就可以看到

Usage of mkcert:

    $ mkcert -install
    Install the local CA in the system trust store.

    $ mkcert example.org
    Generate "example.org.pem" and "example.org-key.pem".

    $ mkcert example.com myapp.dev localhost 127.0.0.1 ::1
    Generate "example.com+4.pem" and "example.com+4-key.pem".

    $ mkcert "*.example.it"
    Generate "_wildcard.example.it.pem" and "_wildcard.example.it-key.pem".

    $ mkcert -uninstall
    Uninstall the local CA (but do not delete it).

For more options, run "mkcert -help".

2、生成自签证书

a.首先我们要把CA证书加入本地可信CA

$ mkcert -install

这行命令帮我们把mkcert生成的根证书加入到了本地可信的CA中，以后由该CA签发的证书在本地都是可信的。

b.生成自签名证书
这里举例用localhost

mkcert localhost 127.0.0.1 ::1

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "::1"

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

这里我们已经成功生成了localhost+2.pem证书文件与localhost+2-key.pem私钥文件，只要在web server上配置好这两个文件就好了

3、配置https

这里用vue.config.js来举例

const path = require("path");
module.exports = {
    devServer: {
        // 本地需要支持https时的配置
        https: true,
        key: fs.readFileSync("私钥绝对路径/localhost+2-key.pem"),
        cert: fs.readFileSync("证书绝对路径/localhost+2.pem"),
    },
}

配置好后，再次运行yarn serve，就会发现

本地成功启动为https服务了

参考

本地https快速解决方案——mkcert