准备
- 公网服务器，假设 系统 Linux Ubuntu, 公网IP 140.140.192.192， 绑定了域名
- 本机 Mac 系统，跑着一个Angular程序，在本地访问，地址是 localhost:4200
效果
方法
- 服务器和内网本机分别对应系统平台的frp，
这里ubuntu服务器需要下载linux_arm_64， mac本机是darwin_amd64。 - 先配服务端，在服务器上下载解压，编辑 frps.ini， 然后启动
./frps -c ./frps.ini，放后台启动命令nohup ./frps -c ./frps.ini &
[common]
bind_port = 7000
# 客户端定义的端口
vhost_http_port = 7001
- 配置客户端，同样下载解压
wget
tar -zxvf frp_0.23.1_darwin_amd64.tar.gz
编辑 frpc.ini
[common]
server_addr = 140.140.192.192 #公网服务器ip
server_port = 7001 #与服务端bind_port一致
#公网访问内部web服务器以http方式
[web]
type = http #访问协议
local_port = 4200 #内网web服务的端口号
custom_domains = #所绑定的公网服务器域名，一级、二级域名都可以
- 浏览器打开 测试
进阶
修改服务端的 frps.ini， 添加 dashboard 信息，重启启动后可以通过140.140.192.192:7500打开控制面板
[common]
bind_port = 7000
# 客户端定义的端口
vhost_http_port = 7001
dashboard_port = 7500
# dashboard 用户名密码，默认都为 admin
dashboard_user = admin
dashboard_pwd = admin
image.png
注意事项
报 Invalid Host header
如果本机的web项目用了webpack server(目前vue cli, react cli, angular 本地开发用的都是这个) , 这个是webpack server的安全策略，如果是angular项目，需要在启动配置中加上 --disable-host-check 类似 ng serve --open --host $IP --port $PORT --disable-host-check