"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.觉得有用的小伙伴点个关注和赞赞呀,你的鼓励是我前进的动力!!!

相关文章
|
安全 Java 关系型数据库
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
我通常都会说自己搭建一个网站,利用阿里云/腾讯云/华为云/七牛云等等各种云服务器来快速搭建一个属于自己的装x小网站,虽然不是很牛x,但是对于说找实习、做毕业设计加分,这种纯粹是绰绰有余,别人会觉得你很有动手能力,话不多说,马上开始,给我十分钟,带你学会一个装x的小知识点。
1778 0
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
|
小程序 程序员
做一个社区论坛小程序需要多少钱
社交是在我们生活中必不可少的,做APP成本较高,所以很多创业者就想做一个成本较小的小程序,几天我们给大家说说做一个社交小程序的费用需要多少钱
458 0
做一个社区论坛小程序需要多少钱
|
开发工具 git 开发者
【保姆级教程】白嫖老外的云服务器
【保姆级教程】白嫖老外的云服务器
【保姆级教程】白嫖老外的云服务器
|
域名解析 缓存 网络协议
保姆级教程从零搭建云服务器(小彩蛋,请大家看烟花秀)
保姆级教程从零搭建云服务器(小彩蛋,请大家看烟花秀)
473 0
保姆级教程从零搭建云服务器(小彩蛋,请大家看烟花秀)
|
弹性计算 安全 应用服务中间件
阿里云2022开年采购季活动攻略(新手注意事项及活动细节)
阿里云2022年的开年采购季活动正在火热进行中,但是活动内还是有些小细节需要大家注意下,下面逐一为大家介绍下今年采购季活动的玩法细节及注意事项。
阿里云2022开年采购季活动攻略(新手注意事项及活动细节)
直播间源码该如何选择,新人还在等,老司机已经进来看了
想开发一套自己的直播系统,却不知道直播间源码该如何选择?那你就来对地方了,直播间源码该如何选择才能够避坑呢,小编拿经验告诉你只需要从这三点入手。
直播间源码该如何选择,新人还在等,老司机已经进来看了
|
弹性计算 数据库 云计算
经验之谈:阿里云产品总攻略
经验之谈:阿里云产品总攻略
695 0
经验之谈:阿里云产品总攻略
|
存储 弹性计算 关系型数据库
你好 阿里云——手把手教你搭建个人网站(上云良心品,细致到想哭)
时间过得真快,备案快要通过下来了,自己也马上要成为一个真正的站长了,今天就来说一下我如何使用”云平台方案调研/技术选型”、”云上建站/开发过程”、”架构解析/优化”、”上云前后对比”、”遇到的问题及解决方案”经历吧。
15028 0
大神引路:新手云大使入门导引
在开始文章前,先为大家带来一点福利。阿里云最近开始发放代金券了,新老用户均可免费获取,新注册用户可以获得2000元代金券,老用户可以获得270元代金券,建议大家都领取一份,反正是免费领的,说不定以后需要呢?阿里云代金券:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=c2dubyfu 本文撰写不易,欢迎大家领我幸运券以资鼓励。
给你一份网站升级攻略,让你的网站焕然一新
虽然已有官网,但是公司业务繁忙没时间去维护?久而久之网站就出现了很多问题,老板不看还好,一看不得了,糟糕的界面,过时的内容,还怎么好意思拿去给客户看?需要马上改版!鉴于很多客户都有这种类似的情况,微梦科技这就给你分析分析网站改版升级要从哪些方面入手。