本地实现内网穿透

  • 工具:ngrok
  • 环境:Mac OS 10.15
  • 其他工具:nginx

配置nginx

  1. 使用homebrew安装nginx
$ brew install nginx

通过homebrew安装的工具,会保存在/usr/local/etc目录下

  1. 启动nginx
$ nginx
  1. 打开浏览器,输入http://localhost:8080,看到以下界面,表示安装成功。

nginx

  1. 修改nginx配置
  • 进入nginx目录:
$ cd /usr/local/etc/nginx
$ vim nginx.conf
  • 修改nginx.conf文件中的下面部分
server {
    #修改端口号
        listen       80;
        server_name  localhost;

        location / {
            #修改根目录
            root   /Users/dizent/Documents/themes/Site/Category/;
            index  index.html index.htm;
        }
        ……

我在Users/dizent/Documents/themes/Site/Category目录下放置了一些静态页面,以便调试。

image

  • 保存后重新启动
$ nginx -s reload
  • 浏览器打开页面可以看到

页面展示

内网穿透

经过上一章的操作,在本地已经可以通过浏览器访问该文件夹下的文件,接下来我们就要操作内网穿透,使用户可以在所有地方都可以访问该网页。

  1. 安装ngrok

下载页面

  1. 下载之后,打开下载目录,并解压
$ unzip /ngrok.zip
  1. 获取授权

复制授权码

  • 复制授权码,在终端输入命令:
    `shell
    $ cd [ngrok目录]

$ ./ngrok authtoken [授权码]


4. 开启内网穿透

```shell
$ ./ngrok http 80
ngrok by @inconshreveable                                                                                                                                               (Ctrl+C to quit)

Session Status                online
Account                       Dizent (Plan: Free)
Version                       2.3.34
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://13e89141.ngrok.io -> http://localhost:80
Forwarding                    https://13e89141.ngrok.io -> http://localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

出现以上代码时表明启动成功。

  1. 在任意联网的设备输入上述地址:http://13e89141.ngrok.io

电脑展示效果

手机展示效果

  1. 使用内网穿透分享文件
  • 在刚才放置网站的文件夹下,访问任意想分享的文件,例如:

文件

  • 我在根目录下新建了一个/images文件夹,并放置了一张图片,命名为二维码.jpg

  • 在浏览器输入http://13e89141.ngrok.io/images/二维码.jpg

访问文件

内网穿透免费版网速较慢,只为可以实现内网资源在外网可以访问,一般只做接口调试使用。
如果需要更好的网速体验,请使用公网服务器。或者购买官方的加速服务器。