OpenWRT搭建个人web站点并结合内网穿透实现公网远程访问

本文涉及的产品
.cn 域名,1个 12个月
简介: OpenWRT搭建个人web站点并结合内网穿透实现公网远程访问


前言

uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器,目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器,并且和 OpenWrt 配置框架非常好地集成在一起。它是管理 OpenWrt 的默认的 Web 服务器,还提供了现代 Web 服务器所有的 功能 。

下面我们将在openwrt上部署uhttpd搭建web服务器,同时使用cpolar将其安全暴露到公网上,让公网用户也可以正常访问到openwrt下的web服务器。

1. 检查uhttpd安装

正常版本下,如果可以在浏览器访问openWRT web控制台界面,表示已经安装了uhttpd,同样,我们可以在根目录下面看到一个名称为www的目录,这样表示已经安装了uhttpd.

2. 部署web站点

既然uhttpd已经安装好了,我们就可以直接使用,我们只需要把我们的站点拷贝进去www文件夹下面即可。接下来主要介绍html网站部署,使用一个免费站点进行演示

进入www文件夹

cd /www

使用wget下载站点,ftp上传文件也可以

wget https://www.cpolar.com/static/downloads/meditation-app-master.tar.gz

下载好后解压

tar xzf meditation-app-master.tar.gz

解压后我们可以看到一个名称为meditation-app-master的文件夹,这里还可以看到一个名称为cgi-bin的文件夹,这个就是openWRT web 控制台界面位置.

此时我们在外部浏览器使用openWRT局域网ip地址加资源路径/meditation-app-master/index.html即可看到我们下载部署的站点。如果不加资源路径,默认会跳转过去openWRT web 界面,此时我们一个静态站点就已经配置好了。

下面我们安装cpolar内网穿透来实现在公网环境下也可以远程访问这个web站点。

3. 安装cpolar内网穿透

通过ssh连接操作openwrt, 下载公钥:

wget -O cpolar-public.key http://openwrt.cpolar.com/releases/public.key

下载完成后添加公钥

opkg-key add cpolar-public.key

添加cpolar的opkg仓库源

echo "src/gz cpolar_packages http://openwrt.cpolar.com/releases/packages/$(. /etc/openwrt_release ; echo $DISTRIB_ARCH)"  >>  /etc/opkg/customfeeds.conf

更新仓库

opkg update

然后开始安装cpolar,分别执行下面三个安装命令安装三个包:

opkg install cpolar
opkg install luci-app-cpolar
opkg install luci-i18n-cpolar-zh-cn

安装完成后,打开openwrt Web管理界⾯,我们可以看到有个service,点击后,即可看到我们cpolar内网穿透

点击进去后即可看到cpolar界面,接下来配置cpolar Authtoken

登录cpolar官网,如果没有注册账号,可以先注册账号,然后点击左侧的验证,查看自己的认证token,

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

之后将官网查看的token复制到openwrt cpolar服务界面的Auth Token里,设置后点击save保存

保存成功后点击界面里的 打开Web-UI界面 ,即可看到cpolar web ui 界面

使用我们官网注册的账号登陆,登陆后即可对隧道进行管理,安装就完成啦

4. 配置远程访问地址

在cpolar web ui管理界面中,我们点击左侧仪表盘的隧道管理——创建隧道,uhttpd由于部署在了openWRT Web管理界面,设置了SSL,所以端口使用443,因此我们要来创建一条http隧道,指向443端口

  • 隧道名称:可自定义,注意不要重复
  • 协议:http
  • 本地地址:443
  • 域名类型:选择随机域名
  • 地区:选择China VIP

点击创建

创建成功后打开在线隧道列表,可以看到公网访问的地址,有两种公网地址访问方式,一种是http,一种是https

然后我们使用其中一种http方式公网地址,并且加上资源路径:/meditation-app-master/index.html在浏览器访问,即可看到我们的站点界面,这样这个远程访问就配置好了.

5. 配置固定远程地址

前面我们创建隧道时使用的是免费随机临时地址,它所生成的公网地址会在24小时内变化,为了方便长久稳定连接,我们可以固定访问地址,在cpolar中叫固定二级子域名,或者您也可以配置使用您自己的域名来访问。这里我们以cpolar子域名为例

需升级至基础套餐或以上才支持配置二级子域名

登录cpolar官网后台,点击左侧仪表盘的预留,找到保留二级子域名,为http隧道保留一个二级子域名。

  • 地区:选择服务器地区
  • 名称:填写您想要保留的二级子域名(可自定义)
  • 描述:即备注,可自定义填写

本例保留一个名称为websitewrt的二级子域名。子域名保留成功后,我们将子域名复制下来,接下来需要将其配置到隧道中去。

打开cpolar web ui管理界面。点击左侧仪表盘的隧道管理——隧道列表,找到需要配置二级子域名的隧道,点击右侧的编辑

修改隧道信息,将二级子域名配置到隧道中:

  • 域名类型:改为选择二级子域名
  • *Sub Domain:填写我们刚刚所保留的二级子域名

修改完成后,点击更新

隧道更新成功后,点击左侧仪表盘的状态——在线隧道列表,可以看到隧道的公网地址,已经更新为二级子域名了.

然后我们使用其中一种http方式地址在浏览器访问,即可看到我们的站点界面,这样一个固定不变的远程访问个人站点配置好了

转载自cpolar极点云文章:openWRT搭建个人web站点并结合内网穿透实现公网远程访问 - cpolar 极点云

相关文章
|
9天前
|
监控 前端开发 Serverless
现代化 Web 应用构建问题之观测站点的PV、UV和API异常等指标如何解决
现代化 Web 应用构建问题之观测站点的PV、UV和API异常等指标如何解决
21 2
|
9天前
|
数据可视化 NoSQL Serverless
现代化 Web 应用构建问题之Serverless架构的Web站点费用计算如何解决
现代化 Web 应用构建问题之Serverless架构的Web站点费用计算如何解决
23 1
|
16天前
|
Java 应用服务中间件 Apache
使用IDEA修改Web项目访问路径,以及解决Apache Tomcat控制台中文乱码问题
本文介绍了在IntelliJ IDEA中修改Web项目访问路径的步骤,包括修改项目、模块、Artifacts的配置,编辑Tomcat服务器设置,以及解决Apache Tomcat控制台中文乱码问题的方法。
30 0
使用IDEA修改Web项目访问路径,以及解决Apache Tomcat控制台中文乱码问题
|
29天前
|
运维 安全 网络安全
"革新远程访问体验:Docker化部署webssh2,一键启动Web SSH客户端,让远程管理如虎添翼!"
【8月更文挑战第2天】Docker作为软件开发与运维的关键工具,以其轻量级、可移植及强隔离特性简化了应用部署。结合webssh2这一开源Web SSH客户端,可通过浏览器安全便捷地访问SSH服务器,无需额外软件。首先确保已安装Docker,接着拉取webssh2镜像并运行容器,映射端口以便外部访问。配置好SSH服务器后,通过浏览器访问指定URL即可开始SSH会话。此方案不仅提升了用户体验,还加强了访问控制与系统安全。
75 7
|
7天前
|
网络协议 NoSQL 网络安全
【Azure 应用服务】由Web App“无法连接数据库”而逐步分析到解析内网地址的办法(SQL和Redis开启private endpoint,只能通过内网访问,无法从公网访问的情况下)
【Azure 应用服务】由Web App“无法连接数据库”而逐步分析到解析内网地址的办法(SQL和Redis开启private endpoint,只能通过内网访问,无法从公网访问的情况下)
|
7天前
|
API
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
|
7天前
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
【Azure 应用服务】Web.config中设置域名访问限制,IP地址限制访问特定的页面资源 (Rewrite)
|
2月前
|
开发框架 缓存 NoSQL
基于SqlSugar的数据库访问处理的封装,在.net6框架的Web API上开发应用
基于SqlSugar的数据库访问处理的封装,在.net6框架的Web API上开发应用
|
8天前
|
JSON 数据格式
【应用服务 App Service】在Azure Web App的部署文件中,是否可以限制某些文件无法被访问?(如json)
【应用服务 App Service】在Azure Web App的部署文件中,是否可以限制某些文件无法被访问?(如json)
|
25天前
|
开发框架 JavaScript .NET
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
26 0
下一篇
云函数