croyoux's blog

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[Unit]
 2# 服务名称，可自定义
 3Description = frp server
 4After = network.target syslog.target
 5Wants = network.target
 6
 7[Service]
 8Type = simple
 9# 启动frps的命令，需修改为您的frps的安装路径
10ExecStart = /path/to/frps -c /path/to/frps.toml
11
12[Install]
13WantedBy = multi-user.target

3.管理命令

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

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

配置

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

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

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

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

  1. 配置frpc.toml
1serverAddr = "x.x.x.x"
2serverPort = 7000
3
4[[proxies]]
5name = "image-hosting"
6type = "http"
7localIP = "192.168.xx.xxx"
8localPort = 7890
9customDomains = ["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. 增添配置，以下为我的配置
 1server {
 2    listen 7890;
 3    server_name www.example.com;
 4    root /home/image-hosting;
 5
 6    fancyindex on;            
 7    fancyindex_exact_size off; 
 8    fancyindex_localtime on; 
 9    fancyindex_name_length 255; 
10    fancyindex_time_format "%Y-%m-%d %H:%M:%S";
11
12    location / {
13    }
14}

listen: 监听7890端口

server_name: 绑定的域名

root: 网站所在文件夹

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

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

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

去端口访问

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

以下是我的配置

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

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

HTTPS

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

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

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

 1server {
 2    listen 80;
 3    server_name img.inuya.ltd; # 设置的域名
 4    location / {
 5             proxy_pass  http://img.inuya.ltd:7890; # 反向代理至7890端口
 6    }
 7}
 8
 9server {
10    listen 443;
11    server_name img.inuya.ltd;
12    ssl_certificate /etc/letsencrypt/live/img.inuya.ltd/fullchain.pem;  # 配置证书
13    ssl_certificate_key /etc/letsencrypt/live/img.inuya.ltd/privkey.pem;
14    ssl_session_timeout 5m;
15    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
16    # 表示使用的加密套件的类型。
17    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # 表示使用的TLS协议的类型。
18    ssl_prefer_server_ciphers on;
19    location / {
20            proxy_pass http://img.inuya.ltd:7890;
21    }
22}

图床

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

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

文件引索

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

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

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

输入一个网站目录，看是否能浏览文件

嵌入引索

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

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

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

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

美化引索

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

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

  1. apt install libnginx-mod-http-fancyindex安装模块
  2. 修改/创建/etc/nginx/conf.d/下的配置，添加以下内容以开启引索
 1server {
 2    listen 80;
 3    server_name 192.168.31.112;
 4    root /home/image-hosting;
 5
 6    fancyindex on;            
 7    fancyindex_exact_size off; 
 8    fancyindex_localtime on; 
 9    fancyindex_name_length 255; 
10    fancyindex_time_format "%Y-%m-%d %H:%M:%S";
11
12    location / {
13    }
14}

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

fancyindex还有许多主题可选，如Nginx-Fancyindex-Theme和nginx-fancyindex-flat-theme

也可以用fancyindex加theme关键字在Guthub搜索其他主题

补充

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

最后祝大家玩得开心

参考

Tags: