本地项目放到公网访问!炒鸡煎蛋!
本文简介
点赞 + 关注 + 收藏 = 学会了
今天介绍一个超哇的工具:Localtunnel
Localtunnel
是一个基于 Node.js
的内网穿透工具,它允许开发者将本地开发环境暴露给互联网,然后你的亲戚朋友就可以访问它了。
Localtunnel
的应用场景:
- 开发调试:你可以在本地环境运行
Web
服务,然后通过Localtunnel
将其暴露到公网,其他人就可以远程查阅或调试。如果你的Web
项目是运行在移动端,也可以通过Localtunnel
将其暴露出来,然后在手机上访问。 - 展示作品:要向外部展示你的作品时也可以使用
Localtunnel
将其暴露出来,尤其适合那种临时展示的场景,展示完就关掉服务,别人就不能再访问了。也很适合面试时需要展示作品,但又没钱买域名服务器。或者有些纯前端的工友在远程面试时需要展示作品就可以让Localtunnel
帮个忙。
动手操作
先说说如何使用。
我随便找个项目演示。我使用 Vite
创建了一个 Svelte
项目。
npm create vite@latest svelte-demo
cd svelte-demo
npm install
之后可以执行 npm run dev
运行项目。
也可以打包后再运行。
npm run build
npm run preview
我是打包后再运行项目的,运行完 npm run preview
后给回一个地址我,https://localhost:4173/
这里的端口是 4173
,记住这个端口号。
然后执行 Localtunnel
提供的命令把你本机的这个端口暴露到公网。
npx localtunnel --port 端口号
我前面得到的端口号是 4173
,所以就执行下面这条命令
npx localtunnel --port 4173
执行完这条命令会返回一个地址给你,这个网址是动态分配的。在浏览器打开这个地址。
此时需要你输入一个密码,这个密码就是你的IP地址。
如果你不知道你的IP地址是多少,可以继续往下拉,看到 loca.lt/mytunnelpas… ,然后点进去就能查看到你的IP地址。
把你的IP地址复制到“Tunnel Password”输入框,然后点击“Click to Submit”按钮,等个几秒钟就能在公网访问你的网站了。
但是,如果别人(或者别的设备)想访问你的网站,你需要把你的网址和你的IP给到别人。建议不要把你的IP随便发给陌生人。或者你可以使用手机开个热点,用蜂窝网络的IP。
前面是通过 npx
去执行 Localtunnel
的命令,如果你需要经常使用 Localtunnel
也可以全局安装它。
全局安装的命令:
npm install -g localtunnel
全局安装 Localtunnel
后,只需使用 lt
命令启动隧道即可。
lt --port 端口号
更多 Localtunnel
的配置可以查阅官方文档。
点赞 + 关注 + 收藏 = 学会了
共同学习,写下你的评论
评论加载中...
作者其他优质文章