数据科学与大数据技术 - 2023级
工程实践 2 项目作业
Author：2023083061 张超
一个简单的 Steam 游戏检索网站。包括：
- 游戏检索
- Steam 游戏数据库（定期抓包生成，更新存在延迟）
- Steam API
- 游戏库总览
- 轮播图游戏推荐
- 简单的用户登录系统
后期计划集成 Steam SDK，用户可通过 Steam 登录，并通过 API 生成用户画像，包括：
- 用户资料
- 用户游戏库
- 游戏偏好分析
- 成就信息
- Frontend：Next.js
- Backend：Flask
- Database：SQLite
原型设计软件：Axure RP 11
可以通过 Axure Education Plan 白嫖到免费的 Axure 许可证（拒绝盗版）
自学用 Axure 教程：点击跳转
通过 Axure RP 11 设计的项目原型图，所涉及到的工具链有：
- 线框（铺设原型框架）
- 交互（创建可交互按钮）
- 热区（为线框和交互间创建更复杂的连接关系）
- svg 图像转换
总体涉及到的原型创作并不复杂。后期有进一步学习的打算。包括：
- 滚动式页面仿真
- 弹出式菜单设计
- 完整项目原型开发
通过爬虫获取 Steam 游戏数据
由于 Steam 的反爬虫规则，需要设置代理客户端（正向代理），每个客户端爬取一定量数据，最终汇总
本项目数据库由 SQLite3 驱动，数据库（.db）文件名为steamscope.db，内含两张表：
-
游戏数据表
games抓取到的游戏数据。建表语句：CREATE TABLE "games" ( id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT, types TEXT, name TEXT, desc_snippet TEXT, recent_reviews TEXT, all_reviews TEXT, release_date TEXT, developer TEXT, publisher TEXT, popular_tags TEXT, game_details TEXT, languages TEXT, achievements FLOAT, genre TEXT, game_description TEXT, mature_content TEXT, minimum_requirements TEXT, recommended_requirements TEXT, original_price TEXT, discount_price TEXT )
-
用户数据表
users利用 fake 库生成随机的用户信息。建表语句：CREATE TABLE "users" ( id INTEGER PRIMARY KEY AUTOINCREMENT, account TEXT UNIQUE, username TEXT, password TEXT )
本项目使用 Next.js 作为前端框架，需要配置本地运行时环境。正所谓“磨刀不负砍柴功”，我个人觉得，在项目初期乃至学习一门新技术/新框架的初期，选择正确的工具是很有必要的：提高开发效率在其次，如果在开发后期发现工具不合适不满意，此时迁移的成本就巨大了
运行时环境最主流的自然是 Node.js（但就在我写这一篇 README 的前天，我还了解到一个速度更快、功能更全的 Bun.js……以后可能要迁移过去了 😣），而提到 node，就不得不提 node 下的包管理器了。目前市面上有三种主流的选择：
npm（默认）yarnpnpm
这就牵涉到一个问题：我该怎么选择包管理器呢？此处对于包管理的选择暂且不表，我最终选择了 pnpm。至于我的开发环境是 MacOS，直接运行以下命令快速配置当然是可以的：
brew install node
corepack prepare pnpm
corepack enable pnpm
cd ~/SteamScope/frontend
pnpm create next-app
pnpm dev但是这样一点也不优雅 😡
- 所有的
npm包都被安装在全局路径，维护起来十分不易 - 在后期项目增多的情况下，其他项目依赖的可能是不同的
node版本，与全局安装的node版本不一致 - 我们直接使用了
corepack的形式来安转pnpm。这确实是官方推荐的形式，但是仍有两个问题：corepack仍是作为 Beta 功能之一，后期可能会发生改动- 我更倾向于用
brew统一管理开发工具，而pnpm确实提供了brew的安装方式
对于这三个问题，答案不言而喻：我们需要配置项目隔离的 node 环境，类似于 python 的虚拟环境。经过一段时间的了解，我找到了三款用于创建隔离环境的工具：
nvmfnmvolta
总结一下，部署前端环境时遇到的问题主要在于工具的选择（强迫症患者已去世 🙏）
- 运行时环境的选择：
nodeorbun？ - 隔离环境的选择：
fnmorvolta？ - 安装方式的选择：
corepack、breworvolta（如果你使用volta）？
至于最终的选择，我觉得其中有很多主观的因素，各位见仁见智咯！
本项目使用 Flask 作为后端框架，需要配置 Python 环境。我通过最近很火的 uv 来进行项目管理。核心优势：
- 使用
Rust编写，速度极快（这一点加分很多 hhh，我很喜欢 Rust 语言 😝） - 与
pip兼容，基本不需要改变使用习惯 - 使用
.toml文件和.lock文件来管理依赖，对于开发环境和生产环境的迁移来说真的很方便
落实到前端开发，又遇到一个问题：究竟选择哪个框架呢？似乎 Vue 是最好的选择：国人作者开发，在国内的流行度也非常之高。但我最终的选择却是：Next.js！主要原因有三点：
- 基于
React框架。我很喜欢它的app router架构。这是一种基于组件的模块化设计，类似函数一样可以增强代码的复用性 - 在
React的基础上，又增加了CSR（客户端渲染）特性。渲染速度更快，也有很多有意思的函数（如useState和useEffect） - 可以白嫖到
Vercel的服务器，用来托管项目
终于到了后端开发，这时就没有这么多问题了！:sunglasses: 唯一可以算得上问题的是 flask 的路由。在实践中，推荐的方法是将所有的路由文件放在 /api 文件夹下，然后在 /app.py 统一管理和启动。这就涉及到了 python 文件之间的组织，以及 __init__.py 文件的编写，这也着实让我费了一番功夫……（基础不好的锅:expressionless:）
我一直认为，成就感的最大来源来自于他人的正面评价。而对于网站设计，想要获得他人的评价，第一步就是：
能被他人看见
可以这么说：在设计之初，我就已经确定了托管网站的想法：“前端可以借助 Vercel 的服务器，后端就部署在我自己的服务器上吧！”
然而实践起来却没有想象的这么简单
- 问题
Vercel服务器上的部署严格遵守eslint规则，即使是一个小的Warning也可能导致编译失败- 前后端通信必须借助
https，涉及到了证书问题 - 前端和后端分别部署在不同的服务器上，需要及时跟踪部署情况和结果。另外，对于每一次
git commit，服务器也得及时反映并更新。这需要CI-CD和DevOps的相关知识
- 解决方法
-
Vercel服务器上的部署： 由于 Next.js 在今年的大版本更新中更新了静态网站渲染规则，而 ChatGPT 的知识库更新截止在去年，含泪自学了新版标准…… 😭 -
个人服务器上的部署：
- 简单学习了一下
ssl/tls加密的原理 - 学习了一下
nginx中server块和location块的编写，因为涉及到http的重定向…… - 通过
acme.sh项目，利用acme协议申请证书（这里使用的是DNS方式，申请了通配符证书）
- 简单学习了一下
-
DevOps： 学习并且编写了Github Action。通过SSH连接我的后端服务器，并在后端服务器上运行git pull命令拉取最近的更新。同时，为了防止由于SSH断开导致后端服务的停止，通过tmux保存了session，同时方便了日志的追踪。最后，根据Action运行结果，向Discord频道的Webhook发送通知。具体的yaml如下：name: Auto deploy backend on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Setup SSH run: | mkdir -p ~/.ssh echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519 chmod 600 ~/.ssh/id_ed25519 ssh-keyscan -H 152.42.224.209 >> ~/.ssh/known_hosts - name: Pull and deploy on server run: | ssh root@152.42.224.209 << 'EOF' set -e cd /root/SteamScope/backend git pull https://github.com/Chaoermeng/SteamScope.git main git lfs pull tmux kill-session -t flask || true tmux new-session -d -s flask 'uv run app.py' EOF - name: Notify success via Discord if: success() run: | curl -X POST \ ${{secrets.WEBHOOK_URL}} \ --header 'Content-Type: application/json' \ --data-raw '{ "content": "✅ 后端部署成功！" , "username": "Github Action" }' - name: Notify failure via Discord if: failure() run: | curl -X POST \ ${{ secrets.WEBHOOK_URL }} \ --header 'Content-Type: application/json' \ --data-raw '{ "content": "❌ 后端部署失败！请检查 GitHub Actions 日志" , "username": "Github Action" }'
完美收官！！！ 😁