Frp自建内网穿透

这几天一直在折腾内网穿透的事,原因很简单,服务器的ROM不够大,又没钱升级配置,又拍云的免费OSS不备案无法绑定域名,免费的内网穿透速率太小了,更别提还有流量限制

想了想貌似只能自己建一个了,刚好手里有吃灰的Orangepi Zeor3,买的时候配了张128G的TF卡,虽然速度一般,但对于我来说是绰绰有余了

frp

提到内网穿透,想到的肯定是大名顶顶的frp,目前在Github上已有76.3K starred

网上的很多文章大多是教你用基于frp的一键配置脚本,但试了几个发现都没用后决定自己尝试

安装&使用

frp的安装很简单,参照文档的教程

  1. Releases处下载适合的架构/系统的压缩包,解压到任意目录

  2. 使用./frps -c ./frps.toml启动服务端

  3. 使用./frpc -c ./frpc.toml启动客户端

使用 systemd 开机自启动

如果断开ssh连接,frp服务也会断开;可以将它设置为开机自启

  1. (如果尚未安装)使用apt install systemd 安装,其他发行版使用其包管理器即可
  2. 编辑/etc/systemd/system/frps.service创建frp服务配置,写入以下内容
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[Unit]
# 服务名称,可自定义
Description = frp server
After = network.target syslog.target
Wants = network.target

[Service]
Type = simple
# 启动frps的命令,需修改为您的frps的安装路径
ExecStart = /path/to/frps -c /path/to/frps.toml

[Install]
WantedBy = multi-user.target

3.管理命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 启动frp
sudo systemctl start frps
# 停止frp
sudo systemctl stop frps
# 重启frp
sudo systemctl restart frps
# 查看frp状态
sudo systemctl status frps
# 开机自启动
sudo systemctl enable frps

之后的frpc也是大同小异,只需要更改名字和位置即可

配置

重点来了,frp有两个配置,一个frps.toml用于服务端,一个frpc.toml用于客户端

  1. 配置frps.toml
1
2
bindPort = 7000
vhostHTTPPort = 7890

bindPort不用管,vhostHTTPPort为连接的端口,默认为8080,但端口被我的评论占用了,所以改成7890

如像我这样,配置完后可以通过http://www.yourdomain.com:7890访问

  1. 配置frpc.toml
1
2
3
4
5
6
7
8
9
serverAddr = "x.x.x.x"
serverPort = 7000

[[proxies]]
name = "image-hosting"
type = "http"
localIP = "192.168.xx.xxx"
localPort = 7890
customDomains = ["www.example.com"]

serverAddr: 服务器IP

name: 取一个好记的名字

type: 因为要搭建网站所以选择http

localIP: 本机IP

localPort: 内网服务部署端口

customDomains: 绑定的域名

PS: 原本还有一个remotePort = 6000配置,看到文档没有就删了,实测没有影响

将和 www.example.com 的域名 A 记录解析到服务器的 IP 地址x.x.x.x

访问www.example.com:7890即可访问内网机器上的7890服务

Nginx配置

不得不说Nginx真是好用,配置方便,功能强大; 配置完frp,接下来就是nginx

因为上面只进行了内网穿透,内网的机器还需要配置nginx来显示网站

  1. 还没有安装的在等什么,使用apt install nginx安装nginx
  2. etc/nginx/conf.d/文件夹内添加配置文件,文件名随意,以.conf作为拓展名
  3. 增添配置,以下为我的配置
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
server {
    listen 7890;
    server_name www.example.com;
    root /home/image-hosting;

    fancyindex on;            
    fancyindex_exact_size off; 
    fancyindex_localtime on; 
    fancyindex_name_length 255; 
    fancyindex_time_format "%Y-%m-%d %H:%M:%S";

    location / {
    }
}

listen: 监听7890端口

server_name: 绑定的域名

root: 网站所在文件夹

以下配置开启文件引索,若无需求可以忽略

1
2
3
4
5
 fancyindex on;            
    fancyindex_exact_size on; 
    fancyindex_localtime on; 
    fancyindex_name_length 255; 
    fancyindex_time_format "%Y-%m-%d %H:%M:%S";

再一次尝试访问www.example.com:7890查看是否正常显示

去端口访问

整天带端口访问太丑了,可以使用nginx的反向代理功能解决,原理就是在服务器上套层nginx,将www.example.com反向代理至www.example.com:7890

以下是我的配置

1
2
3
4
5
6
7
server {
    listen 80;
    server_name www.example.com; # 设置的域名
    location / {
             proxy_pass  http://www.example.com:7890; # 反向代理至8080端口
    }
}

配置完尝试使用www.example.com访问

HTTPS

虽然现在已经可以较为优雅地访问了,但因为缺少ssl证书,每次访问都给我警告

frp支持为本地 HTTP 服务启用 HTTPS,但需要自行下载证书到内网机器,而且无法使用像certbot这样的工具,所以我选择在服务器的Nginx配置证书

关于如何获取证书,我的上上篇文章已经讲的很清楚了,下面是我的配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
server {
    listen 80;
    server_name img.inuya.ltd; # 设置的域名
    location / {
             proxy_pass  http://img.inuya.ltd:7890; # 反向代理至7890端口
    }
}

server {
    listen 443;
    server_name img.inuya.ltd;
    ssl_certificate /etc/letsencrypt/live/img.inuya.ltd/fullchain.pem;  # 配置证书
    ssl_certificate_key /etc/letsencrypt/live/img.inuya.ltd/privkey.pem;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # 表示使用的加密套件的类型。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
    location / {
            proxy_pass http://img.inuya.ltd:7890;
    }
}

图床

搞定了内网穿透,但怎么把图片显示出来呢,1P面板有个图床的docker镜像,用了下感觉很一般,不如自己建一个

因为没学过前端,所以只能边学边建,写出来的东西也是漏洞百出,但最起码能用了

文件引索

原本是想写一个文件引索,看了几篇文章都是无从下手,偶然看到一篇关闭Apache默认文件引索功能的文章,想到Nginx是否也有这个功能,找了一下还真有,只不过需要手动开启

在内网机器的nginx配置中添加以下内容

1
2
3
4
5
6
7
8
9
server {
    listen  80;
    server_name 192.168.31.112;
    root /home/image-hosting;
    autoindex on;    	#启用或禁用目录列表输出
    autoindex_format html; #设置目录列表的格式
    autoindex_localtime on;  #指定目录列表中的时间是否应以本地时区或 UTC 输出
    autoindex_exact_size off;  #是否应在目录列表中输出确切的文件大小
}

输入一个网站目录,看是否有类似界面

https://img.inuya.ltd/blog/nwct/blog_nwct_index.png
index预览

嵌入引索

因索有了,但我不想手动一个个翻图片,于是将它嵌入到了我的主页

在代码中添加<iframe>标签即可嵌入一个网页,因为我想显示Images目录的引索,所以src中填入了images/

1
2
3
<div class="div-pic">
    <iframe src="images/" width="100%" height="800px" scrolling="auto" framespacing="0" allowfullscreen="true"> </iframe>   
</div>

就像这样

https://img.inuya.ltd/blog/nwct/blog_nwct_iframe.png
嵌入

如果想要更换嵌入的网站,只需要修改src="" 里的内容为目标网址即可

美化引索

但这样还有一个问题,默认的引索在网站的背景是透明的,导致看不清文件名,CSS添加的背景太亮了,又偶然看见一篇用第三方模块来美化的文章

使用fancyindex模块替代默认的引索,来达到美化的效果

  1. apt install libnginx-mod-http-fancyindex安装模块
  2. 修改/创建/etc/nginx/conf.d/下的配置,添加以下内容以开启引索
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
server {
    listen 80;
    server_name 192.168.31.112;
    root /home/image-hosting;

    fancyindex on;            
    fancyindex_exact_size off; 
    fancyindex_localtime on; 
    fancyindex_name_length 255; 
    fancyindex_time_format "%Y-%m-%d %H:%M:%S";

    location / {
    }
}

返回网站,刷新即可看到新样式

fancyindex还有许多主题可选,如Nginx-Fancyindex-Themenginx-fancyindex-flat-theme

也可以用fancyindextheme关键字在Guthub搜索其他主题

补充

其实内网穿透这个想法很早就有了,但一直搁置到现在;未来可能还会把Twikoo评论也放到开发板上,还是要看评论的人多不多

最后祝大家玩得开心

参考

Inuyasha 支付宝支付宝
Inuyasha 微信微信
0%