前言

前段时间在做项目的时候聊到了展示项目进行答辩，此时就提到了内网穿透，特此记录一下内网穿透的方法和步骤。

概念

内网穿透是什么？

内网穿透是一种网络技术，通过它可以让位于内网环境中的计算机或设备能够被外网访问。内网穿透的主要作用是解决内网环境不能直接访问外网或外网不能直接访问内网的问题，从而实现跨网访问和数据共享。

内网穿透通常会涉及到一个服务器或服务端，可以是自建的服务器或者使用第三方提供的服务。用户在内网中安装相应的客户端程序，通过和服务端的通信，实现对内网环境的访问。内网穿透的原理一般是通过将内网环境中的数据包经过加密或隧道技术传输到外网环境，然后再由服务端转发到目标设备，这样就可以实现内网设备的远程访问。

内网穿透的原理

一图胜千言。下面展示一下内网穿透的原理。

如何使用内网穿透？

github 开源项目 frp

GitHub项目地址：https://github.com/fatedier/frp
通过这个开源项目可以轻松的实现客户端和服务端的连通。

前置准备

1. 一台Linux轻量2核2G服务器(需要开放公网IP)。
2. 本地准备一个需要展示的项目。

过程

在Linux服务器上安装frp相关软件

有两种方式：
第一种方式：官网下载。利用文件上传工具由本地机器传输到服务器上。
推荐工具：FileZilla Client。
第二种方式：远程下载并解压。（推荐）
远程获取frp安装包：

cd /www/server/frp
wget https://github.com/fatedier/frp/releases/download/v0.61.1/frp_0.61.1_linux_amd64.tar.gz

解压缩压缩包：

tar -zxvf frp_0.61.0_linux_amd64.tar.gz

接下来直接启动服务器上的服务（frps.toml相关配置已经配置完毕，无需改动）。

# frps.toml
bindPort = 7000 # 这个端口需要在安全组内开放，7001、7002等非冲突端口都可以作为绑定

在有 frps.toml 的目录下执行下面的命令：

./frps -c ./frps.toml

至此服务端配置完毕，等待连接客户端。

客户端配置

为了确保正常连接，建议客户端的版本和服务端一致（v61.1）
在Github官网：点此跳转到 frp/releases

windows/mac选用对应的架构进行下载。
解压之后可以得到如下的文件夹：

编写配置文件：
由于是客户端我们只需要编写frpc.toml即可：

# frpc.toml
serverAddr = "x.x.x.x" # 服务器的公网地址
serverPort = 7000 # 与服务器开放的7000端口保持一致
includes = ["./confd/*.toml"] # 所有代理文件，如果没有confd文件需要手动新建

创建代理文件 test.toml

# ./confd/test.toml
[[proxies]]
name = "xxx"
type = "tcp"
localIP = "127.0.0.1" 
localPort = 8081
remotePort = 8081

假如出现下述报错：
connectex: No connection could be made because the target machine actively refused it.表示访问不到本机地址和端口
解决办法：
修改localIP，可以换成 localhost 这里的报错的原因可能是本机host文件没实现映射。

启动服务端：
在命令行运行：
打开 cmd / powershell
输入命令：
frpc.exe -c frpc.toml
访问对应的服务器+端口号即可访问成功! (e.g. 47.xxx.xx.xx:8081)

注意事项

所有的预计开放的端口都需要在安全组中配置。
本地启动的服务必须在指定的端口运行。

Vue/Vite 运行端口的配置

// vue.config.js
module.exports = {
  devServer: {
    port: "8081"  // 显式设置为字符串
  }
}

vite.config.js 配置如下：

总结

frp内网穿透技术在展示方面还是杠杠的，但是我们需要注意内网穿透的不安全性，所以一定要缩短开放服务的时间哦。

END！