1. 为什么我们需要mkcert每次在本地开发时看到浏览器那个刺眼的不安全提示你是不是也头疼过我刚开始做Web开发时每次测试支付接口或者调试PWA应用都会被自签证书的安全警告搞得焦头烂额。直到发现了mkcert这个神器才彻底告别了这些烦恼。传统自签证书的问题在于它们就像自制身份证——浏览器这个门卫根本不认。而mkcert的聪明之处在于它先在本地建立一个派出所CA机构然后给这个派出所办了正规执照自动信任CA最后它开出的所有身份证证书都会被系统认可。这样无论是localhost还是192.168.1.100这样的内网IP都能获得浏览器的小绿锁。我特别喜欢mkcert的零配置特性。记得有次紧急调试一个微信网页授权微信强制要求HTTPS从安装mkcert到拿到可信证书只用了3分钟。相比之前用OpenSSL折腾大半天还被浏览器警告效率提升不是一点半点。2. 5分钟快速上手mkcert2.1 跨平台安装指南Windows用户最简单的方法是直接下载exe文件。我习惯用PowerShell这样操作# 下载最新版请替换为当前版本号 Invoke-WebRequest -Uri https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-windows-amd64.exe -OutFile mkcert.exe # 移动到系统PATH目录 mv mkcert.exe $env:windir\system32\Mac用户用Homebrew更便捷brew install mkcert brew install nss # 如果你用FirefoxLinux用户建议用预编译二进制curl -JLO https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-linux-amd64 chmod x mkcert-v1.4.4-linux-amd64 sudo mv mkcert-v1.4.4-linux-amd64 /usr/local/bin/mkcert2.2 初始化本地CA安装后先执行这个关键命令mkcert -install这个操作会在你的系统信任库中添加一个名为mkcert development CA的根证书。我建议验证下是否成功Windows运行certmgr.msc在受信任的根证书颁发机构里查找Mac打开钥匙串访问在系统钥匙串的证书类别中查看3. 为各种场景生成证书3.1 基础用法本地开发证书最常用的命令格式mkcert 域名1 域名2 IP1 IP2比如要同时支持localhost和局域网访问mkcert localhost 127.0.0.1 ::1 192.168.1.100生成的文件通常是域名数字.pem证书和域名数字-key.pem私钥。我习惯在项目根目录建个certs文件夹专门存放这些文件。3.2 高级技巧通配符证书对于微服务架构可以用通配符证书mkcert *.local.example.com但要注意浏览器对通配符证书有些特殊规则只支持一级通配*.example.com有效*.*.example.com无效不能用于纯IP地址部分移动端WebView可能不兼容4. 主流服务器配置实战4.1 Nginx配置示例这是我常用的Nginx配置模板server { listen 443 ssl; server_name localhost; ssl_certificate /path/to/certs/localhost2.pem; ssl_certificate_key /path/to/certs/localhost2-key.pem; # 启用HTTP/2 listen 443 http2 ssl; location / { root /var/www/html; index index.html; } }重启Nginx后如果遇到SSL_error可能是权限问题试试chmod 600 /path/to/certs/*.pem4.2 Apache配置要点httpd.conf中需要确保这些模块已启用LoadModule ssl_module modules/mod_ssl.so LoadModule socache_shmcb_module modules/mod_socache_shmcb.so虚拟主机配置示例VirtualHost *:443 SSLEngine on SSLCertificateFile /path/to/certs/localhost2.pem SSLCertificateKeyFile /path/to/certs/localhost2-key.pem DocumentRoot /var/www/html /VirtualHost4.3 前端开发服务器集成Vite配置示例import { defineConfig } from vite import fs from fs export default defineConfig({ server: { https: { key: fs.readFileSync(certs/localhost2-key.pem), cert: fs.readFileSync(certs/localhost2.pem) }, host: 0.0.0.0 // 允许局域网访问 } })Webpack配置要点devServer: { https: { key: fs.readFileSync(certs/localhost2-key.pem), cert: fs.readFileSync(certs/localhost2.pem) }, host: 0.0.0.0, public: https://192.168.1.100:8080 // 局域网访问地址 }5. 常见问题排查指南5.1 证书不受信任怎么办先检查CA证书是否安装成功mkcert -CAROOT如果浏览器仍然警告试试这些步骤清除浏览器SSL状态Chrome地址栏输入chrome://net-internals/#hsts重启浏览器确保访问的URL完全匹配证书中的域名/IP5.2 局域网设备不信任证书需要在其他设备上也安装CA证书找到CA证书文件通常在mkcert -CAROOT输出的路径下将rootCA.pem复制到目标设备根据系统类型安装Windows双击.pem文件选择安装证书Mac拖入钥匙串访问然后在证书上右键选择始终信任Android需要在系统设置中安装不同厂商路径可能不同5.3 证书自动续期方案mkcert生成的证书默认有效期是2年。我习惯在package.json中添加自动化脚本scripts: { gen-cert: mkcert localhost 127.0.0.1 ::1 192.168.1.100, prestart: npm run gen-cert }对于Docker开发环境可以在Dockerfile中加入RUN curl -JLO https://dl.filippo.io/mkcert/latest?forlinux/amd64 \ chmod x mkcert-v*-linux-amd64 \ mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert \ mkcert -install6. 安全注意事项虽然mkcert非常方便但要注意不要将CA证书泄露任何人拿到你的rootCA.pem都可以签发你电脑信任的证书生产环境禁用mkcert仅用于开发环境定期清理旧证书建议每半年执行一次mkcert -uninstall然后重新安装我习惯在项目文档中加入安全提示⚠️ 开发证书警告 本项目使用的HTTPS证书仅用于本地开发环境对应的CA证书已自动安装在本机。 请勿将certs目录下的任何文件提交到版本控制系统或用于生产环境。对于团队项目建议在.gitignore中添加# mkcert生成的文件 /certs/ *.pem7. 进阶应用场景7.1 移动端真机调试当需要在手机测试H5页面时确保电脑和手机在同一局域网生成包含电脑局域网IP的证书mkcert 192.168.1.100在手机浏览器访问https://192.168.1.100:端口号iOS设备需要额外步骤将rootCA.pem发送到手机在设置-通用-描述文件中安装在设置-关于本机-证书信任设置中启用7.2 Docker容器内使用在docker-compose.yml中可以这样配置services: web: volumes: - ./certs:/etc/nginx/certs command: sh -c mkcert -cert-file /etc/nginx/certs/cert.pem -key-file /etc/nginx/certs/key.pem localhost nginx -g daemon off;7.3 多域名管理技巧对于大型项目我推荐使用批处理脚本自动生成证书。比如create_certs.sh#!/bin/bash DOMAINS( app.localhost api.localhost 192.168.1.100 ) mkcert ${DOMAINS[]} mkdir -p certs mv ** certs/8. 性能优化建议虽然HTTPS会带来性能开销但在开发环境可以这样优化启用TLS 1.3ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on;会话复用配置ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m;前端开发服务器调优// vite.config.js server: { https: { // 启用OCSP Stapling maxSessionMemory: 1000, sessionTimeout: 60 * 60 * 1000 // 1小时 } }对于高频刷新的HMR场景可以在Webpack配置中添加devServer: { https: { // 禁用部分安全检查提升性能 rejectUnauthorized: false, requestCert: false } }9. 替代方案对比虽然mkcert是我的首选但了解其他方案也很重要工具优点缺点适用场景OpenSSL无需额外安装配置复杂需要完全控制的情况Lets Encrypt真实证书不支持IP/需要域名有公网域名的测试环境Cloudflare自动管理证书需要修改DNS已使用CF的开发者Traefik自动续期资源占用较大容器化开发环境我选择mkcert的决定性因素是它对局域网IP的直接支持。去年开发智能家居控制面板时需要在内网多个设备间测试只有mkcert能完美解决证书信任问题。10. 最佳实践总结经过多个项目的实践我总结出这些经验统一证书管理在~/certs目录集中存放所有项目的证书自动化脚本将证书生成命令写入项目setup脚本文档记录在README.md中注明HTTPS配置方法团队协作使用mkcert -CAROOT导出的CA证书统一团队开发环境一个典型的项目结构建议project-root/ ├── certs/ # 证书目录已加入.gitignore ├── src/ ├── package.json ├── vite.config.js └── README.md # 包含HTTPS配置说明最后提醒一个小技巧使用mkcert -uninstall可以完全清理所有证书这在换电脑或者重装系统前特别有用。我在帮同事配置环境时经常先执行这个命令确保环境干净再重新安装能避免很多奇怪的问题。