ngrok 一个可以使你的本地项目在线上正常访问的库

前言

本文只是很简单的一个入门使用方法，详细的使用可以查看下面的相关资源中的文档
本文目的：使开发者可以将本地正在开发的项目，直观的展示给他人正常访问

资源

ngrok 官网
ngrok npm 地址

使用方法

1. 可以在官网下载页面下载您所需要的相应的系统版本程序（不推荐的方式）

• 下载之后将压缩包解压即可使用了

image.png

• 打开程序之后直接敲相应的命令行即可

image.png

2. 可以使用 npm 全局安装使用

参照着上面的ngrok npm 地址里面的使用方法

• 相关的命令行

# 全局安装
npm install ngrok -g
# 当前项目安装
npm install ngrok
# 启动 这个端口号得和你的本地项目起的服务保持一致
ngrok http 8080

Example

使用昨天的 jsdoc 的示例文件

jsdoc 一个JavaScript API文档生成器

1. 启动本地服务

cd Desktop/jsdocDemo/xiaochuan
http-server

• 浏览器打开查看是否可以本地正常访问

image.png

2. 之后再打开一个命令行窗口使用 ngrok

# 全局安装
npm install ngrok -g
# 测试是否全局安装成功，成功之后即可正常使用
ngrok -v
# 之后就可以将本地起的服务生成一个可以线上访问的地址
ngrok http 8080

• 敲完上面的命令行后，窗口会如下显示

image.png

• 将里面的 Forwaring 后面的地址复制出来即可正常访问啦

http://6954b8d4.ngrok.io
https://6954b8d4.ngrok.io

3. 之后是测试时间喽

• PC 端访问效果

image.png
image.png
image.png

• 手机端访问效果

472211953781240261.png
686062274544449377.jpg
272313312477592023.jpg

• 而且在每次访问的时候命令行窗口中也会有相应的访问记录

image.png

更新

• 问题

我这边使用的是 vue 开发的，如果是 npm run dev 之后，再使用这个 ngrok ，出来的链接打开的话会显示如下图所示

image.png

• 解决方法

在 npm run build 打包之后的 dist 文件夹中使用 http-server 起服务即可

image.png