本地调试内网穿透

前言

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

1. 前端调试

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

2. 在线演示:

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

1. 微信公众号开发

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

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

FRP

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

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

我用过的有：

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

免费的大多不稳定，所以以下frpc.ini配置自建服务器为例，但配置项内容大多相同

配置示例

使用的版本是 v0.43.0

线上 server 是 ubuntu (frp_0.43.0_linux_amd64.tar.gz)

[common]
# frpc服务绑定的端口
bind_port = 7000
# 代理转发的http端口
vhost_http_port = 8080

启动命令

./frps -c ./frps.ini

本地开发环境是 mac (frp_0.43.0_darwin_amd64.tar.gz)

[common]
# 线上服务器ip
server_addr = x.x.x.x
# 线上服务器中配置的绑定端口
server_port = 7000
[web]
type = http
# 本地服务启动的端口
local_port = 8000
# 自定义的域名,线上服务器上解析的域名
custom_domains = www.your-domains.com

启动命令

./frpc -c ./frpc.ini

http://www.your-domains.com:8080 -> http://127.0.0.1:8000

钉钉工具

结尾的tips

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

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}