怎么在树莓派上搭建web网站,并发布到外网可访问?

本文涉及的产品
.cn 域名,1个 12个月
简介: 怎么在树莓派上搭建web网站,并发布到外网可访问?

概述



这非常适合设置您的第一个网站,不仅可以学习管理 wordpress 站点,还可以学习 Linux。您将需要一个树莓派(Raspberry Pi)、几个小时和一台计算机来下载映像。 树莓派(RPI) 是学习这些东西的完美设备。


使用 Raspberry Pi Imager 安装 Raspberry Pi OS



下载适用于您的操作系统的树莓派镜像工具。它支持大多数操作系统(Windows、Mac 和 Linux)。

https://www.raspberrypi.org/downloads/


  • 运行并安装树莓派镜像工具
  • 选择 Raspberry Pi OS -> Raspberry Pi OS (32-bit)
  • 将 SD 卡插入计算机
  • 点击 Write 按钮

f5720bbd8f1b49c8b220734fc67be81e.jpg


设置 Apache Web 服务器

Apache 是一种流行的 Web 服务器应用程序,您可以将其安装在 Raspberry Pi 上以允许它为网页提供服务。


Apache 本身可以通过 HTTP 提供 HTML 文件。通过附加模块,它可以使用 PHP 等脚本语言提供动态网页。

sudo apt-get install apache2 -y
sudo service apache2 restart


测试 web 站点


默认情况下,Apache 将测试 HTML 文件放在 web 文件夹中,您可以从您的 Pi 或网络上的另一台计算机查看该页面。


在 Raspberry Pi 上打开 Apache 默认网页:

  • 通过从菜单中选择 Internet > Chromium Web 浏览器打开 Chromium。
  • 输入地址 http://localhost


您应该在浏览器窗口中看到:

d1e6f0974cf64030a2755847d2691ac9.jpg


安装静态样例站点


为了让站点的内容更有意义,我们部署一个简单的静态演示站点–冥想放松站点。

cd /var/www/html/
sudo rm *
sudo wget https://www.cpolar.com/static/downloads/meditation-app-master.tar.gz
sudo tar xzf meditation-app-master.tar.gz
sudo mv meditation-app-master/* .
sudo rm -rf meditation-app-master meditation-app-master.tar.gz


重新在浏览器打开,并刷新站点:http://localhost

26c04385f9ec499988d1e3bdba58cac8.jpg


这是一个用于冥想的小工具站点,可以用它帮助自己工作之余放松2-10分钟。

它可以选择不同冥想情景及放松时间(2-5-10分钟)。


将web站点发布到公网



目前,这个站点只能在局域网站可以被访问,公网用户是访问不到的。要想所有人访问你创建的漂亮站点,我们需要做如下工作。


安装 Cpolar


cpolar是一款内网穿透工具,可以将您的内网站点暴露到公网上,使所有人可以访问到你的站点。

  • cpolar一键安装脚本:(国内用户)
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash


  • 或短链接安装方式:(国外用户)
curl -sL https://git.io/cpolar | sudo bash


  • 查看cpolar版本信息
cpolar version


如果正常显示,则安装成功,如图:


a12a5818fc4d4e11a1c2a5b40e796884.jpg


cpolar进行token认证


如果您还没有cpolar账号,请去cpolar官网注册并登录后台获取认证token

cpolar authtoken xxxxxxxxxxxxxxxxxx


生成cpolar随机域名网址


cpolar http -region=cn_vip 80

d074aba28b044706b968563735f7ccb9.jpg

上图显示,cpolar将内网站点,发布到了一个随机域名网址:https://711d7522.vip.cpolar.cn

7644aba0432c4b81a88cbcd804ce062b.jpg

现在,我们已经发布了内网的web站点到公网,任何人都可以访问到它。

回到终端窗口,按CTRL+C键,退出cpolar

此时,公网地址不再能被访问。


生成cpolar二级子域名


虽然已经发布到公网,但域名是随机变化的,只适合临时测试使用。如果要长期使用,我们要配置二级子域名。


操作步骤:

  • 升级到cpolar基础套餐
  • 登录到cpolar后台–>预留–>保留二级子域名,例如添加dev9,地区选择VIP China地区


在前台终端测试域名

cpolar http -subdomain=dev9 -region=cn_vip 80


如果显示正常,则说明我们已经配置好了。

a726e50b7bf6441a9e1b76fae1580463.jpg


用新的域名在浏览器里访问:

正常则说明我们的固定二级子域名配置好了。


将参数保存到cpolar配置文件中


刚刚我们在前台运行cpolar程序,关掉后,域名消失,现在我们将参数保存到配置文件中。以支持开机后台自启动运行。


  • 编辑配置文件
nano /usr/local/etc/cpolar/cpolar.yml


如图:

bf215186f45741d1b477421d17da9f02.jpg


上图为样例配置文件,它会配置两个默认隧道:一个ssh隧道和一个website隧道。


参数说明:

authtoken: xxxxxxxxxxxx #认证token
tunnels:
  ssh:              #隧道名称,表示ssh,名称可以自定义
    addr: 22        #端口号为22
    proto: tcp      #协议tcp
    region: cn_vip  #地区,cn_vip,可选:us,hk,cn,cn_vip
  website:          #隧道名称,用户可以自定义,但多隧道时,不可重复
    addr: 8080      #本地Web站点端口
    proto: http     #协议http
    region: cn_vip  #地区,cn_vip,可选:us,hk,cn,cn_vip


本例中,我们需要修改如下内容:

  • 将website隧道的默认8080端口修改为80
  • 添加一行 subdomain: "你的二级子域名"


修改后的效果如图:

f61e20058a3d4897b5c2ccb1b28f03be.jpg


注意: 配置文件是yaml格式的,缩进敏感,而且不能有TAB键

然后按CTRL+X,退出,提示你是否保存,回答Y,确认保存文件路径,回车


测试修改后配置文件


在前台启动所有隧道测试

cpolar start-all

68d692e57efe4674bf171ec2c0c77128.jpg

如上图显示,则为正常,按CTRL+C退出

如果报错,会提示配置文件某行有错误,请重新修改。直到类似上图正确输出。


配置cpolar服务开机自启动


  • 配置cpolar开机自启动
sudo systemctl enable cpolar


  • 守护进程方式,启动cpolar
sudo systemctl start cpolar


  • 查看cpolar守护进程状态
sudo systemctl status cpolar


如图说明,启动状态成功

5f457e808ecd4062bc29550b98b5d432.jpg

  • 重新启动
sudo reboot


重启后,检查cpolar隧道是否仍在线

访问后台–>状态 https://dashboard.cpolar.com/status

如图说明配置成功6a49c4c4c8c14ff9af6141bb62138593.jpg


转载自cpolar极点云文章:在树莓派上搭建web站点

目录
相关文章
|
25天前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
89 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
5天前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
10 1
|
5天前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
WK
|
5天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
9 0
|
3月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
58 0
|
3月前
|
API UED 开发者
Vaadin路由魔法:导航之舟,带你穿越页面迷宫!驾驭神奇URL,解锁无限可能!
【8月更文挑战第31天】Vaadin是一款现代Java Web开发框架,其路由机制结合前后端路由,确保流畅的用户体验和高效服务器资源利用。通过`@Route`注解和`Router`类,开发者可以轻松定义和管理页面路径。例如,`@Route("home")`可指定视图路径,而参数化路由如`@Route("user/:userId")`则允许URL传参。此外,Vaadin还提供了丰富的导航API和自定义路由事件监听器,助力开发者构建结构清晰且体验优秀的Web应用。
39 0
|
3月前
|
前端开发 API 数据处理
构建高效现代Web应用:深入探讨Entity Framework Core与GraphQL在数据访问中的结合使用
【8月更文挑战第31天】随着Web应用的发展,传统的RESTful API逐渐显现出局限性,现代应用开始转向GraphQL。与此同时,Entity Framework Core(EF Core)作为强大的ORM工具,在数据访问方面表现出色,支持异步操作和自动变更跟踪,简化了数据处理。GraphQL作为一种灵活的查询语言,允许客户端精确获取所需数据,减少不必要的传输。将EF Core与GraphQL结合使用,可实现高效的数据访问和灵活的数据查询,优化数据流并提升应用性能。这种技术组合不仅提高了开发效率,还优化了用户体验,有望成为未来Web开发的重要方向。
27 0
|
22天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
82 3
|
4天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
73 44
|
2天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。