"0元搞定!手把手教你建网站,简单得就像泡桶方便面一样,上线个人网站轻而易举!"

本文涉及的产品
.cn 域名,1个 12个月
简介: 没有服务器和公网IP,想要其他人访问自己做好的网站,该怎么办?今天教大家使用这款简单免费的内网穿透小工具——ngrok,有了它轻松让别人访问你的项目~

没有服务器和公网IP,想要其他人访问自己做好的网站,使用这款简单免费的内网穿透小工具——ngrok,有了它轻松让别人访问你的项目~

一、下载ngrok

官网地址:https://ngrok.com/(需要注册)

打开官网,点击Setup&Started,进入下载页面后,选择合适的操作系统和版本下载软件压缩包

将下载好的压缩包解压,得到一个可执行文件

二、进行穿透(参考官方文档)

回到刚刚进行下载的页面,往下滑可以看到当前用户的身份验证令牌,复制这行命令

打开刚刚解压生成的可执行文件的目录,执行这行命令

现在自己的账号信息已经成功保存到本地的ngrok配置文件了

接下来只需要执行 ngrok http加项目端口号 就可以启动内网穿透服务啦

打开浏览器访问生成的域名,就能访问到本地启动的前端项目,成功截图如下:

虽然现在可以成功访问到网站,但是每次启动都会重新生成域名,这不利于我们持续访问,这个该怎么解决呢?(PS教程第四部分)

三、访问生成的域名可能出现的问题(Vue 项目 invalid host header 问题

分析问题出现的原因

invalid host header => 无效的Host请求头

测试环境下的webpack有一个host检查功能(webpack的devServer中):如果不配置host就无法访问,用于防止不受信任的主机访问DevServer,当浏览器发出请求时,它会会检查请求中的主机头,若hostname 没有配置在内,则中断访问。

解决方案

设置跳过host检查,注意修改之后要重启服务

// vue3 vue.config.js
module.exports = {
    // 跳过检查host
    devServer: { disableHostCheck: true }
}

在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加disableHostCheck: true(有的是在vue.config.js里面,找到devServer对象进行添加即可)

devServer: {
  disableHostCheck: true,
}

四、解决每次穿透,域名会发生变化的问题

试想一下,如果你想将这个项目写进简历中去并备注了内网穿透,当hr点击你简历上面的链接时,你同时在本地开启服务,但是还是访问不了,那岂不是很尬尴呢~

所以我们需要一个静态的、不变的域名,那有小伙伴会问是去买一个域名吗?no,no,no,不用这么麻烦,可以去ngrok官网进行白嫖

打开官网,找到静态域名配置:

点击之后会自动给我们生成一个免费的域名,复制这行命令

开刚刚解压生成的可执行文件的目录,执行这行命令

成功的截图如下:

五、注意事项

1.每次用完内网穿透后记得及时关闭服务,否则别人可以直接访问你的电脑服务,会有一定的风险

2.保存好自己的Authtoken,不要泄露,如果泄露记得去官网重置

3.觉得有用的小伙伴点个关注和赞赞呀,你的鼓励是我前进的动力!!!

相关文章
|
8月前
|
人工智能 自然语言处理 安全
新年愿望清单:搭建官网选哪家?
而今立足「SaaS系统」面向中小企业的各种低成本建站产品让人眼花缭乱,小云对比了几大厂牌,梳理出一些【阿里云精选建站】的功能亮点,篇幅有限,各位看官可酌情参考——
180 0
|
搜索推荐 SEO
从零开始搭建群众权益平台(十一)
从零开始搭建群众权益平台(十一)
43 0
|
8月前
|
移动开发 安全 Linux
2024龙年新版ui周易测算网站H5源码/在线起名网站源码/运势测算网站系统源码
2024龙年新版ui周易测算网站H5源码/在线起名网站源码/运势测算网站系统源码
326 0
2024龙年新版ui周易测算网站H5源码/在线起名网站源码/运势测算网站系统源码
|
8月前
|
存储 运维 安全
年终总结:官网搭建知多少
官网搭建的核心工作可以分为以下5个部分,找到每一步的最佳解决方案,专属企业官网就近在眼前啦!
143 1
|
8月前
|
人工智能 前端开发
年末了!你的“建站搭子”找好了吗?
当我们换个角度,用流行语来了解我们的【阿里云建站】,会是怎样的呢?
|
8月前
|
设计模式 架构师 算法
为面阿里P8,我肝了一份651个技术分支的脑图,要么?(限时领)
这半年,很多人选择安稳,我偏偏不。。 哥们我就想要跳槽,要不干脆去面个【P8 级架构师】吧,也算是摸摸行情,为后面的一些安排提前做好规划~
|
机器学习/深度学习 程序员 TensorFlow
GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
过年回家的车票抢到了吗?春运一直以来都以难抢票著称,很多人开始通过各种软件和途径,希望能够完成购票大计。按照程序员一向“懒”的做事风格,必然是不愿意自己亲手去做的,直接写一段程序岂不是省时省力?今天分享GitHub标星两万的"抢票神器”。
8582 0
GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
|
Web App开发 JSON JavaScript
冰墩墩官方 NFT 盲盒将开售 约 626 元一个;京东到家程序员删库跑路被判刑; Laravel 9 正式发布 | 思否周刊
冰墩墩官方 NFT 盲盒将开售 约 626 元一个;京东到家程序员删库跑路被判刑; Laravel 9 正式发布 | 思否周刊
170 0
|
机器学习/深度学习
R爱好者福利|免费线上资源分享
最近有些R爱好者想要寻求R语言相关资料,以下为小编平常经常使用的免费开源的R语言资料,和大家分享。 其他统计,R语言书籍小编这也搜集了很多,但是由于版权等问题,不能直接分享,需要可后台联系,或者加小编微信(菜单:资料获取)。
291 0
R爱好者福利|免费线上资源分享
|
弹性计算 数据库 云计算
经验之谈:阿里云产品总攻略
经验之谈:阿里云产品总攻略
704 0
经验之谈:阿里云产品总攻略

热门文章

最新文章