1. 为什么我们需要本地HTTPS开发环境现代Web开发中越来越多的API和前端功能要求必须运行在HTTPS环境下才能正常工作。比如浏览器地理位置定位APIService Worker/PWA相关功能摄像头/麦克风访问权限第三方登录OAuth 2.0跨域资源共享(CORS)的安全策略在Windows开发机上配置本地HTTPS环境可以完美模拟生产环境的行为。我最近在开发一个需要调用Google地图API的项目时就遇到了必须使用HTTPS的硬性要求。下面分享我的完整配置过程。2. 证书生成工具选型与安装2.1 OpenSSL的选择Windows平台上有多个OpenSSL发行版可供选择官方Win32安装包最稳定但配置复杂Git for Windows内置版本开箱即用推荐Chocolatey包管理器安装适合自动化环境我选择使用Git for Windows自带的OpenSSL因为它已经包含在Git安装中路径通常为C:\Program Files\Git\usr\bin\openssl.exe环境变量自动配置版本保持更新验证安装openssl version # 应该显示类似 OpenSSL 3.0.2 15 Mar 20222.2 创建证书存储目录建议在用户目录下建立专用文件夹mkdir %USERPROFILE%\ssl_certs cd %USERPROFILE%\ssl_certs3. 生成自签名证书的完整过程3.1 生成RSA私钥执行以下命令生成2048位的私钥openssl genrsa -out localhost.key 2048安全建议不要使用低于2048位的密钥私钥文件必须严格保密设置600权限可以考虑添加-aes256参数加密私钥但会导致每次启动Nginx都需要输入密码3.2 创建证书签名请求(CSR)生成CSR文件openssl req -new -key localhost.key -out localhost.csr需要交互式输入的信息中最关键的是Common NameCommon Name (e.g. server FQDN or YOUR name) []: localhost其他字段可以按回车跳过。3.3 生成自签名证书使用以下命令生成有效期365天的证书openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt高级选项添加-sha256参数指定哈希算法使用-days 730延长有效期到2年添加扩展文件支持SAN多域名3.4 转换为PFX格式可选某些Windows应用可能需要PFX格式openssl pkcs12 -export -out localhost.pfx -inkey localhost.key -in localhost.crt4. 在Windows系统中信任证书4.1 安装证书到受信任根证书颁发机构双击localhost.crt文件选择安装证书存储位置选择本地计算机选择将所有证书放入下列存储 → 浏览 → 选择受信任的根证书颁发机构完成向导4.2 验证证书安装打开命令提示符运行certmgr.msc在受信任的根证书颁发机构中应该能看到你的证书。5. Nginx配置HTTPS服务5.1 基础HTTPS配置修改nginx.conf的server部分server { listen 443 ssl; server_name localhost; ssl_certificate C:/Users/你的用户名/ssl_certs/localhost.crt; ssl_certificate_key C:/Users/你的用户名/ssl_certs/localhost.key; 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 index.htm; } }5.2 性能优化建议启用OCSP Staplingssl_stapling on; ssl_stapling_verify on;使用更安全的加密套件ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305;启用HTTP/2listen 443 ssl http2;6. 浏览器访问与问题排查6.1 首次访问注意事项虽然证书已被系统信任但Chrome可能仍会显示不安全提示。这是因为证书缺少Subject Alternative Name (SAN)扩展证书有效期过长使用了自签名而非CA签发解决方法在Chrome地址栏输入chrome://flags/#allow-insecure-localhost启用Allow invalid certificates for resources loaded from localhost6.2 常见错误解决方案错误1SSL_ERROR_BAD_CERT_DOMAIN原因证书的Common Name与访问的域名不匹配解决确保证书的CN为localhost或使用的域名错误2ERR_CERT_AUTHORITY_INVALID原因证书未正确安装到受信任存储解决重新导入证书到受信任的根证书颁发机构错误3SSL handshake failed原因Nginx配置的证书路径错误解决检查ssl_certificate和ssl_certificate_key路径7. 高级配置技巧7.1 多域名SAN证书创建san.cnf文件[req] distinguished_name req_distinguished_name req_extensions v3_req [req_distinguished_name] countryName CN commonName localhost [v3_req] subjectAltName alt_names [alt_names] DNS.1 localhost DNS.2 127.0.0.1 DNS.3 dev.example.com生成命令openssl req -new -key localhost.key -out localhost.csr -config san.cnf openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt -extfile san.cnf -extensions v3_req7.2 自动化脚本创建generate_ssl.batecho off set OPENSSL_CONFC:\Program Files\Git\usr\ssl\openssl.cnf set CERT_DIR%USERPROFILE%\ssl_certs mkdir %CERT_DIR% 2nul cd %CERT_DIR% openssl genrsa -out localhost.key 2048 openssl req -new -key localhost.key -out localhost.csr -config san.cnf openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt -extfile san.cnf -extensions v3_req echo Certificates generated in %CERT_DIR% pause8. 维护与更新证书到期监控使用命令检查有效期openssl x509 -enddate -noout -in localhost.crt建议在日历中设置到期提醒提前1个月密钥轮换最佳实践每年更新一次密钥对更新后需要重新导入新证书到受信任存储同时更新所有使用该证书的服务配置安全审计定期检查私钥文件权限使用openssl rsa -check -in localhost.key验证密钥完整性考虑使用硬件安全模块(HSM)保护生产环境密钥在实际项目中我发现这套配置不仅能满足本地开发需求当需要与移动端联调时只需将证书安装到手机或模拟器上就能实现全链路HTTPS调试。特别是在开发需要WebRTC或地理位置功能的应用时这种配置成为了必备基础。
1. 为什么我们需要本地HTTPS开发环境现代Web开发中越来越多的API和前端功能要求必须运行在HTTPS环境下才能正常工作。比如浏览器地理位置定位APIService Worker/PWA相关功能摄像头/麦克风访问权限第三方登录OAuth 2.0跨域资源共享(CORS)的安全策略在Windows开发机上配置本地HTTPS环境可以完美模拟生产环境的行为。我最近在开发一个需要调用Google地图API的项目时就遇到了必须使用HTTPS的硬性要求。下面分享我的完整配置过程。2. 证书生成工具选型与安装2.1 OpenSSL的选择Windows平台上有多个OpenSSL发行版可供选择官方Win32安装包最稳定但配置复杂Git for Windows内置版本开箱即用推荐Chocolatey包管理器安装适合自动化环境我选择使用Git for Windows自带的OpenSSL因为它已经包含在Git安装中路径通常为C:\Program Files\Git\usr\bin\openssl.exe环境变量自动配置版本保持更新验证安装openssl version # 应该显示类似 OpenSSL 3.0.2 15 Mar 20222.2 创建证书存储目录建议在用户目录下建立专用文件夹mkdir %USERPROFILE%\ssl_certs cd %USERPROFILE%\ssl_certs3. 生成自签名证书的完整过程3.1 生成RSA私钥执行以下命令生成2048位的私钥openssl genrsa -out localhost.key 2048安全建议不要使用低于2048位的密钥私钥文件必须严格保密设置600权限可以考虑添加-aes256参数加密私钥但会导致每次启动Nginx都需要输入密码3.2 创建证书签名请求(CSR)生成CSR文件openssl req -new -key localhost.key -out localhost.csr需要交互式输入的信息中最关键的是Common NameCommon Name (e.g. server FQDN or YOUR name) []: localhost其他字段可以按回车跳过。3.3 生成自签名证书使用以下命令生成有效期365天的证书openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt高级选项添加-sha256参数指定哈希算法使用-days 730延长有效期到2年添加扩展文件支持SAN多域名3.4 转换为PFX格式可选某些Windows应用可能需要PFX格式openssl pkcs12 -export -out localhost.pfx -inkey localhost.key -in localhost.crt4. 在Windows系统中信任证书4.1 安装证书到受信任根证书颁发机构双击localhost.crt文件选择安装证书存储位置选择本地计算机选择将所有证书放入下列存储 → 浏览 → 选择受信任的根证书颁发机构完成向导4.2 验证证书安装打开命令提示符运行certmgr.msc在受信任的根证书颁发机构中应该能看到你的证书。5. Nginx配置HTTPS服务5.1 基础HTTPS配置修改nginx.conf的server部分server { listen 443 ssl; server_name localhost; ssl_certificate C:/Users/你的用户名/ssl_certs/localhost.crt; ssl_certificate_key C:/Users/你的用户名/ssl_certs/localhost.key; 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 index.htm; } }5.2 性能优化建议启用OCSP Staplingssl_stapling on; ssl_stapling_verify on;使用更安全的加密套件ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305;启用HTTP/2listen 443 ssl http2;6. 浏览器访问与问题排查6.1 首次访问注意事项虽然证书已被系统信任但Chrome可能仍会显示不安全提示。这是因为证书缺少Subject Alternative Name (SAN)扩展证书有效期过长使用了自签名而非CA签发解决方法在Chrome地址栏输入chrome://flags/#allow-insecure-localhost启用Allow invalid certificates for resources loaded from localhost6.2 常见错误解决方案错误1SSL_ERROR_BAD_CERT_DOMAIN原因证书的Common Name与访问的域名不匹配解决确保证书的CN为localhost或使用的域名错误2ERR_CERT_AUTHORITY_INVALID原因证书未正确安装到受信任存储解决重新导入证书到受信任的根证书颁发机构错误3SSL handshake failed原因Nginx配置的证书路径错误解决检查ssl_certificate和ssl_certificate_key路径7. 高级配置技巧7.1 多域名SAN证书创建san.cnf文件[req] distinguished_name req_distinguished_name req_extensions v3_req [req_distinguished_name] countryName CN commonName localhost [v3_req] subjectAltName alt_names [alt_names] DNS.1 localhost DNS.2 127.0.0.1 DNS.3 dev.example.com生成命令openssl req -new -key localhost.key -out localhost.csr -config san.cnf openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt -extfile san.cnf -extensions v3_req7.2 自动化脚本创建generate_ssl.batecho off set OPENSSL_CONFC:\Program Files\Git\usr\ssl\openssl.cnf set CERT_DIR%USERPROFILE%\ssl_certs mkdir %CERT_DIR% 2nul cd %CERT_DIR% openssl genrsa -out localhost.key 2048 openssl req -new -key localhost.key -out localhost.csr -config san.cnf openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt -extfile san.cnf -extensions v3_req echo Certificates generated in %CERT_DIR% pause8. 维护与更新证书到期监控使用命令检查有效期openssl x509 -enddate -noout -in localhost.crt建议在日历中设置到期提醒提前1个月密钥轮换最佳实践每年更新一次密钥对更新后需要重新导入新证书到受信任存储同时更新所有使用该证书的服务配置安全审计定期检查私钥文件权限使用openssl rsa -check -in localhost.key验证密钥完整性考虑使用硬件安全模块(HSM)保护生产环境密钥在实际项目中我发现这套配置不仅能满足本地开发需求当需要与移动端联调时只需将证书安装到手机或模拟器上就能实现全链路HTTPS调试。特别是在开发需要WebRTC或地理位置功能的应用时这种配置成为了必备基础。
