5分钟实现本地服务HTTPS安全外网访问frps与自签名证书实战指南每次调试微信网页授权或第三方支付回调时你是否也经历过这样的崩溃瞬间本地开发的服务无法通过HTTPS访问而微信平台强制要求所有回调地址必须是HTTPS协议。别担心今天我们就来彻底解决这个痛点。1. 为什么我们需要HTTPS本地外网访问2018年起微信小程序和公众号接口全面强制HTTPS化这直接导致本地开发调试的复杂度直线上升。想象一下这样的场景你正在开发一个微信支付功能每次测试都需要部署到线上服务器改一行代码就要重新部署一次——这种开发效率简直让人抓狂。传统解决方案主要有三种Ngrok等商业服务提供现成的HTTPS隧道但免费版限制多如域名随机变化、带宽限制云服务器反向代理需要自己维护服务器成本高且配置复杂本地自签名证书端口映射最经济但浏览器会显示安全警告而frps方案完美平衡了成本与便利性零成本使用自签名证书稳定可控自己掌控服务端配置简单5分钟即可完成全流程2. frps的HTTPS透传核心原理frps实现HTTPS透传的魔法在于它的vhost_https_port配置项。当配置为443端口时frps会直接接管该端口的HTTPS流量并按域名转发到对应的frpc客户端。整个过程的数据流向如下客户端访问https://test.yourdomain.comDNS解析指向frps服务器IPfrps接收到443端口的HTTPS请求根据SNI(Server Name Indication)识别域名将请求转发到对应frpc客户端frpc将请求发送到本地服务的HTTPS端口关键配置参数说明参数服务端(frps)客户端(frpc)作用端口bind_port7000server_port7000控制连接端口HTTPSvhost_https_port443typehttpsHTTPS虚拟主机端口域名-custom_domainstest.yourdomain.com域名绑定3. 一键生成自签名证书的终极方案自签名证书最大的痛点在于每次都要手动输入一堆信息。下面这个脚本可以一键生成符合规范的证书#!/bin/bash DOMAIN$1 OUTPUT_DIR${2:-./ssl} mkdir -p $OUTPUT_DIR openssl req -x509 -nodes -days 3650 -newkey rsa:4096 \ -keyout $OUTPUT_DIR/$DOMAIN.key \ -out $OUTPUT_DIR/$DOMAIN.crt \ -subj /CCN/STBeijing/LBeijing/ODev/CN$DOMAIN使用方法chmod x gen_cert.sh ./gen_cert.sh test.yourdomain.com生成的证书文件test.yourdomain.com.key私钥文件test.yourdomain.com.crt证书文件4. 全流程配置指南4.1 服务端配置frps.ini[common] bind_port 7000 vhost_https_port 443 # 关键配置启用HTTPS虚拟主机启动命令frps -c frps.ini4.2 客户端配置frpc.ini[common] server_addr your.frps.server server_port 7000 [web] type https local_ip 127.0.0.1 local_port 8443 # 本地服务HTTPS端口 custom_domains test.yourdomain.com启动命令frpc -c frpc.ini4.3 本地服务配置示例Nginxserver { listen 8443 ssl; server_name test.yourdomain.com; ssl_certificate /path/to/test.yourdomain.com.crt; ssl_certificate_key /path/to/test.yourdomain.com.key; location / { root /var/www/html; index index.html; } }5. 浏览器信任证书的终极技巧自签名证书在Chrome等现代浏览器中会遇到各种阻拦这里分享几个必知技巧证书导入系统级信任库# macOS sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain test.yourdomain.com.crt # Windows certutil -addstore -f ROOT test.yourdomain.com.crt解决Chrome的NET::ERR_CERT_INVALID错误在浏览器地址栏输入chrome://flags/#allow-insecure-localhost将选项设置为Enabled开发环境专用解决方案// 在React/Vue开发服务器启动时添加参数 // React set HTTPStrueset SSL_CRT_FILE./ssl/test.yourdomain.com.crtset SSL_KEY_FILE./ssl/test.yourdomain.com.keyreact-scripts start // Vue vue-cli-service serve --https --ssl-cert ./ssl/test.yourdomain.com.crt --ssl-key ./ssl/test.yourdomain.com.key6. 高级应用场景6.1 多域名HTTPS透传frps支持基于SNI的多域名HTTPS透传只需在frpc中配置多个不同域名的section[web1] type https local_port 8443 custom_domains app1.yourdomain.com [web2] type https local_port 9443 custom_domains app2.yourdomain.com6.2 与Lets Encrypt集成虽然本文聚焦自签名证书但生产环境推荐使用Lets Encrypt免费证书。acme.sh自动续期脚本与frps完美配合# 安装acme.sh curl https://get.acme.sh | sh # 签发证书 acme.sh --issue -d yourdomain.com --standalone # 安装证书 acme.sh --install-cert -d yourdomain.com \ --key-file /etc/frp/ssl/yourdomain.com.key \ --fullchain-file /etc/frp/ssl/yourdomain.com.crt \ --reloadcmd systemctl restart frps6.3 监控与日志分析通过frps的dashboard功能实时监控连接状态[common] dashboard_port 7500 dashboard_user admin dashboard_pwd yourpassword访问http://frps.server:7500即可查看实时流量统计和连接信息。
