构建、部署与质量保障
理解项目的构建流程、部署方案和测试策略
- 理解 Next.js 构建流程
- 掌握静态导出和自定义服务器
- 了解测试策略
- 理解版本管理和发布流程
构建流程
# package.json 脚本
print("""
npm run dev # 开发模式（热更新）
npm run build # 生产构建（静态导出到 out/）
npm run start # 启动生产服务器
npm run test # 运行单元测试（Vitest）
npm run lint # ESLint 代码检查
""")Next.js 构建做了什么？
构建流程
类型检查（TypeScript）检查所有 .ts/.tsx 文件的类型错误零报错才能构建成功代码编译（SWC）TypeScript → JavaScriptJSX → React.createElement比 Babel 快 20 倍（Rust 编写）页面预渲染SSG 页面在构建时生成 HTML318 个课程页全部预渲染每个页面是独立 HTML 文件代码分割公共代码抽离（React、Tailwind）页面级 chunk（按需加载）Monaco Editor 单独 chunk静态导出所有文件输出到 out/ 目录可部署到任何静态服务器
部署方案
朋友好学有三种部署方式，从简单到复杂：
部署方案对比
方案1：Vercel（最简单）连接 GitHub 仓库自动部署全球 CDN、自动 HTTPS免费额度足够限制：需要 Vercel 账号方案2：静态托管 + CDNout/ 上传到 Nginx/OSS/S3配合 CDN（Cloudflare/阿里云）适合企业内部部署方案3：自定义服务器（本项目方案）server.js 提供静态文件服务支持 Gzip 压缩、CSP 安全头支持局域网访问（手机扫码）node server.js 即可启动
server.js 不只是静态文件服务器，还能做这些：Gzip/Brotli 压缩，能减70%传输体积CSP 安全头，防XSS正确的MIME类型，.wasm必须是application/wasm支持局域网访问，手机扫码就能学未来能扩展API这些都是python -m http.server做不到的
测试策略
测试金字塔
/\ /E2E\ ← Playwright（少量，关键路径） /------\ / 集成测试 \ ← 组件测试（中等数量） /------------\ / 单元测试 \ ← Vitest（大量，快速） /------------------\单元测试覆盖：判题引擎（20 个测试）等级计算（9 个测试）错误翻译（10 个测试）工具函数（17 个测试）课程数据完整性（10 个测试）存储安全（7 个测试）
版本管理
Git 规范
分支策略：main：生产分支，始终可运行feature/xxx：功能分支fix/xxx：修复分支Commit 规范（Conventional Commits）：feat: 新功能fix: 修复 bugdocs: 文档更新style: 格式调整refactor: 重构test: 测试相关chore: 构建/工具版本号（SemVer）：MAJOR.MINOR.PATCH1.0.0 → 1.1.0（新功能）→ 1.1.1（修复）
每次更新 APK 文件名带版本号，比如 Pygood-v2.25.0.apk，能避免浏览器缓存旧版本。Android WebView 缓存可能导致更新不生效，改文件名能强制重新下载。
Next.js 静态导出的目录是什么？
.wasm 文件必须用哪个 MIME 类型，浏览器才会正确执行？
资深工程师加餐
底层原理 · 大厂视角 · 工程经验，点卡片展开
JS 主线程同时负责跑逻辑和绘制 UI，一段重计算会霸占线程导致掉帧、点击无响应。Web Worker 是独立后台线程，把计算（如本项目的 Python 运行时）丢进去，它通过 postMessage 以结构化克隆的方式和主线程通信，主线程依旧流畅。要点：Worker 不能操作 DOM、通信有序列化成本，因此适合「计算密集、交互稀疏」的任务，并要设计好任务队列与超时，避免消息堆积。
挑战任务
按扩展名返回 MIME 类型
服务器靠 MIME 类型告诉浏览器「这是什么文件」。请实现 mime_of(name)：根据文件扩展名返回正确的 MIME（.wasm→application/wasm，.json→application/json，.html→text/html，.js→application/javascript，未知→application/octet-stream）。
课后作业
部署实践
把项目部署到 Vercel 或者自己的服务器就行，部署的时候碰到的问题和对应的解决办法，都记下来。