mkcert: 本地https快速解决方案

mkcert: https证书生成工具
更新于: 2022-10-25 06:56:14

安装

# install
brew install mkcert
# check
❯ mkcert --version
v1.4.4

在系统安装证书

可以用在 keychain 里搜索 mkcert 查看证书安装情况。

可以用 keychain 查看证书安装情况
❯ mkcert -install
Created a new local CA 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️

开发域名

生成 key/cert 对应的 pem 文件，一般文件名(针对 localhost)如下：

localhost+2-key.pem

localhost+2.pem

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" ✅

It will expire on 6 October 2024 🗓

证书使用

mkcert 文件列表
https 证书在开发中的使用
var fs = require("fs"),
  https = require("https"),
  express = require("express");
var port = 8000;
var app = express();
var options = {
  key: fs.readFileSync("localhost+2-key.pem"),
  cert: fs.readFileSync("localhost+2.pem"),
};

https.createServer(options, app).listen(port, function () {
  console.log("Express server listening on port " + port);
});

app.get("/", function (req, res) {
  res.writeHead(200);
  res.end("hello world\n");
});

mkcert 与 react 结合

默认 React 的 https 存在的问题
mkcert 的使用步骤
有了 https 证书之后，https不再有红色

使用步骤

  1. 创建 .pem 文件 (用这个命令可以产生2个文件：mkcert localhost 127.0.0.1 ::1)
  2. 添加 .env 文件，并设置如下
  3. 因为适用于本机，可以考虑加到 .gitignore 文件里去

.env 配置

  • 可以修改路径
HTTPS=true
SSL_CRT_FILE=.cert/localhost+2.pem
SSL_KEY_FILE=.cert/localhost+2-key.pem

公司项目配置

  • 主域名与公司项目相同，配置 hosts:  127.0.0.1 dev.beta.aigene.org.cn
  • mkcert https证书生成，路径为: cd ~/github/softwares/mkcerts/ && mkcert localhost 127.0.0.1 ::1 dev.beta.aigene.org.cn
  • cra 里的 https 配置，项目底下的 .env 文件(刻这个 .env 加入到 .gitignre 里)
SSL_CRT_FILE=$HOME/github/software/mkcerts/localhost+3.pem
SSL_KEY_FILE=$HOME/github/software/mkcerts/localhost+3-key.pem
HTTPS=true
PORT=3000

参考