# frp

frp (opens new window) 是一个专注于内网穿透的高性能的反向代理应用,支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。

下面我们演示使用域名 live.houdunren.com 访问我们的本地前端项目。

# 软件下载

访问 fatedier/frp (opens new window) 下载你系统的软件,因为我使用的服务器是 linux,开发电脑是 Mac 所以我要下载两个系统的软件。

  • 苹果电脑:frp_0.44.0_darwin_arm64.tar.gz
  • Linux 服务器 : frp_0.44.0_linux_amd64.tar.gz

然后解压两个压缩包

# 服务器设置

下面对 Linux 服务器的 frp 进行设置

# 配置文件

修改 linux/fps.ini 配置文件

  • bind_port 为 mac 客户端通信端口
  • vhost_http_port 域名访问 frp 端口
[common]
bind_port = 7000
vhost_http_port = 8080

然后将整个文件夹上传到服务器并改名为 /www/frp 目录

image-20220813031331193

# 端口放行

下面将 80807000 端口放行

image-20220813033510462

# 进程管理

服务器安装 Supervisor管理器,用于定义守护进程

image-20220813031448090

然后添加frp守护进程

image-20220813031616312

并保证进行成功

image-20220813031713380

# 域名设置

首先添加站点并绑定域名 live.houdunren.com

image-20220813031830360

然后设置Nginx 反向代理

image-20220813031957147

# 客户端

下面来配置客户端,我电脑是 m1苹果系统所以要下载 frp_0.44.0_darwin_arm64

# 配置文件

解包后修改 frpc.ini 文件

  • server_addr:Linux 服务器 IP地址
  • server_port:Linux服务器frps.ini 定义的 bind_port 端口
  • local_port:本地项目端口,比如你 Vue 前端项目的端口3000
  • custom_domains:服务器定义的域名
[common]
server_addr = 47.98.119.88 
server_port = 7000    

[web]
type = http
local_port = 3000 
custom_domains = live.houdunren.com 

# 运行

下面使用终端,进入解包后的 frp_0.44.0_darwin_arm64 目录

添加 frpc 可执行权限

chmood +x frpc 

运行frp 客户端

./frpc -c ./frpc.ini

现在就可以使用 live.houdunren.com 访问到本地项目了

# 效率提升

本地会有多个项目,我们可以将过程简化。

首先将 frpc 命令复制到 /code/frpc,并修改 ~/.zshrc 定义以下内容

# frpc
alias frpc="~/code/soft/frp/frpc -c ./frpc.ini"

然后终端重新加载 zshrc 配置文件

source ~/.zshrc

在任意项目中添加 frpc.ini 配置文件,然后执行 frpc 命令就可以运行 frp 了。