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

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

frp

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

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

安装&使用

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

到Releases处下载适合的架构/系统的压缩包，解压到任意目录
使用./frps -c ./frps.toml启动服务端
使用./frpc -c ./frpc.toml启动客户端

使用 systemd 开机自启动

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

(如果尚未安装)使用apt install systemd 安装，其他发行版使用其包管理器即可
编辑/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用于客户端

配置frps.toml

1
2


bindPort = 7000
vhostHTTPPort = 7890

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

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

配置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来显示网站

还没有安装的在等什么，使用apt install nginx安装nginx
在etc/nginx/conf.d/文件夹内添加配置文件，文件名随意，以.conf作为拓展名
增添配置，以下为我的配置

 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;  #是否应在目录列表中输出确切的文件大小
}

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

嵌入引索

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

在代码中添加<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>

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

美化引索

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

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

apt install libnginx-mod-http-fancyindex安装模块
修改/创建/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-Theme和nginx-fancyindex-flat-theme

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

补充

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

最后祝大家玩得开心

参考

Last modified on 2024-01-22