【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」

news2025/2/21 21:34:10

文章目录

  • 1.前言
  • 2.Windows网页设置
    • 2.1 Windows IIS功能设置
    • 2.2 IIS网页访问测试
  • 3. Cpolar内网穿透
    • 3.1 下载安装Cpolar
    • 3.2 Cpolar云端设置
    • 3.3 Cpolar本地设置
  • 4.公网访问测试
  • 5.结语

1.前言

在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类,为方便用户使用,还出现了XAMPP、PHPStudy、宝塔面板等等一系列集成服务,都是为了方便我们能快速建立网站。是不是不适用这些软件就无法建立网站了呢?答案当然是否定的,在Windows系统中实际上集成了建立网站所必须的软件环境。今天就让我们来看看,如何使用Windows自带的网站程序建立网站吧。

2.Windows网页设置

在Windows系统自带的众多服务中,有一项IIS服务。IIS全称为Internet Information Server,其中包括了Gopher server和FTP server,安装了IIS服务,也就意味着能建立一个网页。而且IIS还能有编辑环境的界面“FRONTPAGE”、有全文检索功能的“INDEX SERVER”、有多媒体功能的“NET SHOW”之类。

了解了什么是IIS服务后,我们就可以在自己的Windows电脑上开启IIS服务,尝试创建一个网页了。

2.1 Windows IIS功能设置

首先,我们需要开启Windows的IIS服务,而些服务可以在开始菜单的设置中打开。具体操作方式是打开开始菜单,点击设置按钮,在设置页面选择应用项目

20230330092201

进入应用界面后,拉到页面最下方,点击程序和功能

20230330092202

程序和功能页面,点击左侧的启动或关闭Windows功能按钮,就会出现一个小窗口,其中就包括了,我们需要安装的IIS服务(Internet Information Server)。

20230330092203

在这里可以看到,Internet Information Server项目下有很多内容,这里我们要勾选Web管理工具万维网服务两项。而在这两项中,并不需要勾选全部内容,具体需要勾选的内容如下:

20230330092204

20230330092205

在所需项目都勾选完成后,就可以点击页面下方的确认按钮,安装这些项目和服务

20230330092206

20230330092207

等待一小段时间,Windows会通知所需服务已经安装完成。

20230330092208

这时我们就可以使用IIS服务创建新的网页了。

2.2 IIS网页访问测试

在完成IIS服务的开启后,我们就可以着手建立网页了。首先我们打开Windows的控制面板,在其中找到管理工具项目

20230330092209

管理工具中,可以找到Internet Information Server(IIS)管理器项目,双击打开,就能进入网页设置的主界面。

20230330092210

20230330092211

在“Internet Information Server(IIS)管理器”页面左侧,可以看到该计算机下的网页页面。一般Windows会默认自建一个名为“Deault Web Site”的页面(有大佬科普这个页面经常会被攻击,因此我们可以将其停止运行)。不过我们这时并不是要对该网页进行操作,因此不必管他。

我们在网站图标上单击鼠标右键,点选右键菜单中的添加网站

20230330092212

在弹出的添加网站页面,就能对打算新建的网站进行设置。具体的设置内容包括“网站名称(用以区别其他已有的网站)”、“应用程序池(该网站使用那些程序运行,非高手勿修改)”、“物理路径”(打算建立的网站根目录,由于Windows对C盘的权限要求较高,因此最好将网站根目录建立在其他磁盘下)、“IP地址”和“端口”等

20230330092213

在这个例子中,我们设置一个网站名称为test”的网页,选择使用DefaultAppPool程序池,物理路径(网站的根目录)放在D盘下新建的website\test文件夹内。而IP地址选择全部未分配,端口则选择8080(这里的端口需要选择未被占用的端口,否者我们的网页会因端口占用而无法启动)。完成这些设置后,就可以点击下方的确定按钮,完成新建网站的设定。

接下来,我们点选新建的test网页后,在右边的设置框内找到身份验证选项,双击进入“身份验证”页面。

20230330092214

在“身份验证”页面,我们找到并点选匿名身份验证,选中后点击右侧的“编辑”按钮,对“匿名身份验证”内容进行编辑。具体的编辑内容很简单,就是勾选应用程序池标识即可。编辑完成后,点击“确定”保存修改。

20230330092215

最后,我们我们在“test”网页设置窗口,找到并点选目录浏览并双击,在“目录浏览”设置页面选择启用目录浏览。

20230330092216

20230330092217

完成后,我们再点击左侧的“test”页面,进入网页设置窗口。为测试我们的网页是否能正常运行,可以点击窗口右侧的浏览按钮,对新建的网页进行访问测试。

20230330092218

20230330092219

在这里,网页已经成功显示内容,而没有返回“404”之类的错误信息,说明我们的网页已经建立成功。其中,newpage.html是笔者建立的内容文件,只要点击该文件(或在域名后加入改文件名及扩展名),就可以在新建的网页中显示内容。

20230330092220

当我们的网页建立成功,就可以向其中填充内容,我们可以在网上或其他取到获得网页脚本压缩包,将它们解压到新网页的根目录下,就能装载脚本的内容。

不过,不能在公共互联网访问的网页没有实际意义,因此我们可以使用cpolar内网穿透,将这个ISS服务创建的新网页发布到公共互联网上。

3. Cpolar内网穿透

3.1 下载安装Cpolar

想要在本地电脑上安装cpolar内网穿透,我们可以访问cpolar的官网,下载Windows版本的cpolar软件

cpolar官网:https://www.cpolar.com/

20230330092221

20230330092222

Cpolar下载完成后,将下载的文件解压,双击解压后的.msi文件,即可自动执行安装程序。接着只要一路Next就能完成安装。

20230330092223

20230330092224

为保证客户数据的安全,cpolar会为每个用户创建独立的数据隧道,并辅以用户密码和token码保证数据安全,因此我们必须注册cpolar,注册过程也非常简单,只要在cpolar主页右上角点击“用户注册”,在注册页面填入必要信息,就能完成注册。

20230330092225

20230330092226

3.2 Cpolar云端设置

完成cpolar内网穿透的安装注册和本地网页搭建后,我们就可以着手建立一条内网穿透数据隧道,将这个网页发布到公共互联网上。由于网页需要能够稳定访问,而cpolar免费版的数据隧道每24小时重置一次。笔者并不想每天进行重连设置,因此cpolar将升级至vip版,以便能获得能长期稳定存在的内网穿透数据隧道。

要建立长期稳定存在的数据隧道,我们先登录cpolar的官网,并在用户主页面左侧找到预留按钮,并点击进入cpolar的数据隧道预留页面。在这里生成一个公共互联网地址(也可以看做数据隧道的入口),由于此时这个地址没有连接本地的软件输出端口,因此也可以看做是一条空白的数据隧道。

20230330092227

在预留页面,可以看到很多种可保留的数据隧道,这里我们选择保留二级子域名栏位。如果自己已经购买了域名的,也可以选择“保留自定义域名”栏位,但需要在域名供应商处对自有的域名进行解析,才能与cpolar配合使用。

20230330092228

在“保留二级子域名”栏位,需要进行几项信息的简单设置

  • 地区:服务器所在区域,就近选择即可
  • 二级域名:会最终出现在生成的公共互联网地址中,作为网络地址的标识之一
  • 描述:可以看做这条数据隧道的描述,能够与其他隧道区分开即可)

完成这几项设置后,就可以点击右侧的“保留”按钮,将这条数据隧道保留下来。

20230330092229

20230330092230

如果这条数据隧道不打算再使用,还可以点击右侧的x将其轻松删除,节约宝贵的隧道名额。

3.3 Cpolar本地设置

二级子域名保留好后,我们就可以回到cpolar本地客户端,将cpolar云端生成的公共互联网地址与本地IIS建立的网页连接起来,让我们能在公共互联网上打开本地电脑上的网页。

在本地打开并登录cpolar客户端(可以在浏览器中输入localhost:9200直接访问,也可以在开始菜单中点击cpolar客户端的快捷方式)。

20230330092231

登录进入cpolar客户端后,点击客户端主界面左侧隧道管理——创建隧道按钮,进入本地隧道创建页面(如果要创建没24小时重置地址的临时数据隧道,可直接在此进行设置,不必再cpolar官网设置空白数据隧道)。

在这个页面,同样需要进行几项信息设置,这些信息设置包括:

1. 隧道名称 – 可以看做cpolar本地的隧道信息注释,只要方便我们分辨即可;
2. 协议 – 我们建立的是http协议的网页,因此选择http协议;
3. 本地地址 – 本地地址即为本地网站的输出端口号,而我们在设置网页时填入的端口号为8080,因此这里也填入8080;
4. 域名类型 – 在这个例子中,我们已经在cpolar云端预留了二级子域名的数据隧道,因此勾选“二级子域名”(如果预留的是自定义域名,则勾选自定义域名),并在下一行“Sub Domain”栏中填入预留的二级子域名,这里我们填入预留好的二级子域名“newpage”(如果只是创建临时数据隧道,则直接勾选“随机域名”,由cpolar客户端自行生成网络地址);
5. 地区 – 与cpolar云端设置时一样,我们依照实际所在地就近填写;

完成这些设置后,就可以点击下方的“创建”按钮,将cpolar云端创建的公共互联网地址与本地网页连接起来

20230330092232

完成cpolar客户端与cpolar云端的数据隧道连接后,cpolar客户端会自动跳转至“隧道管理”项下的“隧道列表”页面,我们可以在这个页面看到数据隧道的状态(是否畅通),或是控制隧道的开启、关闭或删除。如果需要对隧道的信息进行变更,也可以通过这里的“编辑”按钮进行

20230330092233

4.公网访问测试

创建好的数据隧道公共互联网地址,可以在状态——在线隧道列表页面看到。

20230330092234

我们将这个地址复制粘贴到浏览器中,就能通过公共互联网,访问到本地IIS服务创建的新网页。

20230330092235

5.结语

至此,我们就成功的使用Windows自带的IIS服务,在本地电脑上创建了一个新网页,并且使用cpolar创建的内网穿透数据隧道,将其发布到公共互联网上。虽然IIS创建网页流程稍显复杂,但却是我们熟悉Windows系统的好机会,并且也是一件很有意思且能学习新知识的好事

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408785.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端项目如何部署到服务器实现网址访问

目录 前言 需要用到的东西 购买云服务器和域名 绑定域名 使用Xshell连接云服务器 下载Nginx 安装nginx 配置nginx 启动nginx 传输文件 配置防火墙 卸载自带的防火墙 安装iptables防火墙 最后 前言 写了那么久的前端,就想着让朋友们欣赏欣赏&#xff0…

ElementUI快速上手(jar包本地下载)

Element-ui是饿了么前端团队推出的基于vue进行开发的前端框架。 最近刚学了Element-ui,迫不及待练练手,却发现现成的组件样式用不了。引用官网的使用方法,如图: 展示的效果也是不尽人意,在百度的过程中发现可能是链接…

相对定位relative、绝对定位absolute、固定定位fixed

注:默认情况下的定位是 postion:static; 使用定位时,常常使用偏移量对位置进行描述:left、right、top、bottom定位时,使用z-indent可以元素的堆叠顺序,例:z-indent:1&…

Spring Security 权限控制

日积月累,水滴石穿 😄 前言 项目版本Boot2.3.12.RELEASESecurity5.3.9.RELEASE 官网文档 在前面的文章中,所有的接口只需要登录就能访问。并没有对每个接口进行权限限制。 在正式的系统中,一个用户会拥有一个或者多个角色&#…

三种架构模式——MVC、MVP、MVVM

目录 前言 一、MVC(Model-View-Controller) 1、简介 2、框架图 二、MVP(Model-View-Presenter) 1、简介 2、框架图 三、MVVM(Model-View-ViewModel) 1、简介 2、框架图 四、总结 前言 MV系列框…

微信小程序插件--wxml-to-canvas(生成图片)

一、需求 项目中要实现一个将图片分享到朋友圈的功能,将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。 二、官方示例使用方法 1.安装wxml-to-canvas npm install --save wxml-to-canvas2.JSON 组件声明 {"usingComponents": {"wxml-t…

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单

本文完整版:《多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单》 Vue 表单设计器form-generator - 适配 Element Plus UI 框架的表单设计器form-render - 阿里团队开源表单设计器,自家 Antd UI 框架友好form-create - 支持Vue3 及 Ele…

内网npm私有仓库搭建以及使用教程

前言 前端团队沉淀一套通用的UI库、工具类、脚手架,不允许在公网发布,内网npm私有库搭建需求应运而生。如何在内网环境搭建npm私有仓库并使用?主角登场了 —— Verdaccio。接下来我来教大家使用 verdaccio 在内网环境中搭建npm私有仓库。 基…

canvas详细入门教程(1W字 吐血分享)

大家好&#xff0c;我是潘潘 今天为大家带来的是我已经写了很久了的canvas详细教程&#xff0c;对入门canvas很有帮助。 点击跳转原文&#xff1a; canvas详细教程原文 canvas是什么&#xff1f; 简单来说&#xff0c;<canvas> 是HTML5中的标签&#xff0c;它是一个容…

20分钟学会flex布局,熊二都表示学会了,你呢?

✏️ 作者&#xff1a;大二计算机专业学生 ♉ 星座&#xff1a;金牛座 &#x1f3e0; 主页&#xff1a;查看更多文章 &#x1f3c2; 关键&#xff1a;flex 前端布局 熊二都会 大家好&#xff0c;我是小周&#xff0c;今天分享的是熊二都能学会的前端 flex 布局&#xff0c;篇幅…

小程序 getActivePinia was called with no active Pinia. Did you forget to install pinia?

小程序项目使用pinia做状态管理报错&#xff1a; Error: [&#x1f34d;]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia createPinia() app.use(pinia) app运行打包时有个同样的错误 错误原因是&#xff1a;在外部js/t…

Collections类详解

目录 一.Collections概述&#xff1a; 1.1什么是Collections类&#xff1a; 1.2 Collections类和collection的区别和联系&#xff1a; 二. Collections类的主要方法&#xff1a; 一.Collections概述&#xff1a; 1.1 什么是Collections类&#xff1a; Java.util.Collections…

【Node.js】Express框架的基本使用

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 目录 初识Express Express简介 什么是Express 进一步理解 Express Express能做什么 Express的基本使用 …

前端登录退出:处理Token问题(获取、缓存、失效处理)以及代码实现

目录一、什么是Token二、获取token三、Token失效处理注意点1、主动退出2、Token过期① 逻辑图②方案③代码实现3、被人顶号① 逻辑图② 方案③代码实现一、什么是Token Token是服务端生成的一串字符串&#xff0c;当用户第一次登陆成功后&#xff0c;服务器会生成一个token&am…

vue 实现自适应屏幕

1.安装自适应屏幕插件&#xff08;优先使用vscode安装&#xff0c;需要调整px转化rem比例&#xff09; &#xff08;1&#xff09;安装插件&#xff1a; npm i lib-flexible --save &#xff08;2&#xff09;mian.js引入&#xff1a; import lib-flexible/flexible.js 2. 如果…

java中controller层是干嘛的?

最近在研究开源框架的源码&#xff0c;打算改写开源框架&#xff0c;适用于自身的业务场景。于是找到了一个框架(spiderFlow)。 根据他的git上的教程&#xff0c;搭建了一个。 controller层&#xff0c;在我们写代码的时候&#xff0c;一般为接口层&#xff0c;与前端&#xf…

CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式&#xff0c;空闲之余&#xff0c;与其选择“躺平”&#xff0c;不如去做一些有意义的事情&#xff0c;内心的想法驱使着我去做些什么&#xff0c;但是又没有合适的素材&#xff0c;直到接手了最近的一个可视化项目&#xff0c;一个图…

若依框架---权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…

关于古老的jsp页面的知识汇总(超详细)

1. 为什么要开发出来jsp文件呢&#xff1f; 面对需要将大量的结果&#xff0c;甚至是一整个<html>页面返回给响应体&#xff0c;之前的方法就显得十分麻烦。 之前我们是这样将结果返回给响应体的&#xff0c;如下图&#xff1a; 于是就设计了jsp文件&#xff0c;用来解决…

antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx antd 中upload对于限制上传文件格式的属性是accept&#xff0c;在开发的过程中&#xff0c;accept对于.doc、.docx、.pdf、.png、.jpg、.rar&#xff0c;格式的限制是完全没有问题的。但是测试和我说&#xff0c;当选择文…