码上问学问代码之理,学编程之道

项目部署与答辩

写得出不算完,别人能访问才算交付。这一页对应课程标准项目 9(部署「古典文学网」)与考核的「部署与答辩 8%」。 讲清从你笔记本上的三端,到公网一台服务器上的完整链路:打包构建 → 数据库与后端部署 → 前端发布 → Nginx 反代 → 别人能访问, 最后给一套能直接照着讲的答辩材料与评分维度。

部署心智:开发期靠 Vite 代理解决跨域;上线期靠 Nginx 同时托管静态页面和反向代理 /api。前后端分离的本质就是——三端各自独立部署,只靠接口约定耦合。

部署五步法

每一步都留下可验证的结果
01 打包

前端构建

npm run build 产出 dist 静态文件,不再依赖 dev server。

→
02 数据库

建库导入

在服务器 MySQL 执行 hiwen.sql,灌入 7 张表与种子数据。

→
03 后端

Gunicorn 起服

用 Gunicorn 托管 Flask,systemd 守护,不再用 flask run。

→
04 反代

Nginx 收口

Nginx 托管 dist 并反代 /api 到后端端口。

→
05 放行

防火墙

放行 80/443,关闭多余端口,域名或 IP 即可访问。

后端部署:Gunicorn + systemd

生产启动gunicorn -w 4 -b 127.0.0.1:5000 app:app(4 个工作进程,只监听本机,由 Nginx 反代)。
守护进程写 /etc/systemd/system/hiwen.service,systemctl enable --now hiwen 开机自启。
环境变量数据库密码、JWT 密钥放 .env,绝不写进代码(见安全编码页)。
验证ss -tlnp | grep 5000 确认监听;curl 127.0.0.1:5000/api/health 看接口活没活。

前端发布 + Nginx 反代

构建npm run build → 把 dist/ 上传到服务器 /var/www/hiwen/。
Nginx 配置站点根指向 dist;location /api { proxy_pass http://127.0.0.1:5000; } 把接口请求转给后端。
为什么反代浏览器只看到一个源(80/443),跨域问题在服务器内部解决,前端无需 CORS 配置。
验证浏览器访问 http://服务器IP/ 看到首页;点进作品、登录、写书评都通,才算部署成功。

期末答辩

综合实战 8% + 课堂过程记录

答辩材料清单 & 评分维度

材料① 部署可访问的线上地址;② 项目说明书(需求 + 数据库设计 + 接口清单);③ 演示脚本(5 分钟走查);④ 分工与角色轮换记录(产品/后端/前端)。
10%
需求与数据库设计
12%
后端 API 开发
12%
前端页面开发
8%
联调与测试
8%
部署与答辩
5 分钟演示脚本:① 30s 说清项目背景与功能(古典文学网:赏文学/书评/用户中心);② 2min 走查核心链路(浏览→详情→登录→写书评→收藏);③ 1min 讲技术架构(Vue3+Flask+MySQL 前后端分离);④ 1min 讲安全与部署(JWT 鉴权、SQL 参数化、Nginx 上线);⑤ 30s 讲分工与踩坑。

部署常见坑(答辩前自查)

📝 本节自测

做完点「检查本节」看解析与得分;做错可重做。