前言

在开发过程中经常会遇到一些需要内网穿透的场景:

(1) 前端调试: 移动端前端项目开发时，想实时在真机或模拟器等设备上调试显示效果，但设备和本地开发电脑又不在同一个局域网

(2) 在线演示: 项目效果调试完后，要给同事或 boss 展示，如果有什么建议可以直接修改，直接部署到外网太浪费时间

(3) 微信公众号开发: 微信公众号的一些功能开发，如微信网页授权、JSSDK API 调用，虽然微信提供了 沙盒环境 供开发人员在本地开发调试，但其中一些地址配置都需要外网域名，而这种频繁的调试更不可能部署到外网环境中

这时候我们就需要一个实际访问本地主机端口的外网域名~~

FRP

frp 是一个可用于内网穿透的高性能的反向代理应用，支持 tcp, udp 协议，为 http 和 https 应用协议提供了额外的能力，且尝试性支持了点对点穿透

首先下载对应操作系统的客户端 frpc 和配置文件 frpc.ini （下载地址）接着找一个 frp 服务端，当然，如果你手上有闲置的服务器可以自己搭一个~~

我用过的有：

• chuantou.org 免费
• cngrok.com 收费（1 元/1 月/1 条隧道）

免费的大多不稳定，所以以下frpc.ini配置以cngrok.com为例，但配置项内容大多相同

[common]
# Frp服务器地址及端口
server_addr = frp.cngrok.com
server_port = 7000
# 服务器Token
token = d8faxxxxe729

# report 隧道名称
[report]
type = http
# 代理的本地ip及端口
local_ip = 127.0.0.1
local_port = 8080
# 前缀域名 访问地址: http://wendy.frp.cngrok.com
subdomain = wendy

启动命令

./frpc -c ./frpc.ini

结尾的 tips

• 使用启动命令报Permission denied无权限，需要在系统偏好 - 安全性里勾选允许打开frpc
• 前端项目访问代理域名出现Invalid Host header，需要在项目里进行以下设置

# webpack.dev.conf.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}