Skip to content

内网穿透

在进行微信开发时,我需要将本地网站让远在其他地方的用户观看时,可以使用内网穿透来处理。我介绍几种方案来处理。

方案一 Expose

使用 herd或 valet 进行开发时,我们可以使用 Expose 来完成。访问 herd 共享站点 章节来在你的项目根目录中依次执行命令就可以了。

使用特点

  • 操作简单,每次执行命令 expose share 就可以分享站点
  • 共享后的网站,打开速度会比较慢
  • 免费用户生成的域名,每次会不同,这在开发微信公众号时,需要每次都在微信中设置新域名

方案二 花生壳

使用国产的 花生壳 软件也是不错的方式,国内打开速度会很快。

使用特点

  • 打开网站速度快
  • 免费用户每个月有流量限制,但一般开发是够用的

使用方法

  1. 首先访问 花生壳 网站下载电脑桌软件

  2. 在你的项目根目录执行命令

    php artisan serve
  3. 在花生壳软件中进行站点配置

  4. 然后使用 花生壳 生成的连接就可以访问了

方案三 frp

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

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

软件下载

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

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

然后解压两个压缩包

服务器FRP

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

配置文件

修改 linux/fps.ini 配置文件

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

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

端口放行

下面将 80807000 端口放行

进程管理

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

然后添加frp守护进程

并保证进行成功

网站设置

下面在宝塔面板中设置网站

添加站点

首先添加个新站点并绑定域名 live.banmashou.com

SSL

然后设置站点的SSL

反向代理

然后设置Nginx 反向代理

客户端

下面来配置客户端,我电脑是 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.banmashou.com

运行

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

添加 frpc 可执行权限

chmod +x frpc

运行frp 客户端

./frpc -c ./frpc.ini

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

效率提升

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

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

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

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

source ~/.zshrc

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