告别‘不安全’警告！用mkcert+nginx在Windows上5分钟搞定局域网HTTPS测试环境

5分钟在Windows搭建零警告的局域网HTTPS测试环境

每次调试需要HTTPS的功能时，浏览器那个刺眼的红色警告总让人心烦意乱。Service Worker、PWA或是某些Web API的开发测试，都离不开安全的本地环境。传统自签名证书需要手动导入信任，步骤繁琐且容易出错。而mkcert的出现，让这一切变得简单优雅。

1. 为什么选择mkcert+nginx方案

在本地开发中，HTTPS环境的需求越来越普遍：

• PWA开发：Service Worker必须在安全上下文中运行
• 混合应用调试：移动设备访问本地开发服务器
• API测试：某些浏览器特性如地理位置需要HTTPS
• 跨设备同步：多终端实时预览开发效果

传统自签名证书的主要痛点在于：

1. 需要手动将CA证书导入系统信任库
2. 每台访问设备都需要单独配置
3. 证书过期频繁，维护成本高
4. 局域网IP变更导致证书失效

mkcert通过以下方式解决这些问题：

• 自动将CA证书加入系统信任链
• 支持动态IP和多个域名/IP同时认证
• 证书有效期长达数年（默认825天）
• 跨平台支持，Windows/macOS/Linux通用

# mkcert典型使用场景 mkcert example.com "*.example.com" localhost 127.0.0.1 ::1 192.168.1.100

2. 五分钟快速配置指南

2.1 安装准备

首先从GitHub获取最新版mkcert：

1. 访问 mkcert发布页
2. 下载对应Windows架构的exe文件（amd64或arm64）
3. 将文件保存到任意目录（建议C:\tools）

验证系统架构：

:: 查看处理器架构 echo %PROCESSOR_ARCHITECTURE%

2.2 一键安装CA证书

以管理员身份运行CMD，执行安装：

mkcert-v1.4.4-windows-amd64.exe -install

注意：安装过程会弹出安全警告，选择"是"允许安装根证书

验证安装成功：

mkcert-v1.4.4-windows-amd64.exe --help

2.3 生成局域网证书

获取本机局域网IP：

ipconfig | findstr "IPv4"

生成包含所有必要地址的证书：

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.1.100

输出示例：

Created a new certificate valid for the following names: - "localhost" - "127.0.0.1" - "::1" - "192.168.1.100" The certificate is valid until October 1, 2025

3. Nginx HTTPS服务配置

3.1 基础Nginx安装

1. 从nginx官网下载Windows版
2. 解压到无中文路径（如C:\nginx）
3. 测试基本HTTP服务：

server { listen 8080; server_name localhost; location / { root html; index index.html; } }

3.2 HTTPS核心配置

修改nginx.conf，添加SSL配置块：

server { listen 443 ssl; server_name localhost; ssl_certificate localhost+3.pem; ssl_certificate_key localhost+3-key.pem; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root html; index index.html; } }

关键参数说明：

3.3 多设备访问优化

为支持局域网设备访问，需要：

1. 确保防火墙允许443端口入站
2. 添加响应头解决跨域问题：

location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; root html; index index.html; }

3. 如需绑定域名，修改server_name：

server_name dev.example.com 192.168.1.100;

4. 高级应用场景

4.1 移动设备调试配置

让手机访问本地服务的完整流程：

1. 确保手机和电脑在同一局域网
2. 在手机浏览器访问https://[电脑IP]
3. 如需信任证书（仅首次）：
   • Android：设置 → 安全 → 安装证书
   • iOS：通过Safari下载并信任证书

4.2 多项目环境管理

通过不同端口服务多个项目：

server { listen 443 ssl; server_name pwa.local; ssl_certificate pwa-cert.pem; root C:/projects/pwa/dist; } server { listen 444 ssl; server_name api.local; ssl_certificate api-cert.pem; root C:/projects/api/public; }

4.3 常见问题排查

证书不受信任：

• 确认mkcert CA证书已安装（运行certmgr.msc查看）
• 重启浏览器或设备

Nginx启动失败：

• 检查443端口是否被占用：netstat -ano | findstr 443
• 验证证书路径是否正确

移动设备无法访问：

• 确认防火墙设置
• 尝试关闭Windows Defender防火墙测试

# 查看证书详细信息 openssl x509 -in localhost+3.pem -text -noout

5. 开发工作流优化建议

将配置过程脚本化，创建setup.bat：

@echo off mkcert-v1.4.4-windows-amd64.exe -install mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.1.100 move localhost+3* C:\nginx\conf\ start nginx

对于团队协作，可以：

1. 将CA证书和Nginx配置打包共享
2. 使用Docker统一开发环境
3. 配置自动化部署脚本

# 开发环境专用配置 env DEVELOPMENT; server { listen 443 ssl; error_log logs/dev_error.log debug; access_log logs/dev_access.log; location / { # 开发模式禁用缓存 add_header Cache-Control "no-cache, no-store, must-revalidate"; } }

实际项目中，我会将前端热更新与Nginx配合使用，实现修改即时生效。同时配置不同的证书用于测试、预发布等不同环境，避免配置冲突。