欢迎访问:同济大学学生管弦乐团 PWA 学习管理系统 介绍页面
项目地址:https://tongji-orchestra.icu
彩蛋:访问https://tongji-orchestra.icu,F12打开开发者模式,控制台输入“whoareyou”,系统会返回所有开发者的学号姓名
目录
01
项目概述
PWA基础概念与系统功能
02
系统架构总览
整体架构与请求流程
03
技术栈详解
后端、前端与云服务技术
04
核心功能实现
数据库、安全、推送与部署
05
移动端与运维
APP开发、CI/CD与服务器管理
1.1 项目功能概述
本系统是专为同济大学学生管弦乐团量身定制的综合性学习管理平台,通过现代化的Web技术为乐团成员提供完整的学习、作业和乐谱管理解决方案。系统集成了视频学习、作业提交、乐谱管理等核心功能,同时提供细颗粒度的权限控制和实时通知机制。
用户管理系统
五级权限体系,激活码注册机制,声部精细化分组管理
视频学习系统
支持超1GB大文件上传,智能观看进度追踪,80%完成度认证标准
作业管理系统
分声部精准发布,视频作业在线提交,创新的10星评分体系
乐谱管理系统
PDF乐谱在线管理,学号水印版权保护,智能分类检索功能
统计分析系统
实时学习进度统计,声部横向对比分析,作业完成率可视化
推送通知系统
Web Push浏览器推送,邮件通知双重保障,智能定时提醒机制
1.2 用户角色与权限
系统采用五级权限体系,实现从超级管理员到普通用户的层级化权限管理。这种设计既保证了系统的安全性,又确保了各角色能够高效完成其职责范围内的工作。每个角色都有明确的权限边界,通过细颗粒度的访问控制机制,实现数据和功能的安全隔离。
超级管理员
拥有系统所有权限,包括用户权限管理、系统配置、数据维护等核心功能,是系统的最高权限持有者
管理员
负责日常运营管理,包括用户管理、视频上传、作业发布、统计数据查看等关键业务功能
谱务
专注于乐谱资源管理,负责乐谱上传、分类、作业评分等与乐谱相关的专业工作
声部长
管理本声部事务,可上传本声部专属视频,协助管理声部成员的学习进度和作业情况
普通用户
乐团成员基础权限,可观看学习视频、提交作业、查看个人学习进度和成绩
2. 系统架构总览
2.1 整体架构
系统采用经典的前后端分离架构设计,充分发挥现代Web技术的优势。前端负责用户界面展示和交互逻辑,后端专注于业务逻辑处理和数据管理,两者通过标准的RESTful API进行通信。这种架构设计不仅提高了系统的可维护性和可扩展性,还使得前后端可以独立开发和部署,显著提升了开发效率。
用户终端
浏览器/PWA应用/Android APP
Nginx反向代理
SSL证书管理 + 负载均衡
Node.js服务器
Express.js框架 + PM2进程管理
数据与存储层
MongoDB数据库 + Redis缓存 + 阿里云OSS
CDN内容分发
阿里云CDN加速
2.2 请求处理流程
当用户访问系统时,每个请求都会经过一系列精心设计的处理流程。从DNS解析到最终的内容返回,每个环节都针对性能和安全进行了优化。这个流程确保了用户请求能够快速、安全地得到响应,同时通过CDN加速大幅提升了静态资源和视频文件的加载速度。
DNS解析
将域名 tongji-orchestra.icu 解析为服务器IP地址,建立网络连接的第一步
Nginx处理
执行SSL终止,将HTTPS请求解密后反向代理到Node.js后端服务
Node.js处理
接收请求后进行路由分发,执行业务逻辑,调用相应的控制器方法
数据库操作
根据业务需求读写MongoDB数据,必要时使用Redis缓存提升性能
文件访问
对于视频、乐谱等大文件,系统生成带鉴权的CDN链接,重定向到CDN获取内容
3. 技术栈详解
3.1 后端
后端技术栈的选择充分考虑了性能、可维护性和开发效率。Node.js作为运行环境提供了出色的异步I/O处理能力,Express.js框架简化了HTTP服务的开发,MongoDB提供了灵活的文档型数据存储方案。整个技术栈经过实战验证,能够稳定支撑系统的各项功能需求。
3.2 前端
前端采用原生JavaScript和CSS3,实现了流畅的用户界面和丰富的交互效果。Service Worker作为PWA的核心技术,赋予了应用离线访问和推送通知的能力。
原生JavaScript
负责前端业务逻辑,不依赖任何框架,保持代码轻量高效
CSS3
现代样式设计,使用弹性布局和媒体查询实现响应式界面
Service Worker
PWA核心技术,实现离线缓存、推送通知等高级功能
Font Awesome
矢量图标库,提供丰富的UI图标资源
PDF.js
Mozilla开发的PDF渲染引擎,在浏览器中直接显示PDF乐谱
3.3 云服务
系统的云服务基础设施全部部署在阿里云平台,充分利用了云计算的弹性、可靠性和全球化优势。ECS云服务器提供稳定的计算资源,OSS对象存储解决了大文件存储问题,CDN内容分发网络确保了全国范围内的访问速度,SSL证书保障了数据传输安全。
云服务器 ECS
阿里云提供的弹性计算服务,运行整个系统的核心业务
对象存储 OSS
存储视频、PDF等大文件,支持海量数据存储和高并发访问
CDN加速
内容分发网络,将静态资源缓存到全国各地节点,大幅提升访问速度
SSL证书
阿里云服务提供的测试版免费证书,实现HTTPS安全访问
4. 后端服务
4.1 服务器入口 (server.js)
server.js是整个后端应用的入口文件,它协调各个模块的初始化和运行。服务器启动时,会按照严格的顺序执行初始化操作,确保所有服务都正常就绪后才开始接收用户请求。这种有序的启动流程保证了系统的稳定性和可靠性。
01
加载环境变量
从.env.production文件读取数据库连接、API密钥等敏感配置信息
02
配置安全中间件
helmet设置安全HTTP头,compression启用响应压缩,cors处理跨域请求
03
配置请求限流
防止恶意攻击,限制每个IP在15分钟内最多发送1000次请求
04
连接数据库
建立与MongoDB的连接,初始化数据模型
05
注册API路由
注册auth、videos、assignments等功能模块的路由
06
启动WebSocket
初始化Socket.io服务,支持实时通信功能
07
启动定时任务
配置node-cron定时任务,实现作业截止提醒等功能
4.2 API路由设计
系统采用RESTful API设计规范,将不同的业务功能模块化为独立的路由组。每个路由组负责特定领域的功能,通过HTTP方法(GET、POST、PUT、DELETE)和URL路径的组合,实现清晰、直观的API接口设计。这种设计使得API易于理解、使用和维护。
4.3 PDF代理与水印服务
系统实现了一套完整的PDF代理服务,解决了两个关键问题:一是移动端WebView无法直接访问CDN的兼容性问题,二是乐谱版权保护问题。通过服务器端代理,所有PDF请求都经过后端处理,在这个过程中动态添加学号水印,既保证了访问的流畅性,又有效防止了乐谱的非法传播。
代理服务功能
  • 解决移动端WebView访问CDN的兼容性问题
  • 统一管理PDF文件的访问权限控制
  • 动态生成带鉴权的CDN链接
  • 实时监控PDF文件的访问情况
水印实现原理
使用pdf-lib库在PDF的每一页上绘制学号文字水印。水印采用斜向重复排列的方式铺满整个页面,透明度设置为半透明,既不影响阅读,又能有效标识来源。水印内容包括学号和下载时间,便于追溯。
5. 数据库设计
5.1 核心数据模型
MongoDB作为NoSQL数据库,为系统提供了灵活的数据存储方案。我们采用文档型数据模型,每个集合对应一个业务实体。数据模型设计充分考虑了查询效率、数据完整性和扩展性,通过合理的索引设计和数据关联,确保系统在高并发场景下仍能保持良好的性能。
用户模型 (User)
studentId
学号,作为用户的唯一标识,建立唯一索引确保不重复
name
用户姓名,用于显示和识别用户身份
password
密码,使用bcrypt算法加密存储,安全级别高
role
角色,定义用户权限级别(superadmin/admin/librarian/section_leader/user)
section
声部,标识用户所属的乐团声部(小提琴、中提琴、大提琴等)
isActivated
激活状态,标识账户是否已通过激活码激活
pushSubscription
推送订阅信息,存储Web Push的订阅端点和密钥
视频模型 (Video)
视频模型设计支持多种存储方式,既可以存储在本地服务器,也可以存储在阿里云OSS上。通过文件哈希值实现视频去重,避免重复上传相同内容。CDN链接字段存储了经过鉴权的访问地址,确保视频内容的安全性。目标声部字段支持视频的精准投放,不同声部的成员只能看到与自己相关的学习视频。
title
视频标题,描述视频内容
duration
视频时长(秒),用于计算观看进度
targetSections
目标声部数组,支持多声部视频投放
storage
存储方式(local/oss),标识文件存储位置
ossPath
OSS路径,云端文件的存储路径
cdnUrl
CDN链接,带鉴权的加速访问地址
fileHash
文件哈希值,用于视频去重识别
视频观看进度 (VideoProgress)
观看进度模型采用了创新的真实观看时长统计机制,而非简单记录播放位置。这种设计有效防止了用户通过快速拖动进度条来"刷"完成度的行为。系统会实时记录用户的观看时长,只有当累计观看时长达到视频总时长的80%时,才认定为完成学习。这种机制确保了学习效果的真实性。
80%
完成标准
观看时长达到视频总时长的80%即认定完成
系统每隔一定时间间隔自动保存观看进度,即使用户中途退出也不会丢失学习记录。
  • totalWatchTime:总观看时长,累计记录用户实际观看的时间
  • completionPercentage:完成百分比,根据观看时长计算得出
  • isCompleted:是否完成,当完成度>=80%时自动标记为true
作业模型 (Assignment)
作业系统支持灵活的发布机制,管理员可以针对特定声部发布作业,也可以发布全员作业。系统自动追踪作业的提交状态和截止时间,支持附件上传。特别地,系统还支持允许迟交的设置,给予学生一定的灵活性。
title
作业标题,简要描述作业内容和要求
targetSections
目标声部数组,支持单声部或多声部作业发布
attachments
附件列表,可包含参考音频、乐谱等辅助材料
dueDate
截止日期,系统根据此字段自动判断是否迟交
allowLateSubmission
是否允许迟交,控制截止后能否继续提交
作业提交 和批改
  • videoFile:视频文件,学生提交的作业视频
  • isLate:是否迟交,系统根据提交时间自动判断
  • grade:评分,采用1-10星的评分系统
6. 前端技术结构
6.1 单页应用(SPA)架构
系统采用单页应用(Single Page Application)架构,整个网站只有一个HTML页面。页面内容的切换完全由JavaScript动态控制,无需重新加载整个页面。这种设计带来了类似原生应用的流畅体验,用户在不同功能模块间切换时,页面不会出现闪烁或重新加载的情况。
SPA架构优势
页面切换流畅
无需重新加载页面,切换瞬间完成,用户体验接近原生APP
减少服务器请求
只在初次加载时获取完整页面,后续只请求数据,降低服务器负载
更好的用户体验
保持页面状态,支持前进后退,交互更加自然
组件化开发
功能模块独立,便于维护和扩展
6.2 响应式设计
系统实现了全面的响应式设计,能够自动适配不同尺寸的设备屏幕。通过CSS3的媒体查询技术,我们为手机、平板和桌面设备分别设计了专属的界面布局。这确保了无论用户使用什么设备访问系统,都能获得最佳的浏览体验。
响应式设计的核心理念是"一次开发,处处适配",通过灵活的布局和智能的断点设置,让界面在各种设备上都能完美呈现。
手机端卡片竖式排列,部分导航折叠成汉堡菜单,折叠于头像上 电脑端卡片水平排列,所有导航选项常驻,用户名完全显示
7. PWA技术实现
7.1 Web App Manifest
manifest.json文件是PWA的"身份证",它定义了应用的基本信息和行为方式。这个JSON文件告诉浏览器如何将网站以应用的形式展示给用户,包括应用名称、图标、启动方式、主题色等关键信息。当用户选择"添加到主屏幕"时,浏览器会根据这个文件创建应用快捷方式。
关键配置项
  • name:应用完整名称,显示在安装提示中
  • short_name:应用简称,显示在桌面图标下方
  • display: standalone:独立应用模式,隐藏浏览器UI
  • icons:不同尺寸的应用图标数组
  • start_url:应用启动时的默认页面
  • theme_color:主题色,影响状态栏等UI元素
  • background_color:启动画面背景色
7.2 Service Worker
Service Worker是PWA的核心技术,它是一个运行在浏览器后台的JavaScript脚本,独立于网页运行。即使用户关闭了网页,它仍在后台工作,负责缓存管理、离线访问和推送通知等重要功能。
项目中的Service Worker配置
// sw.js - 缓存配置 const CACHE_NAME = 'tongji-orchestra-v5'; const STATIC_CACHE = 'static-cache-v5'; const DYNAMIC_CACHE = 'dynamic-cache-v5'; // 静态资源缓存列表 const urlsToCache = [ '/manifest.json', '/images/icon-192x192.png', '/images/icon-512x512.png' ]; // 不缓存大文件和视频 const SKIP_CACHE_PATTERNS = [ /\/uploads\/videos\//, /\/uploads\/submissions\//, /files\.666-lufengyuan-nb\.top/, // CDN域名 /\.mp4$/, /\.avi$/ ];
静态资源
缓存优先策略,优先从缓存读取,提升加载速度
API数据
网络优先策略,确保获取最新数据,失败时回退到缓存
视频流
不缓存策略,视频文件过大,通过CDN直接加载
8. 云存储与CDN加速
8.1 阿里云OSS配置
OSS(Object Storage Service,对象存储服务)是阿里云提供的海量、安全、低成本、高可靠的云存储服务。在本系统中,所有的视频文件、PDF乐谱、作业提交等大文件都存储在OSS上。OSS采用分布式架构,数据自动备份,确保文件的高可用性和持久性。
项目中的OSS客户端初始化代码
// config/oss.js - OSS客户端初始化 this.client = new OSS({ region: this.region, // oss-cn-shanghai accessKeyId: process.env.OSS_ACCESS_KEY_ID, accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET, bucket: this.bucketName, // tongji-orchestra-files timeout: 60000 // 60秒超时,适合大文件上传 });
文件路径生成规则
// config/oss.js - 生成OSS文件路径 generatePath(category, filename) { const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1) .padStart(2, '0'); return `${category}/${year}/${month}/${filename}`; // 例如:videos/2025/11/video_1732698765_abc123.mp4 }
系统采用按类别和日期分目录的文件组织方式,这样做的好处是:
  • 便于文件管理和检索
  • 避免单个目录文件过多影响性能
  • 方便按时间段进行数据统计和清理
8.2 CDN加速
CDN(Content Delivery Network,内容分发网络)通过在全国各地部署缓存节点,将内容分发到离用户最近的节点上。本系统的服务器部署在内蒙古乌兰察布/广州河源,而用户全部集中在上海地区。如果用户直接从源服务器下载文件,需要经过漫长的网络传输,速度会很慢。
无CDN的情况
1
上海用户发起请求
2
请求传输到乌兰察布/河源机房
网络延迟大
3
从源服务器下载文件
4
文件传输回上海
下载速度慢
使用CDN后
1
上海用户发起请求
2
CDN智能调度到上海节点
延迟极低
3
从上海CDN节点获取缓存
速度提升10倍+
通过部署CDN上海节点,用户访问速度得到了显著提升,视频加载时间从原来的数十秒降低到几秒,大幅改善了用户体验。
8.3 CDN鉴权
为了防止CDN资源被盗链和恶意访问,系统实现了A类型鉴权机制。每次生成CDN访问链接时,都会附加一个基于时间戳和密钥的签名参数。CDN节点在收到请求时会验证签名的有效性,只有签名正确且未过期的请求才能访问资源。这种机制有效保护了系统的视频和乐谱资源不被非法下载。
项目中的CDN鉴权算法实现
// config/oss.js - CDN A类型鉴权算法 generateAuthUrl(ossPath, expireTime = 3600) { const crypto = require('crypto'); const authKey = process.env.CDN_AUTH_KEY; const timestamp = Math.floor(Date.now() / 1000) + expireTime; // CDN A类型鉴权算法 const uri = `/${ossPath}`; const stringToSign = `${uri}-${timestamp}-0-0-${authKey}`; const md5Hash = crypto.createHash('md5') .update(stringToSign).digest('hex'); return `https://${this.cdnDomain}${uri}?auth_key=${timestamp}-0-0-${md5Hash}`; }
生成的鉴权URL示例

https://files.666-lufengyuan-nb.top/videos/2025/11/video_123.mp4?auth_key=1732700000-0-0-abc123def456
URL中的auth_key参数包含三部分信息:过期时间戳、随机数和MD5签名。CDN会验证这些信息,确保请求的合法性。
8.4 CDN预热
CDN预热是一种主动缓存策略。当新文件上传到OSS后,我们不等用户第一次访问时才缓存,而是立即将文件推送到CDN各个节点进行缓存。这样用户在首次访问时就能享受到CDN加速,无需等待"冷启动"时间。预热过程在文件上传后自动触发,对用户完全透明。
CDN预热实现代码
// utils/cdn-preload.js - CDN预热实现 async preloadCache(ossPath, fileType = 'video') { const preloadUrl = this.generatePreloadAuthUrl(ossPath, 86400); // 24小时有效期
9. 安全机制
9.1 JWT身份认证
JWT(JSON Web Token)是一种开放标准的身份认证方案。用户登录成功后,服务器会生成一个包含用户信息的加密令牌,客户端将这个令牌保存在本地。后续的每次请求都携带这个令牌,服务器通过验证令牌来确认用户身份。JWT的优势在于无需在服务器端保存会话信息,非常适合分布式系统。
JWT验证中间件实现
// middleware/auth.js - JWT验证中间件 const authenticateToken = async (req, res, next) => { const authHeader = req.headers.authorization; const token = authHeader && authHeader.split(' ')[1]; if (!token) { return res.status(401).json({ message: '访问令牌缺失' }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId).select('-password'); if (!user) { return res.status(401).json({ message: '用户不存在' }); } if (!user.isActivated) { return res.status(401).json({ message: '账户未激活' }); } req.user = user; next(); } catch (error) { return res.status(403).json({ message: '无效的访问令牌' }); } };
9.2 密码加密
系统使用bcrypt算法对用户密码进行加密存储。bcrypt是一种单向加密算法,加密后的密码无法被解密还原。即使数据库泄露,攻击者也无法获取用户的真实密码。bcrypt还具有自适应性,可以通过增加计算成本来对抗越来越强大的破解能力。
9.3 请求限流
为防止恶意攻击和接口滥用,系统实施了IP级别的请求限流策略。每个IP地址在15分钟的滑动时间窗口内最多只能发送1000次请求。超过限制后,服务器会返回429状态码,要求客户端等待一段时间后再试。这种机制有效防止了DDoS攻击和恶意爬虫。
9.4 资源访问控制
系统实现了基于角色和声部的细颗粒度权限控制。每个API接口都配置了所需的权限级别,用户只能访问其权限范围内的资源。例如,普通用户只能看到自己声部的视频,而管理员可以看到所有视频。这种多层次的权限控制确保了数据的安全性和隔离性。
10. 推送通知系统
10.1 Web Push
Web Push是PWA的核心功能之一,它允许服务器主动向用户的浏览器推送消息,即使用户没有打开网站也能收到通知。这种技术基于Service Worker实现,通过加密的推送服务安全地传递消息。在本系统中,Web Push用于推送作业提醒、新视频通知等重要信息。
用户订阅
用户在浏览器中授权推送权限,生成唯一的订阅端点
保存订阅信息
系统将订阅端点、公钥等信息保存到用户数据中
服务器发送消息
使用web-push库,通过订阅端点推送加密消息
Service Worker显示
浏览器接收消息后,由Service Worker显示通知
10.2 Android原生推送
对于Android原生APP,系统通过WebSocket建立长连接,实现服务器到APP的实时消息推送。WebSocket是一种全双工通信协议,相比传统的HTTP轮询,它能够显著降低延迟和服务器负载。当有新消息需要推送时,服务器通过WebSocket连接直接发送给在线的APP客户端。
10.3 邮件通知
系统集成了内部邮件服务器,使用Nodemailer库发送邮件通知。邮件通知作为推送通知的补充渠道,确保重要消息能够可靠送达。特别是对于作业截止提醒等关键通知,系统会同时发送Web Push、APP推送和邮件,形成多重保障机制。
10.4 定时提醒
系统使用node-cron库实现定时任务调度,自动检查即将截止的作业并发送提醒:
紧急提醒
每2小时检查一次,对24小时内即将截止的作业发送紧急提醒
每日提醒
每天18:00检查,对3天内即将截止的作业发送常规提醒
11. 移动端APP开发
11.1 Capacitor
Capacitor是由Ionic团队开发的跨平台原生运行时框架,它能够将Web应用打包成iOS和Android原生APP。Capacitor的核心理念是"一次开发,处处运行",开发者只需编写一套基于Web技术的代码,就能生成多个平台的原生应用。
Capacitor的优势
  • Web优先:使用Web技术栈开发
  • 原生能力:通过插件调用原生API
  • 性能优秀:接近原生应用的运行性能
  • 灵活部署:可以随时更新Web内容,无需重新打包
  • 易于调试:支持Chrome DevTools远程调试
在本项目中,Capacitor将我们的PWA封装成Android APP,同时添加了本地推送通知等原生功能,大大增强了应用的功能性和用户体验。
11.2 多渠道打包
Android项目支持多产品风味(Product Flavors)构建,这是Android Gradle构建系统的一个强大特性。通过配置不同的产品风味,我们可以从同一套源代码生成具有不同配置、资源或功能的多个APK版本。这种机制非常适合需要针对不同渠道或用户群体发布定制版本的场景。
Standard版本
包名:com.tongji.orchestra
这是主要的应用版本,包含完整的功能集,提供视频学习、作业管理、乐谱查看等核心功能。面向乐团全体成员发布。
Mail版本
包名:com.tongji.orchestra.mail
这是针对邮箱功能定制的版本,集成了邮件客户端,方便用户在同一应用内查看乐团邮件通知。面向需要频繁收发邮件的管理人员。

两个版本使用不同的包名,因此可以同时安装在一台设备上,互不干扰。它们共享大部分代码,仅在特定功能上有差异。
12. CI/CD自动化部署
12.1 GitHub Actions工作流
CI/CD(持续集成/持续部署)是现代软件开发的最佳实践。通过GitHub Actions,我们实现了代码推送到仓库后自动构建Android APK的完整流程。这种自动化机制大幅提升了开发效率,减少了人为错误,确保每次发布的质量。
工作流触发条件
# .github/workflows/android-build.yml name: Build Android APK on: push: branches: [ main ] concurrency: group: android-build-${{ github.ref }} cancel-in-progress: true
配置说明:
  • 只有推送到main分支才触发构建
  • 同一时间只允许一个构建任务运行
  • 新构建触发时会取消进行中的旧构建
构建任务定义
jobs: build: runs-on: ubuntu-latest permissions: contents: write
任务运行在最新版本的Ubuntu虚拟机上,并被授予写入仓库内容的权限,用于发布构建产物。
12.2 环境准备步骤
在开始构建之前,工作流需要准备完整的开发环境。这个过程包括安装Node.js、Java、Android SDK等必要的工具链,以及配置项目依赖。GitHub Actions提供了丰富的预定义操作,简化了环境准备工作。
1
Step 1: 检出代码
- name: Checkout code uses: actions/checkout@v4
从GitHub仓库克隆最新代码到虚拟机
2
Step 2: 安装Node.js
- name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm'
安装Node.js 18.x版本,并启用npm缓存
3
Step 3: 安装项目依赖
- name: Install dependencies run: npm ci
使用npm ci安装依赖,比npm install更快更可靠
4
Step 4: 安装Java环境
- name: Setup Java uses: actions/setup-java@v4 with: distribution: 'temurin' java-version: '17'
安装Java 17,Android构建所需
5
Step 5: 安装Android SDK
- name: Setup Android SDK uses: android-actions/setup-android@v3
配置Android SDK和构建工具
12.3 构建Android APK
环境准备完成后,工作流开始执行实际的Android应用构建过程。这个过程包括同步Capacitor配置、运行Gradle构建任务等步骤。Gradle是Android官方的构建工具,它会编译代码、打包资源、签名应用,最终生成可安装的APK文件。
1
Step 6: 同步Capacitor
- name: Sync Capacitor run: npx cap sync android
将Web代码和资源同步到Android项目中
2
Step 7: 构建APK
- name: Build Android APK run: | cd android chmod +x ./gradlew ./gradlew assembleStandardDebug
执行Gradle构建任务,生成Debug版APK

构建命令说明:
  • chmod +x ./gradlew:给Gradle包装器添加执行权限
  • assembleStandardDebug:构建Standard风味的Debug版本
  • 生成的APK位于:android/app/build/outputs/apk/standard/debug/
12.4 敏感信息管理
GitHub Secrets是GitHub提供的安全存储敏感配置的机制。这些配置被加密存储,只能在工作流运行时访问,确保了密钥、密码等敏感信息的安全。配置Secrets非常简单,在仓库的Settings → Secrets and variables → Actions页面即可添加。
13. 服务器运维
13.1 服务器环境
系统部署在一台专用的云服务器上,运行最新的Ubuntu长期支持版本。服务器配置经过精心优化,能够稳定支撑系统的各项功能需求。服务器采用域名管理,便于记忆和访问,同时配置了完善的防火墙和安全策略。
Ubuntu
操作系统
Ubuntu 24.04.3 LTS
4
CPU核心
2物理核心,4逻辑核心
8GB
内存
充足的运行空间
40GB
存储
SSD高速存储
100Mbps
公网带宽
百兆高速专用网络
13.2 运行的服务
服务器上运行着多个关键服务,它们相互配合,共同支撑系统的正常运行。每个服务都有明确的职责分工,通过标准的接口和协议进行通信。这种服务化的架构设计使得系统具有良好的可维护性和可扩展性。
Nginx
Web服务器和反向代理,处理HTTP/HTTPS请求,提供负载均衡和SSL终止功能
Node.js
应用服务器,运行Express.js框架,处理业务逻辑和API请求
MongoDB
主数据库,存储用户、视频、作业等核心业务数据,提供持久化存储
Redis
缓存服务器,存储会话数据和热点数据,大幅提升系统响应速度
PM2
Node.js进程管理器,负责应用的启动、监控、日志管理和自动重启
Dovecot
邮件接收服务,提供IMAP/POP3协议支持,处理邮件的收取和存储
Postfix
邮件传输服务,负责SMTP邮件发送,处理系统通知邮件的投递
实时监控:宝塔面板
系统采用宝塔面板作为服务器管理工具,提供了友好的Web界面来管理服务器。通过宝塔面板,管理员可以实时监控服务器状态、管理网站配置、查看日志、设置定时任务等,大大降低了服务器运维的技术门槛。
宝塔面板主要功能
  • 系统监控:实时查看CPU、内存、磁盘、网络使用情况
  • 文件管理:Web界面上传、下载、编辑文件
  • 计划任务:设置定时备份、日志清理等任务
  • 防火墙:配置端口开放和IP黑白名单
  • 一键部署:快速安装常用软件和服务
总结
系统采用的技术栈经过精心选择,每一个技术组件都是为了解决特定的问题而引入的。整个技术栈形成了一个完整的生态系统,从开发到部署,从前端到后端,从服务器到云端,无缝衔接,高效协作。
后端技术
Node.js + Express.js作为服务端框架,MongoDB存储数据,Socket.io实现实时通信
前端技术
原生JavaScript + CSS3构建界面,Service Worker提供PWA能力
移动端技术
Capacitor封装Web应用为Android APP,支持原生功能调用
云服务
阿里云ECS服务器,OSS对象存储,CDN内容加速
运维技术
Nginx反向代理,PM2进程管理,GitHub Actions自动化部署
感谢观看
如果您有任何问题或建议,欢迎随时交流讨论!

联系方式
技术支持:admin@tongji-orchestra.icu