本地HTML+CSS页面通过IIS和内网穿透(natapp1)实现公网访问

观看前注意:
1、本文是因为女朋友看到了某大神做的520情书模板,被逼无奈所以学习,效果是发送给女朋友二维码即可显示出HTML和CSS的网页页面。
2、另外natapp内网穿透隧道需要花(13元人民币)的巨资,当然我已经买完了,也可以借给大家使用。
3、页面在被访问时需要本机启动IIS和natapp工具,当然如果你有钱买服务器,估计也就不需要使用natapp这种了。但是如果不买服务器一定注意,本机的两个程序不能关!!!这样才能访问,否则不行。

1、首先准备好需要显示的html和css放置于同一目标路径

如图:我的放置在c盘website文件夹内
在这里插入图片描述
注意:html主页面一定修改为index.html,方便IIS配置

2、IIS配置方式

1、首先需要打开IIS功能:
找到本机控制面板---> 程序--->程序与功能--->启用或关闭Windows功能
在这里插入图片描述 2、开启IIS权限功能
在这里插入图片描述

更改后确认,等待配置修改完成即可。

3、配置本地网页
WIN+R 打开 运行 并输入:compmgmt.msc
在这里插入图片描述
如下图所示步骤打开添加网站
在这里插入图片描述
网站配置内容如下:
在这里插入图片描述
配置完成后,点击浏览即可访问HTML+CSS所显示的界面。
在这里插入图片描述

3、配置natapp

1、打开网址:https://natapp.cn/
在这里插入图片描述
2、下载:
在这里插入图片描述

选择对应版本即可!!!

在这里插入图片描述
3、编写配置文件
创建文件:config.ini
编写内容如下:

#将本文件放置于natapp同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken=      #对应一条隧道的authtoken
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

如图:
在这里插入图片描述
注意两个文件需要在同一文件目录下

用我云盘配置完成的也可以!直接提取,修改authtoken后即可使用


链 接:https://pan.baidu.com/s/15Y0_BpBuJ1BG1f23iUNGyg
提取码:62zi

购买流程:
登录注册哈,就不细说了,买的话建议买第二个!如图所示:

在这里插入图片描述
购买完成后注意, authtoken 需要填写到上面的 config.ini文件在这里插入图片描述

4、最后汇总配置!!!

打开IIS网站配置,选择绑定!
在这里插入图片描述
选择网站信息并编辑:

在这里插入图片描述
编辑如下:
在这里插入图片描述
绑定完成后,重启网页:
在这里插入图片描述
此时,找到刚才下载的natapp.exe程序,双击启动即可:
在网页输入:域名.natapp1.cc
即可显示网页内容:

如图:
在这里插入图片描述
(这个网页模板也在网盘链接,有兴趣可自行下载。)
基本上到这里就已经实现了公网访问,访问你的网址,即可显示内容。
但是,再加点别的乐趣!!!
百度搜索草料二维码生成器,输入自己的网站,自动生成二维码,可以自定义二维码格式。
当当当,如图所示:
在这里插入图片描述
哎!手机扫码,送给女朋友,13块哄女朋友开心,完美!
对了,谷歌浏览器有时候默认为 https,所以在输入网址时注意一下!

搞定了,就这么简单,撒花撒花!!!!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_白衣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值