百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

实用 | 10分钟教你搭建一个嵌入式web服务器

myzbx 2024-12-17 15:12 13 浏览

之前分享的文章中提到了几种可以在嵌入式中使用的web服务器。 嵌入式 web 服务器就是把 web 服务器移植到嵌入式系统的服务器。它仍然是基于http文本协议进行通信的,具有标准的接口形式,对客户端来说,访问嵌入式 web服务器就和访问普通的web 服务一样。

我们在实际工作中也有在板子上搭建web服务器,给我们调试带来了一些便利,可以通过网页与板子进行交互,板子在没有显示屏的情况下,也可以作为一种方案来进行功能展示。

web服务器——boa

本文演示如何把boa移植到开发板上,boa 是一个小巧的web 服务器,可执行代码只有70KB,占用的系统资源少,速度快安全性能高。

boa官网:

www.boa.org

下载的版本:

boa-0.94.13.tar.gz

本片文章关于web服务器的使用需要依赖于网络,可以参考我们上一篇笔记搭建开发板地WiFi环境:实用 | 如何远程登录开发板?

boa交叉编译

下载得到boa-0.94.13.tar.gz,解压后进入boa-0.94.13/src目录,执行如下命令生成Makefile文件:

./configure

修改 Makefile, 设置交叉编译器 。找到 CC 和 CPP 变量 ,修改为:

CC = arm-linux-gnueabihf-gcc 
CPP = arm-linux-gnueabihf-gcc -E

执行make编译。编译报错如:

arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o response.o response.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o select.o select.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o signals.o signals.c
arm-linux-gnueabihf-gcc  -g -O2 -pipe -Wall -I.   -c -o util.o util.c
In file included from boa.h:50:0,
                 from util.c:26:
util.c: In function 'get_commonlog_time':
util.c:100:39: error: pasting "t" and "->" does not give a valid preprocessing token
         time_offset = TIMEZONE_OFFSET(t);
                                       ^
compat.h:120:30: note: in definition of macro 'TIMEZONE_OFFSET'
 #define TIMEZONE_OFFSET(foo) foo##->tm_gmtoff
                              ^~~
<内置>: recipe for target 'util.o' failed

把compat.h 文件里的:

#define TIMEZONE_OFFSET(foo) foo##->tm_gmtoff 

修改为:

#define TIMEZONE_OFFSET(foo) foo->tm_gmtoff 

再次编译,可以编译通过则会在当前路径下生成boa可执行文件:

boa配置

把Ubuntu 的/etc 目录下的 mime.types 文件传到开发板的/etc目录下。注:这是MIME(多用途因特网邮件扩展),这是web服务器支持的规范。

在开发板/etc目录下创建boa文件夹(用于存放boa的配置文件及log文件):

cd /etc
mkdir boa

在开发板根目录下建立 www 文件夹 ,www 目录下面建立文件夹 cgi-bin 目录 (用于存放后期页面及交互代码):

mkdir -p /www/cgi-bin

把boa-0.94.13目录下的boa.conf 文件传到开发板的/etc/boa目录下。

scp boa.conf root@192.168.1.10:/etc/boa

把boa 可执行程序传到开发板的 bin 目录下 。

scp boa root@192.168.1.10:/bin

在开发板/etc目录下创建group文件:

cd /etc
touch group

在开发板上使用vi编辑器打开/etc/boa目录下的boa.conf文件,需要做如下修改:

① 把里面的Group nogroup 改为Group 0

②把ErrorLogAccessLog 这两行, 指定 log 文件的路径,把log保存到/etc/boa目录下,修改如下:

ErrorLog /etc/boa/error_log
# Please NOTE: Sending the logs to a pipe ('|'), as shown below,
#  is somewhat experimental and might fail under heavy load.
# "Usual libc implementations of printf will stall the whole
#  process if the receiving end of a pipe stops reading."
#ErrorLog "|/usr/sbin/cronolog --symlink=/var/log/boa/error_log /var/log/boa/error-%Y%m%d.log"

# AccessLog: The location of the access log file. If this does not
# start with /, it is considered relative to the server root.
# Comment out or set to /dev/null (less effective) to disable
# Access logging.

AccessLog /etc/boa/access_log

③ 把#ServerName www.your.org.here这一行, 修改为ServerName www.your.org.here

# ServerName: the name of this server that should be sent back to
# clients if different than that returned by gethostname + gethostbyname

ServerName www.your.org.here

④ 然后找到DocumentRoot /var/www这一行, 修改为DocumentRoot /www

DocumentRoot /www

⑤ 然后找到ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/这一行, 修改为ScriptAlias /cgi-bin/ /www/cgi-bin/

ScriptAlias /cgi-bin/ /www/cgi-bin/

上面就是boa.conf配置文件需要修改的几点内容。

最后,进入我们前面创建的 www 目录, 然后使用 vi index.html 命令建立 index.html 网页文件进行测试,关于简单网页的设计大家可以上网搜一些教程。这里我们设计一个简单的网页如:

<html>
	<head>
		<title>
		boa服务器测试
		</title>
	</head>
	<body style="background-color:#000000;padding-left:300px; padding-top:100px;">
		<p style="color:white; text-align:left; width:190px; height:45px; font-size:30px; font-family:微软雅黑; padding-left:5px;">嵌入式大杂烩</p>
		<p style="color:red; font-size:20px; font-family:微软雅黑;">ZhengN</p>
		<p style="color:yellow; font-size:20px; font-family:微软雅黑; text-align:left;">本公众号专注于嵌入式技术,包括但不限于C/C++、嵌入式、物联网、Linux。</p>
	</body>
</html>

保存并退出 index.html。到了这一步我们的web服务器就大致搭建完成了,服务器上有一个简单的网页文件index.html。

下面进行简单的测试:

在我们的开发板上输入boa 命令启动 web 服务器 。

输入 如下命令查看boa程序是否启动成功:

ps - e | grep "boa"

boa 进程启动成功后,在浏览器中输入我们开发板的 IP 地址就可以访问到 index.html 网页:

可见,我们可以通过浏览器访问我们使用开发板搭建的web服务器上的网页,表明我们已经成功在开发板搭建了基于boa的web服务器。

本文只是简单地演示打通开发板web服务器环境并设计了一个简单地网页,后续我们再继续来探究如何通过网页来与我们的开发板进行交互,如:通过网页点亮开发板上地led、把开发板上地一些数据传到网页上进行显示等内容。

猜你喜欢:

必知必会 | 如何理解GNU?

手头上无LCD却又急着开发UI?LCD模拟器了解一下

LittlevGL在STM32上的移植使用


1024G 嵌入式资源大放送!包括但不限于C/C++、单片机、Linux等。私信回复1024,即可免费获取!

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js

介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运

中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!

前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...

SVG实现的流程图绘制

一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库

在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!

Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...