如何安全的利用内网穿透技术巧妙解决开发中的难题

关于内网穿透

内网穿透可以简单的理解就是把本地服务暴露到外网。这里不讲太多，有兴趣可以进行网络搜索，或者查看我之前的两篇文章：

• Nodejs实现一个内网穿透服务
• 使用node js 实现一个简单代理服务器

开发中的棘手问题

在开发过程中，我们总是一边调试，一边开发，难免会遇到一问题。比如：

1. 开发H5页面的时候，我们希望能够随时通过手机查看页面效果。
2. 我们于使用第三方服务时，通常是需要一个公网IP或者域名。

第一个问题还容易解决一些，要手机和开发机连接同一个局域网，但是在一些情况下，你的电脑IP会变，也是比较麻烦的。

对于第二个问题，比如，系统需要接微信支付，在整个支付系统中，微信是需要访问一个公网的备案域名。在接入这样的第三方系统时，开发过程通常是比较痛苦的，比如，需要频繁部署代码，打印日志，查看错误信息。整个过程下来，基本都在部署代码和查看日志了，非常麻烦。

内容穿透如何解决这些问题？

结合开源工具很容易解决这些问题，但是如果有定制化，就需要做些功课，总之，都不难。

下面是简单实用的一个方案：

1. 我们需要一个公网服务器，公网服务器需要有一个公网IP，比如8.8.8.8。

2. 我们通过DNS给公网服务绑定域名，比如：

   • 前端 8.8.8.8 -> dev-web.xxx.com
   • 后端 8.8.8.8 -> dev-serve.xxx.com
   • 其它，可以很多 8.8.8.8 -> 其它域名

3. 服务器上配置 frp 服务端（一个开源软件，后续简单介绍）：

   1. frps.toml

   [common]
   bind_port = 7000
   vhost_http_port = 80 # 监听的服务器端口
   token = "12345678" # 类似于密码

   2. 启动 ./frps -c ./frps.toml

4. 开发机配置 frp 客户端：

   1. frpc.toml

   [common]
   server_addr = "你的公网服务器IP地址"
   server_port = 7000 # 与服务端的 bind_port 对应
   token = "12345678" # 与服务器的 token 对应
   
   [dev-serve]
   type = "http"
   local_ip = "127.0.0.1"
   local_port = 3000
   custom_domains = "dev-web.xxx.com"
   
   [dev-web]
   type = "http"
   local_ip = "127.0.0.1"
   local_port = 8000
   custom_domains = "dev-serve.xxx.com"

   2. 启动 ./frpc -c ./frpc.toml

5. 开发机启动 3000 服务和 8000 服务。

上面的配置，逻辑也很简单：配置了DNS之后，用户就可以通过公网访问dev-web.xxx.com，经过dev-web.xxx.com的流量就会转发到你本地3000端口，3000端口的响应数据会沿着这条链路返回到用户那里。于是，你就可以在本地实时观察公网数据。

上面的配置过程是不是很简单？这么简单的方案，可以完美解决上面的棘手问题，特别是第一个，至少使对接效率成几十倍的提高。为什么？

还是以支付为例，需要调试的接口和数据都可以通过打断点来观察每一步发生了什么，实时的查看分析问题。比部署查看日志要提高太多太多。

关于 FRP

frp 是GitHub上一个开源项目。是一种快速反向代理，允许您将位于 NAT 或防火墙后面的本地服务器暴露给 Internet。目前支持TCP 和UDP ，以及HTTP 和HTTPS协议，可以将请求通过域名转发到内部服务。

这里，我们利用了它支持HTTP协议的功能。

部署 FRP 服务端

以 Ubuntu 为例，进行安装配置：

1. 下载目前最新版本： frp_0.54.0_linux_amd64.tar.gz。下载适合自己服务器的包。

2. 上传到 home 目录进行解压。

3. cd 到 frp_0.54.0_linux_amd64 目录。

4. 进行服务端配置，打开 frp_0.54.0_linux_amd64 下的 frps.toml，写入以下内容：

   [common]
   bind_port = 7000 # 所有客户端需要绑定端口
   vhost_http_port = 80 # 监听的服务器端口
   token = "12345678" # 类似于密码

5. 在当前目录下执行./frps -c ./frps.toml启动服务。

非常简单，使用上没有什么复杂的东西需要理解。

部署 FRP 客户端

以 Mac M系列芯片为例，进行安装配置：

1. 下载目前最新版本：frp_0.54.0_darwin_arm64。下载适合自己客户端的包。

2. 解压到合适目录。

3. cd 到 frp_0.54.0_darwin_arm64 目录。

4. 进行客户端配置，打开 frp_0.54.0_darwin_arm64 下的 frpc.toml，写入以下内容：

   [common]
   server_addr = "你的公网服务器IP地址"
   server_port = 7000 # 与服务端的 bind_port 对应
   token = "12345678" # 与服务器的 token 对应
   
   [dev-serve]
   type = "http"
   local_ip = "127.0.0.1"
   local_port = 3000
   custom_domains = "dev-web.xxx.com"
   
   [dev-web]
   type = "http"
   local_ip = "127.0.0.1"
   local_port = 8000
   custom_domains = "dev-serve.xxx.com"

5. 在当前目录下执行./frpc -c ./frpc.toml启动服务。

也是非常简单，使用上也是没有什么需要理解的，照葫芦画瓢就行。

总结

对于服务端和客户端主要区别这两个文件和这两个命令：

1. 服务端：配置文件frps.toml，启动命令./frps -c ./frps.toml
2. 客户端：配置文件frpc.toml，启动命令./frpc -c ./frpc.toml

很像，就是server和client的区别。

思考

其实这种基础东西对于一线开发者来说本不应该自己去折腾，但是目前很多公司没有配置这样的服务，一线开发者不得不寻找各种解决方案。

但是，这种基础的东西，也可以认为是开发中的一环，如果设计一个平台，集成各种工具，使开发和部署变得异常简单，不知道这种服务会不会有人买单。但是至少一个大公司，应该有团队去统一解决这些问题，这样可以极大的提高研发效率。

如果你们公司有这样的需求，而恰巧你服务于效能团队，可以思考下这些问题，希望提供一个思路。