轻松搭建个人web站点:OpenWRT教程结合内网穿透技术实现公网远程访问

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

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站

前言

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 极点云

相关文章
|
16天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
2月前
|
网络安全 开发工具 数据安全/隐私保护
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
3月前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
70 3
|
3月前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
在Web开发中,安全至关重要,尤其要警惕SQL注入和XSS攻击。SQL注入通过在数据库查询中插入恶意代码来窃取或篡改数据,而XSS攻击则通过注入恶意脚本来窃取用户敏感信息。本文将带你深入了解这两种威胁,并提供Python实战技巧,包括使用参数化查询和ORM框架防御SQL注入,以及利用模板引擎自动转义和内容安全策略(CSP)防范XSS攻击。通过掌握这些方法,你将能够更加自信地应对Web安全挑战,确保应用程序的安全性。
98 3
|
3月前
|
Java API Apache
从零到英雄的蜕变:如何用Apache Wicket打造你的第一个Web应用——不仅是教程,更是编程之旅的启航
【9月更文挑战第4天】学习Apache Wicket这一开源Java Web应用框架是一段激动人心的旅程。本文将指导你通过Maven搭建环境,并创建首个“Hello, World!”应用。从配置`pom.xml`到实现`HelloWorldApplication`类,再到`web.xml`的设置,一步步教你构建与部署简单网页。适合初学者快速上手,体验其简洁API与强大组件化设计的魅力。
80 1
|
4月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
65 0
|
4月前
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
64 0
|
4月前
|
前端开发 API 数据处理
构建高效现代Web应用:深入探讨Entity Framework Core与GraphQL在数据访问中的结合使用
【8月更文挑战第31天】随着Web应用的发展,传统的RESTful API逐渐显现出局限性,现代应用开始转向GraphQL。与此同时,Entity Framework Core(EF Core)作为强大的ORM工具,在数据访问方面表现出色,支持异步操作和自动变更跟踪,简化了数据处理。GraphQL作为一种灵活的查询语言,允许客户端精确获取所需数据,减少不必要的传输。将EF Core与GraphQL结合使用,可实现高效的数据访问和灵活的数据查询,优化数据流并提升应用性能。这种技术组合不仅提高了开发效率,还优化了用户体验,有望成为未来Web开发的重要方向。
32 0