Web编程大作业(一)树莓派环境配置、Wifi搭建

目录

    • 1.项目要求和一点想法
    • 2.树莓派环境配置
      • 烧录Raspbian buster系统
      • 通过网线连接电脑,进入VNC远程桌面
      • 设置静态ip
    • 3. 创建Web服务器
      • 安装nodejs
      • 用express框架搭建本地web服务器
    • 4.通过Wifi热点访问自建的网站

1.项目要求和一点想法

Web编程大作业(一)树莓派环境配置、Wifi搭建_第1张图片
Web编程大作业(一)树莓派环境配置、Wifi搭建_第2张图片

第一步当然是先把树莓派的硬件装起来
Web编程大作业(一)树莓派环境配置、Wifi搭建_第3张图片
然后第二步就不知道干啥了

简单分析一下,这个项目可以分成两个相对独立的部分,第一部分是在本地先把网站的大多数功能实现,(不同类型用户登录、即时文件共享、WebSocket下发文件、Canvas绘图、视频推流、弹幕、人脸识别签到等等),第二部分是通过树莓派热点,作为网站的服务器,使得连接热点的设备能够访问网站。

这样来看其实树莓派占的比重是很小的,核心业务逻辑还是体现在网站本身(emm大概)。

那么就先从可能比较简单但是非常陌生的树莓派环境配置开始吧。

可能是没有现成代码可以抄的原因,第二个项目的方向感明显弱了很多。但是总归要先做些什么,才有机会让想法自己浮现出来吧。

2.树莓派环境配置

烧录Raspbian buster系统

我们的硬件条件大概是这样的:
Web编程大作业(一)树莓派环境配置、Wifi搭建_第4张图片
寄过来的时候老师已经提前把系统烧好,并且设置了固定的ip,可以直接通过VNC访问。

但是因为经过我一些乱七八糟的设置(后面会提到),后来它就连不上了。于是正好自己重新装一遍系统。由于我没有合适的显示器(其实有,但是觉得太麻烦了),这里介绍的是只需要用一根网线的方法。

当然,方法有很多。。就是因为方法太多,细节也太多了,所以很容易走弯路。以下是我自己这两天摸索出来的一个方法,也不一定对每个人都通用。

  1. 下载Raspbian系统映像文件
    https://www.raspberrypi.org/downloads/raspberry-pi-os/

  2. 安装etcher,通过读卡器烧录

  3. 在root中创建一个名为ssh(无拓展名)的空文件。(开启ssh功能,默认关闭)

  4. 弹出读卡器,将TF卡插入树莓派,用网线连接电脑

通过网线连接电脑,进入VNC远程桌面

  1. 首先修改电脑的原先的网络适配器,打开internet共享
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第5张图片

  2. 在命令行中输入arp -a,查看树莓派动态分配的ip
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第6张图片
    上图中192.168.137.20就是树莓派的ip,一个特征是它的物理地址肯定和其他几项不一样。

  3. 用putty访问该地址
    默认名称:pi,密码:raspberry
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第7张图片
    进入该界面说明连接成功

  4. 在putty中输入sudo raspi-config进行设置

  5. 选项5.Interfacing Options中开始SSH和VNC功能

  6. 选项7.Advanced Options->A5 Resolution->Mode 85设置分辨率(否则VNC中无法显示桌面)

  7. 此时可以通过VNC连接桌面了(用同样的ip)
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第8张图片

设置静态ip

  1. eth0是有线网卡的端口,要修改eth0为静态ip。这里有两种方法,最简单的是直接通过右上角的GUI设置eth0。
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第9张图片
    也可以修改/etc/dhcpcd.conf,在末尾加上以下几句,效果一样
    在这里插入图片描述
  2. 之后需要将以太网的ip和网关设置一样的(192.168.137.1)
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第10张图片
    这样修改之后,就可以通过192.168.137.20的静态ip访问了,也可以设置成别的静态ip,但网关和ip地址需要在同一波段。

ps:一开始就是因为乱改了dhcpcd.conf中的配置信息,导致静态ip和网关不匹配,于是就无法连接了。

3. 创建Web服务器

安装nodejs

  1. 通过VNC,访问nodejs官网,选ARMv7这个
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第11张图片
  2. 下载,解压,将文件名修改为node(非必要)
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第12张图片
    可以通过node -v,npm -v检验是否生效
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第13张图片
  3. 用ln命令创建链接文件,将node和npm命令添加到环境变量
    在这里插入图片描述
  4. 直接输入node -v检验,显示版本号则安装完成

用express框架搭建本地web服务器

  1. 在npm安装成功的前提下,用npm install express -g和npm install express-generator -g即可。
  2. 安装后的express也需要通过链接文件添加环境变量。即
sudo ln -s /home/pi/node/bin/express /usr/bin/express

安装完成后,创建文件夹并用express -e生成脚手架。效果如图
Web编程大作业(一)树莓派环境配置、Wifi搭建_第14张图片
接下来只要安装依赖项就可以了。
为了检验服务器能否联通,我们做一个简单的index.html放在public下。
Web编程大作业(一)树莓派环境配置、Wifi搭建_第15张图片
终端搭建web服务器

node /home/pi/website/bin/www

在电脑浏览器中输入树莓派ip+:3000(192.168.137.20:3000),可以查看到该网页,同时可以看到后端的反应
Web编程大作业(一)树莓派环境配置、Wifi搭建_第16张图片

4.通过Wifi热点访问自建的网站

以上实现了树莓派本地web服务器的搭建,接下来要将树莓派作为一个Wifi热点,给连接的设备分配ip地址,并能够连接到自建的网站。

其实看这个就好了https://www.qter.org/portal.php?mod=view&aid=5516

  1. 安装hostapd(可能需要先sudo apt update)
sudo apt install hostapd
sudo systemctl stop hostapd
  1. 修改/etc/hostapd/hostapd.conf(没有则创建)
interface=wlan0
driver=nl80211
ssid=Raspberrypi
hw_mode=g
channel=7
wmm_enabled=0
macaddr_acl=0
auth_algs=1
ignore_broadcast_ssid=0
wpa=2
wpa_passphrase=12345678
wpa_key_mgmt=WPA-PSK
wpa_pairwise=TKIP
rsn_pairwise=CCMP

修改/etc/default/hostapd
,将DAEMON_CONF的注释去掉并修改为
在这里插入图片描述

  1. 此时wifi已经建立好,但是还不能连接,因为还没有设置分配的ip。修改wlan0端口为静态。方法类似修改eth0。应该只要改ip就可以了。值得一提,这里设置的ip不能和eth0产生冲突。(前三位不能都一样)
    Web编程大作业(一)树莓派环境配置、Wifi搭建_第17张图片

  2. 安装dnsmasq
    这个是用来分配ip的

sudo apt install dnsmasq
sudo systemctl stop dnsmasq
  1. 修改/etc/dnsmasq.conf,加上下面这段,其他的都注释掉
interface=wlan0
dhcp-range=192.168.4.2,192.168.4.20,255.255.255.0,24h
  1. 配置应该就设置好了。sudo reboot重启一下,然后依次开启wifi功能和网站服务器
sudo systemctl start hostapd
node /home/pi/website/bin/www

用手机测试一下Wifi,再看看能不能连接192.168.4.1:3000
Web编程大作业(一)树莓派环境配置、Wifi搭建_第18张图片
Web编程大作业(一)树莓派环境配置、Wifi搭建_第19张图片
ok,可以看到树莓派给手机分配了一个ip地址,手机也能访问到我们自建的网站。那么可以说就达到预期的目标了,接下来只需要专注于制作网站本身,并将做好的网站连同框架整个发送给树莓派就可以了。

虽然这个过程看起来挺流畅的,其实坑很多。。有时需要通过路由器获取树莓派的ip,再远程连接控制,有时连路由器都找不到ip,只能重装系统从头搞一遍。。很多问题都要一点点排查,稍微走偏一点都会浪费很多时间。。虽然这些实质上都是因为对计算机网络本身的了解还不够充分,但是还是想说,搞硬件搞配置真的太夭寿了。。。

好在暂时应该不用管树莓派的事了,后续就只要想办法把网页做好就行了。当然,因为现在没代码抄了,看来只能把之前第一个项目逃过的课补起来了。

你可能感兴趣的:(Web编程大作业(一)树莓派环境配置、Wifi搭建)