尧图网站建设 
本文是 头条【vuefastapi 】全栈教学项目系列之《项目部署与进阶拓展指南》配套开源项目均已开源欢迎 Star / Fork前端仓库Vue3 Vitehttps://gitee.com/rukei/toutiao_frontend ·git clone gitgitee.com:rukei/toutiao_frontend.git后端仓库FastAPIhttps://gitee.com/rukei/toutiao ·git clone gitgitee.com:rukei/toutiao.git 项目部署与进阶拓展指南目的将项目从本地开发环境推向生产环境并提供能力提升方向适合时机完成开发和测试后准备上线或想进一步提升时第一部分项目部署指南一、部署架构概览┌─────────────────────────────────────────────────────────┐ │ 用户 (浏览器) │ └──────────────────────────┬──────────────────────────────┘ │ HTTPS :443 ▼ ┌─────────────────────────────────────────────────────────┐ │ Nginx (反向代理) │ │ ┌─────────────────────┬───────────────────────────────┐│ │ │ 静态资源服务 │ API请求代理 ││ │ │ (*.html/*.js/*.css)│ /api/* → localhost:8000 ││ │ └─────────────────────┴───────────────────────────────┘│ └──────────────────────────┬──────────────────────────────┘ │ ┌───────────────┼───────────────┐ ▼ ▼ ▼ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ 前端静态文件 │ │ FastAPI后端 │ │ MySQL │ │ (dist/) │ │ (:8000) │ │ (:3306) │ └──────────────┘ └──────────────┘ └──────────────┘ │ ▼ ┌──────────────┐ │ Redis │ │ (:6379) │ └──────────────┘二、本地生产环境部署2.1 准备工作# 1. 创建生产目录结构mkdir-p/opt/toutiao/{frontend,backend,logs}# 2. 复制代码cp-rtoutiao_frontend/dist /opt/toutiao/frontend/cp-rtoutiao_backend/* /opt/toutiao/backend/2.2 后端生产配置创建生产环境配置文件/opt/toutiao_backend/.env.production# 数据库配置 DB_HOST127.0.0.1 DB_PORT3306 DB_USERtoutiao_user # 生产环境建议创建专用用户 DB_PASSWORDYourStrongPasswordHere_2024! DB_NAMEtoutiao_prod # 使用独立的生产数据库 # Redis配置 REDIS_HOST127.0.0.1 REDIS_PORT6379 REDIS_PASSWORDYourRedisPassword # 生产环境建议设密码 # 应用配置 DEBUGfalse # 关闭调试模式 SECRET_KEYyour-production-secret-key-change-this-2024 ACCESS_TOKEN_EXPIRE_HOURS24 # OpenAI配置可选 OPENAI_API_KEYsk-prod-xxx OPENAI_BASE_URLhttps://api.openai.com/v1 MODEL_NAMEgpt-3.5-turbo2.3 创建生产数据库用户-- 以root身份登录MySQLmysql-u root-p-- 创建专用用户最小权限原则CREATEUSERtoutiao_userlocalhostIDENTIFIEDBYYourStrongPasswordHere_2024!;-- 创建生产数据库CREATEDATABASEtoutiao_prodCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 授权只给必要的权限GRANTSELECT,INSERT,UPDATE,DELETEONtoutiao_prod.*TOtoutiao_userlocalhost;FLUSHPRIVILEGES;-- 退出EXIT;2.4 启动后端服务方式A直接运行适合测试cd/opt/toutiao/backend# 安装依赖python-mvenv venvsourcevenv/bin/activate# Linux/macOSpipinstall-rrequirements.txt# 运行关闭debug模式uvicorn main:app--host127.0.0.1--port8000--workers4方式B使用systemd服务推荐生产环境创建服务文件/etc/systemd/system/toutiao-api.service[Unit] DescriptionToutiao News API Service Afternetwork.target mysql.service redis.service [Service] Typesimple Userwww-data Groupwww-data WorkingDirectory/opt/toutiao/backend EnvironmentPATH/opt/toutiao/backend/venv/bin ExecStart/opt/toutiao/backend/venv/bin/uvicorn main:app --host 127.0.0.1 --port 8000 --workers 4 Restartalways RestartSec3 [Install] WantedBymulti-user.target# 启动服务sudosystemctl daemon-reloadsudosystemctlenabletoutiao-apisudosystemctl start toutiao-api# 查看状态sudosystemctl status toutiao-api# 查看日志sudojournalctl-utoutiao-api-f2.5 Nginx配置创建配置文件/etc/nginx/conf.d/toutiao.confserver { listen 80; server_name your-domain.com; # 替换为你的域名或IP # 前端静态资源 location / { root /opt/toutiao/frontend/dist; index index.html; # SPA路由 fallback必须 try_files $uri $uri/ /index.html; # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { expires 30d; add_header Cache-Control public, immutable; } # Gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; gzip_min_length 1000; } # API反向代理 location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # WebSocket支持如果需要 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; # 超时设置 proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; } # Swagger文档生产环境建议关闭或限制访问 location /docs { deny all; # 生产环境禁止访问 # 或允许特定IP: # allow your.ip.address; # deny all; } }# 测试Nginx配置nginx-t# 重载Nginxsudosystemctl reload nginx2.6 HTTPS配置Let’s Encrypt免费证书# 安装Certbotsudoaptinstallcertbot python3-certbot-nginx# Ubuntu/Debian# 或 yum install certbot python3-certbot-nginx # CentOS# 申请证书并自动配置Nginxsudocertbot--nginx-dyour-domain.com# 自动续期Certbot通常会自动设置cron任务sudocertbot renew --dry-run# 测试续期是否正常三、云服务器部署以腾讯云/阿里云为例3.1 服务器选购建议配置最低要求推荐配置参考价格CPU1核2核-内存2GB4GB-硬盘40GB SSD50GB SSD-带宽1Mbps3Mbps-系统Ubuntu 22.04Ubuntu 22.04-价格~50元/月~100元/月新用户常有优惠3.2 安全组/防火墙配置端口用途开放范围22SSH你的IP不要开放0.0.0.080HTTP0.0.0.0/0443HTTPS0.0.0.0/03306MySQL不要开放仅本地6379Redis不要开放仅本地8000FastAPI不要开放通过Nginx代理3.3 一键部署脚本#!/bin/bash# deploy.sh - 新闻头条项目一键部署脚本# 用法chmod x deploy.sh sudo ./deploy.shset-e# 遇错即停echoecho 新闻头条项目 - 自动部署脚本echo# 1. 更新系统 echo[1/6] 更新系统包...aptupdateaptupgrade-y# 2. 安装基础软件 echo[2/6] 安装基础软件...aptinstall-ypython3 python3-pip python3-venv nginx mysql-server redis-server# 3. 配置MySQL echo[3/6] 配置MySQL...mysql-urootEOF CREATE DATABASE IF NOT EXISTS toutiao_prod CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER IF NOT EXISTS toutiao_userlocalhost IDENTIFIED BY ToutiaoProd2024!; GRANT ALL PRIVILEGES ON toutiao_prod.* TO toutiao_userlocalhost; FLUSH PRIVILEGES; EOF# 4. 部署后端 echo[4/6] 部署后端...mkdir-p/opt/toutiao/backend# 这里假设你已把代码复制过来cd/opt/toutiao/backend python3-mvenv venvsourcevenv/bin/activate pipinstall-rrequirements.txt# 创建.env文件cat.envEOF DB_HOST127.0.0.1 DB_PORT3306 DB_USERtoutiao_user DB_PASSWORDToutiaoProd2024! DB_NAMEtoutiao_prod REDIS_HOST127.0.0.1 REDIS_PORT6379 EOF# 5. 配置Nginx和Systemd echo[5/6] 配置Nginx和系统服务...# Systemd服务cat/etc/systemd/system/toutiao-api.serviceEOF [Unit] DescriptionToutiao News API Afternetwork.target mysql.service redis.service [Service] Typesimple Userwww-data WorkingDirectory/opt/toutiao/backend ExecStart/opt/toutiao/backend/venv/bin/uvicorn main:app --host 127.0.0.1 --port 8000 --workers 4 Restartalways [Install] WantedBymulti-user.target EOF# Nginx配置假设前端dist已复制到/opt/toutiao/frontend/distcat/etc/nginx/conf.d/toutiao.confEOF server { listen 80; server_name _; location / { root /opt/toutiao/frontend/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } EOF# 6. 启动服务 echo[6/6] 启动所有服务...systemctl daemon-reload systemctlenabletoutiao-api mysql redis nginx systemctl restart mysql redis nginx toutiao-apiechoechoecho 部署完成echoecho后端API: http://$(hostname-I|awk{print $1})echo请将前端dist目录复制到 /opt/toutiao/frontend/distecho然后配置域名和HTTPSecho四、域名解析配置4.1 DNS添加记录记录类型主机记录记录值说明A你的服务器IP主域名访问Awww你的服务器IPwww子域名CNAMEapi你的主域名API子域名可选4.2 Nginx多域名配置# 主站前端 server { listen 80; server_name your-domain.com www.your-domain.com; location / { root /opt/toutiao/frontend/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8000; # ... 同上 } } # API独立域名可选 server { listen 80; server_name api.your-domain.com; location / { proxy_pass http://127.0.0.1:8000; # ... 同上 } }第二部分项目复盘模板一、项目总结报告完成项目后填写以下模板进行复盘 新闻头条项目 - 学习复盘报告 【基本信息】 项目名称________________ 开始日期________________ 完成日期________________ 总用时________________小时 【技术栈掌握情况】 ┌─────────────────┬────────┬────────┬────────┐ │ 技术点 │ 听说过 │ 用过 │ 掌握 │ ├─────────────────┼────────┼────────┼────────┤ │ Vue 3 │ □ │ □ │ □ │ │ Vite │ □ │ □ │ □ │ │ FastAPI │ □ │ □ │ □ │ │ MySQL │ □ │ □ │ □ │ │ Redis │ □ │ □ │ □ │ │ JWT认证 │ □ │ □ │ □ │ │ RESTful API │ □ │ □ │ □ │ │ Pinia状态管理 │ □ │ □ │ □ │ │ Vue Router │ □ │ □ │ □ │ │ Nginx部署 │ □ │ □ │ □ │ └─────────────────┴────────┴────────┴────────┘ 【最困难的3个问题】 1. 问题________________ 解决方案______________ 学到了什么____________ 2. 问题________________ 解决方案______________ 学到了什么____________ 3. 问题________________ 解决方案______________ 学到了什么____________ 【最有成就感的3个时刻】 1. __________________ 2. __________________ 3. __________________ 【如果重来一次会怎么做】 1. __________________ 2. __________________ 3. __________________ 【下一步学习计划】 短期1个月内________________ 中期3个月内________________ 长期1年内________________ 【其他感想】 _________________________________ _________________________________ _________________________________ 二、常见面试问题准备基于本项目你可能遇到的面试题Vue/Frontend 相关QVue 3的Composition API和Options API有什么区别参考答案要点 - Options API按选项组织data/methods/mounted适合简单组件 - Composition API按功能组织相关代码放一起适合复杂逻辑 - 更好的TypeScript支持 - 更好的逻辑复用Composables - setup语法糖更简洁QPinia和Vuex有什么区别为什么选Pinia参考答案要点 - mutations没了直接修改state - 更好的TypeScript支持 - 支持多个Store - 更轻量打包体积更小 - DevTools支持更好Q什么是SPA如何处理路由参考答案要点 - SPA Single Page Application单页应用 - 只有一个HTML文件通过JS动态渲染内容 - 使用History API控制URL不刷新页面 - Vue Router实现路由映射 - 需要服务端fallback配置try_filesPython/Backend 相关Q什么是RESTful API参考答案要点 - 用HTTP方法表示操作类型GET/POST/PUT/DELETE - 用URL表示资源名词不是动词 - 无状态每个请求包含所有信息 - 统一的响应格式 - 合理的状态码使用QJWT认证的流程是什么参考答案要点 1. 用户登录 → 验证凭据 2. 服务端生成JWTHeader.Payload.Signature 3. 返回Token给客户端 4. 客户端存储TokenlocalStorage 5. 后续请求在Authorization头携带Token 6. 服务端验证Token签名和有效期QSQLAlchemy ORM的优势参考答案要点 - 面向对象操作数据库不用写SQL - 数据库无关换数据库只需改连接字符串 - 自动类型转换 - 关系映射方便 - 迁移工具支持第三部分拔高练习练习1添加搜索功能难度⭐⭐需求描述首页顶部搜索框支持关键词搜索新闻标题搜索结果页展示匹配的新闻记录热门搜索关键词涉及知识点前端搜索组件、防抖处理后端模糊查询LIKE、全文索引数据库索引优化验收标准输入关键词能搜索到相关新闻搜索结果高亮关键词空结果有友好提示防抖处理避免频繁请求练习2实现消息通知系统难度⭐⭐⭐需求描述用户收到系统通知评论、点赞等通知列表页红点提示未读标记已读/全部已读WebSocket实时推送高级涉及知识点数据库通知表设计后端WebSocket或SSE前端实时通信、状态同步可选推送服务极光推送等验收标准评论自己的新闻时收到通知通知列表正确显示未读数量角标显示标记已读功能正常练习3添加图片上传功能难度⭐⭐⭐需求描述发布新闻时可上传封面图编辑资料时可上传头像图片压缩和格式转换对象存储OSS/COS集成涉及知识点前端文件上传组件、图片裁剪后端文件接收、存储存储本地存储/OSS/COS安全文件类型校验、大小限制验收标准能选择并预览图片上传后能正确显示支持常见图片格式jpg/png/gif文件大小限制如最大5MB练习4实现推荐算法难度⭐⭐⭐⭐需求描述首页推荐标签个性化展示基于用户浏览历史推荐热门新闻排行协同过滤推荐高级涉及知识点算法内容推荐、协同过滤数据分析用户行为追踪缓存推荐结果缓存机器学习基础可选验收标准推荐标签下有内容展示不同用户看到不同推荐有热门排行榜推荐结果相对准确练习5实现后台管理系统难度⭐⭐⭐⭐需求描述独立的管理后台PC端用户管理查看/封禁内容审核审核新闻/评论数据统计PV/UV/活跃用户权限管理管理员/运营涉及知识点前端Element Plus/Ant Design Vue后端RBAC权限模型数据可视化ECharts表格排序、筛选、分页、导出验收标准管理员登录独立于普通用户用户列表搜索/封禁新闻管理审核/置顶/推荐数据统计图表展示练习6性能优化专项难度⭐⭐⭐优化清单优化项当前状态目标方法首屏加载~3s1.5s代码分割、懒加载API响应~500ms200msRedis缓存、SQL优化图片大小原始压缩50%WebP格式、CDN打包体积~2MB500KBTree Shaking、压缩LCP指标4s2.5s关键CSS内联、预加载验收标准Lighthouse评分 90首屏加载 2sLCP 2.5s并发支持 100 用户练习7单元测试和E2E测试难度⭐⭐⭐测试覆盖目标层级工具覆盖率目标单元测试pytest / Vitest80%API测试httpx / supertest所有接口E2E测试Playwright / Cypress核心流程必测场景用户注册登录流程新闻CRUD操作收藏/历史功能权限验证未登录访问受保护接口练习8Docker容器化部署难度⭐⭐⭐⭐需求描述编写Dockerfile前端后端docker-compose一键编排多容器编排AppMySQLRedisNginxDocker Compose示例version:3.8services:frontend:build:./frontendports:-80:80depends_on:-backendbackend:build:./backendports:-8000:8000environment:-DB_HOSTmysql-REDIS_HOSTredisdepends_on:-mysql-redismysql:image:mysql:8.0environment:MYSQL_ROOT_PASSWORD:root_passwordMYSQL_DATABASE:toutiaovolumes:-mysql_data:/var/lib/mysqlredis:image:redis:7-alpinevolumes:-redis_data:/datavolumes:mysql_data:redis_data:验收标准docker-compose up -d一键启动全部服务所有功能正常运行数据持久化重启不丢失第四部分学习路线拓展完成本项目后的进阶方向┌─────────────┐ │ 本项目完成 │ └──────┬──────┘ ┌───────────────┼───────────────┐ ▼ ▼ ▼ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ 深化前端 │ │ 深化后端 │ │ DevOps │ └─────┬──────┘ └─────┬──────┘ └─────┬──────┘ │ │ │ ┌─────┴─────┐ ┌─────┴─────┐ ┌─────┴─────┐ ▼ ▼ ▼ ▼ ▼ ▼ TypeScript Node.js Django Docker CI/CD Nuxt3(SSR) NestJS Flask K8s 监控告警 移动端APP 微服务 GraphQL 云原生 性能优化 小程序 消息队列 PostgreSQL 高并发 安全加固推荐学习资源官方文档首选Vue 3https://cn.vuejs.org/FastAPIhttps://fastapi.tiangolo.com/zh/Piniahttps://pinia.vuejs.org/zh/Vanthttps://vant-ui.github.io/在线练习平台LeetCode算法Codewars编程挑战Exercism多语言实践开源项目贡献GitHub Trending找感兴趣的项目从修复文档/翻译开始逐步参与代码贡献技术博客/社区掘金、思否、CSDN中文Dev.to、Medium英文Stack Overflow问答第五部分简历撰写指导项目经历怎么写❌ 错误写法- 做了一个新闻头条项目 - 用Vue和Python写的 - 可以看新闻、登录注册✅ 正确写法STAR法则新闻头条全栈应用 | 独立开发 | 2026.07 - 2026.08 [Situation] 这是一个仿今日头条的移动端资讯应用服务于课程设计作业 [Task] 负责整个项目的前后端架构设计、开发、测试和部署 [Action] - 前端使用 Vue 3 Vite Vant 4 构建移动端界面 实现了12个页面、主题切换、国际化等功能 - 后端基于 FastAPI SQLAlchemy 设计RESTful API 实现了JWT认证、分页查询、Redis缓存等 - 数据库设计了6张表支持用户/新闻/收藏/评论等业务 - 部署使用 Nginx Gunicorn 部署到云服务器配置HTTPS [Result] - 项目完整运行支持注册用户浏览、收藏、评论新闻 - 实现了AI智能问答功能集成OpenAI API - 代码已开源至GitHub获得xx星技术栈展示技术栈 - 前端Vue 3, Vite, Vant 4, Pinia, Vue Router, Axios - 后端FastAPI, SQLAlchemy, Pydantic, JWT - 数据库MySQL, Redis - 工具Git, VS Code全栈通用/ PyCharm后端Python主流IDE, Postman, Chrome DevTools - 部署Nginx, Docker, Linux (Ubuntu)附录常用命令速查Linux服务器运维# 系统信息uname-a# 系统版本free-h# 内存使用df-h# 磁盘使用top# 进程监控按q退出# 文件操作ls-la# 详细列出文件tail-f/var/log/syslog# 实时查看日志greperrorlogfile.log# 搜索日志chmod600.env# 修改文件权限# 服务管理systemctl status nginx# 查看服务状态systemctl restart nginx# 重启服务journalctl-unginx-f# 查看服务日志# 网络诊断curl-Ihttps://example.com# 检查HTTP响应头netstat-tlnp# 查看监听端口pingexample.com# 网络连通性# 数据库mysql-uroot-p# 登录MySQLmysqldump-uroot-pdbbackup.sql# 备份mysql-uroot-pdbbackup.sql# 恢复# Gitgitstatus# 查看状态gitadd.# 暂存所有更改gitcommit-mmsg# 提交gitpush origin main# 推送到远程文档版本v1.0更新日期2026年7月适用项目toutiao_heima 新闻头条全栈项目 头条【vue+fastapi 】全栈教学项目系列之《08_项目部署与进阶拓展指南》
本文是 头条【vuefastapi 】全栈教学项目系列之《项目部署与进阶拓展指南》配套开源项目均已开源欢迎 Star / Fork前端仓库Vue3 Vitehttps://gitee.com/rukei/toutiao_frontend ·git clone gitgitee.com:rukei/toutiao_frontend.git后端仓库FastAPIhttps://gitee.com/rukei/toutiao ·git clone gitgitee.com:rukei/toutiao.git 项目部署与进阶拓展指南目的将项目从本地开发环境推向生产环境并提供能力提升方向适合时机完成开发和测试后准备上线或想进一步提升时第一部分项目部署指南一、部署架构概览┌─────────────────────────────────────────────────────────┐ │ 用户 (浏览器) │ └──────────────────────────┬──────────────────────────────┘ │ HTTPS :443 ▼ ┌─────────────────────────────────────────────────────────┐ │ Nginx (反向代理) │ │ ┌─────────────────────┬───────────────────────────────┐│ │ │ 静态资源服务 │ API请求代理 ││ │ │ (*.html/*.js/*.css)│ /api/* → localhost:8000 ││ │ └─────────────────────┴───────────────────────────────┘│ └──────────────────────────┬──────────────────────────────┘ │ ┌───────────────┼───────────────┐ ▼ ▼ ▼ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ 前端静态文件 │ │ FastAPI后端 │ │ MySQL │ │ (dist/) │ │ (:8000) │ │ (:3306) │ └──────────────┘ └──────────────┘ └──────────────┘ │ ▼ ┌──────────────┐ │ Redis │ │ (:6379) │ └──────────────┘二、本地生产环境部署2.1 准备工作# 1. 创建生产目录结构mkdir-p/opt/toutiao/{frontend,backend,logs}# 2. 复制代码cp-rtoutiao_frontend/dist /opt/toutiao/frontend/cp-rtoutiao_backend/* /opt/toutiao/backend/2.2 后端生产配置创建生产环境配置文件/opt/toutiao_backend/.env.production# 数据库配置 DB_HOST127.0.0.1 DB_PORT3306 DB_USERtoutiao_user # 生产环境建议创建专用用户 DB_PASSWORDYourStrongPasswordHere_2024! DB_NAMEtoutiao_prod # 使用独立的生产数据库 # Redis配置 REDIS_HOST127.0.0.1 REDIS_PORT6379 REDIS_PASSWORDYourRedisPassword # 生产环境建议设密码 # 应用配置 DEBUGfalse # 关闭调试模式 SECRET_KEYyour-production-secret-key-change-this-2024 ACCESS_TOKEN_EXPIRE_HOURS24 # OpenAI配置可选 OPENAI_API_KEYsk-prod-xxx OPENAI_BASE_URLhttps://api.openai.com/v1 MODEL_NAMEgpt-3.5-turbo2.3 创建生产数据库用户-- 以root身份登录MySQLmysql-u root-p-- 创建专用用户最小权限原则CREATEUSERtoutiao_userlocalhostIDENTIFIEDBYYourStrongPasswordHere_2024!;-- 创建生产数据库CREATEDATABASEtoutiao_prodCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 授权只给必要的权限GRANTSELECT,INSERT,UPDATE,DELETEONtoutiao_prod.*TOtoutiao_userlocalhost;FLUSHPRIVILEGES;-- 退出EXIT;2.4 启动后端服务方式A直接运行适合测试cd/opt/toutiao/backend# 安装依赖python-mvenv venvsourcevenv/bin/activate# Linux/macOSpipinstall-rrequirements.txt# 运行关闭debug模式uvicorn main:app--host127.0.0.1--port8000--workers4方式B使用systemd服务推荐生产环境创建服务文件/etc/systemd/system/toutiao-api.service[Unit] DescriptionToutiao News API Service Afternetwork.target mysql.service redis.service [Service] Typesimple Userwww-data Groupwww-data WorkingDirectory/opt/toutiao/backend EnvironmentPATH/opt/toutiao/backend/venv/bin ExecStart/opt/toutiao/backend/venv/bin/uvicorn main:app --host 127.0.0.1 --port 8000 --workers 4 Restartalways RestartSec3 [Install] WantedBymulti-user.target# 启动服务sudosystemctl daemon-reloadsudosystemctlenabletoutiao-apisudosystemctl start toutiao-api# 查看状态sudosystemctl status toutiao-api# 查看日志sudojournalctl-utoutiao-api-f2.5 Nginx配置创建配置文件/etc/nginx/conf.d/toutiao.confserver { listen 80; server_name your-domain.com; # 替换为你的域名或IP # 前端静态资源 location / { root /opt/toutiao/frontend/dist; index index.html; # SPA路由 fallback必须 try_files $uri $uri/ /index.html; # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { expires 30d; add_header Cache-Control public, immutable; } # Gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; gzip_min_length 1000; } # API反向代理 location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # WebSocket支持如果需要 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; # 超时设置 proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; } # Swagger文档生产环境建议关闭或限制访问 location /docs { deny all; # 生产环境禁止访问 # 或允许特定IP: # allow your.ip.address; # deny all; } }# 测试Nginx配置nginx-t# 重载Nginxsudosystemctl reload nginx2.6 HTTPS配置Let’s Encrypt免费证书# 安装Certbotsudoaptinstallcertbot python3-certbot-nginx# Ubuntu/Debian# 或 yum install certbot python3-certbot-nginx # CentOS# 申请证书并自动配置Nginxsudocertbot--nginx-dyour-domain.com# 自动续期Certbot通常会自动设置cron任务sudocertbot renew --dry-run# 测试续期是否正常三、云服务器部署以腾讯云/阿里云为例3.1 服务器选购建议配置最低要求推荐配置参考价格CPU1核2核-内存2GB4GB-硬盘40GB SSD50GB SSD-带宽1Mbps3Mbps-系统Ubuntu 22.04Ubuntu 22.04-价格~50元/月~100元/月新用户常有优惠3.2 安全组/防火墙配置端口用途开放范围22SSH你的IP不要开放0.0.0.080HTTP0.0.0.0/0443HTTPS0.0.0.0/03306MySQL不要开放仅本地6379Redis不要开放仅本地8000FastAPI不要开放通过Nginx代理3.3 一键部署脚本#!/bin/bash# deploy.sh - 新闻头条项目一键部署脚本# 用法chmod x deploy.sh sudo ./deploy.shset-e# 遇错即停echoecho 新闻头条项目 - 自动部署脚本echo# 1. 更新系统 echo[1/6] 更新系统包...aptupdateaptupgrade-y# 2. 安装基础软件 echo[2/6] 安装基础软件...aptinstall-ypython3 python3-pip python3-venv nginx mysql-server redis-server# 3. 配置MySQL echo[3/6] 配置MySQL...mysql-urootEOF CREATE DATABASE IF NOT EXISTS toutiao_prod CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER IF NOT EXISTS toutiao_userlocalhost IDENTIFIED BY ToutiaoProd2024!; GRANT ALL PRIVILEGES ON toutiao_prod.* TO toutiao_userlocalhost; FLUSH PRIVILEGES; EOF# 4. 部署后端 echo[4/6] 部署后端...mkdir-p/opt/toutiao/backend# 这里假设你已把代码复制过来cd/opt/toutiao/backend python3-mvenv venvsourcevenv/bin/activate pipinstall-rrequirements.txt# 创建.env文件cat.envEOF DB_HOST127.0.0.1 DB_PORT3306 DB_USERtoutiao_user DB_PASSWORDToutiaoProd2024! DB_NAMEtoutiao_prod REDIS_HOST127.0.0.1 REDIS_PORT6379 EOF# 5. 配置Nginx和Systemd echo[5/6] 配置Nginx和系统服务...# Systemd服务cat/etc/systemd/system/toutiao-api.serviceEOF [Unit] DescriptionToutiao News API Afternetwork.target mysql.service redis.service [Service] Typesimple Userwww-data WorkingDirectory/opt/toutiao/backend ExecStart/opt/toutiao/backend/venv/bin/uvicorn main:app --host 127.0.0.1 --port 8000 --workers 4 Restartalways [Install] WantedBymulti-user.target EOF# Nginx配置假设前端dist已复制到/opt/toutiao/frontend/distcat/etc/nginx/conf.d/toutiao.confEOF server { listen 80; server_name _; location / { root /opt/toutiao/frontend/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } EOF# 6. 启动服务 echo[6/6] 启动所有服务...systemctl daemon-reload systemctlenabletoutiao-api mysql redis nginx systemctl restart mysql redis nginx toutiao-apiechoechoecho 部署完成echoecho后端API: http://$(hostname-I|awk{print $1})echo请将前端dist目录复制到 /opt/toutiao/frontend/distecho然后配置域名和HTTPSecho四、域名解析配置4.1 DNS添加记录记录类型主机记录记录值说明A你的服务器IP主域名访问Awww你的服务器IPwww子域名CNAMEapi你的主域名API子域名可选4.2 Nginx多域名配置# 主站前端 server { listen 80; server_name your-domain.com www.your-domain.com; location / { root /opt/toutiao/frontend/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8000; # ... 同上 } } # API独立域名可选 server { listen 80; server_name api.your-domain.com; location / { proxy_pass http://127.0.0.1:8000; # ... 同上 } }第二部分项目复盘模板一、项目总结报告完成项目后填写以下模板进行复盘 新闻头条项目 - 学习复盘报告 【基本信息】 项目名称________________ 开始日期________________ 完成日期________________ 总用时________________小时 【技术栈掌握情况】 ┌─────────────────┬────────┬────────┬────────┐ │ 技术点 │ 听说过 │ 用过 │ 掌握 │ ├─────────────────┼────────┼────────┼────────┤ │ Vue 3 │ □ │ □ │ □ │ │ Vite │ □ │ □ │ □ │ │ FastAPI │ □ │ □ │ □ │ │ MySQL │ □ │ □ │ □ │ │ Redis │ □ │ □ │ □ │ │ JWT认证 │ □ │ □ │ □ │ │ RESTful API │ □ │ □ │ □ │ │ Pinia状态管理 │ □ │ □ │ □ │ │ Vue Router │ □ │ □ │ □ │ │ Nginx部署 │ □ │ □ │ □ │ └─────────────────┴────────┴────────┴────────┘ 【最困难的3个问题】 1. 问题________________ 解决方案______________ 学到了什么____________ 2. 问题________________ 解决方案______________ 学到了什么____________ 3. 问题________________ 解决方案______________ 学到了什么____________ 【最有成就感的3个时刻】 1. __________________ 2. __________________ 3. __________________ 【如果重来一次会怎么做】 1. __________________ 2. __________________ 3. __________________ 【下一步学习计划】 短期1个月内________________ 中期3个月内________________ 长期1年内________________ 【其他感想】 _________________________________ _________________________________ _________________________________ 二、常见面试问题准备基于本项目你可能遇到的面试题Vue/Frontend 相关QVue 3的Composition API和Options API有什么区别参考答案要点 - Options API按选项组织data/methods/mounted适合简单组件 - Composition API按功能组织相关代码放一起适合复杂逻辑 - 更好的TypeScript支持 - 更好的逻辑复用Composables - setup语法糖更简洁QPinia和Vuex有什么区别为什么选Pinia参考答案要点 - mutations没了直接修改state - 更好的TypeScript支持 - 支持多个Store - 更轻量打包体积更小 - DevTools支持更好Q什么是SPA如何处理路由参考答案要点 - SPA Single Page Application单页应用 - 只有一个HTML文件通过JS动态渲染内容 - 使用History API控制URL不刷新页面 - Vue Router实现路由映射 - 需要服务端fallback配置try_filesPython/Backend 相关Q什么是RESTful API参考答案要点 - 用HTTP方法表示操作类型GET/POST/PUT/DELETE - 用URL表示资源名词不是动词 - 无状态每个请求包含所有信息 - 统一的响应格式 - 合理的状态码使用QJWT认证的流程是什么参考答案要点 1. 用户登录 → 验证凭据 2. 服务端生成JWTHeader.Payload.Signature 3. 返回Token给客户端 4. 客户端存储TokenlocalStorage 5. 后续请求在Authorization头携带Token 6. 服务端验证Token签名和有效期QSQLAlchemy ORM的优势参考答案要点 - 面向对象操作数据库不用写SQL - 数据库无关换数据库只需改连接字符串 - 自动类型转换 - 关系映射方便 - 迁移工具支持第三部分拔高练习练习1添加搜索功能难度⭐⭐需求描述首页顶部搜索框支持关键词搜索新闻标题搜索结果页展示匹配的新闻记录热门搜索关键词涉及知识点前端搜索组件、防抖处理后端模糊查询LIKE、全文索引数据库索引优化验收标准输入关键词能搜索到相关新闻搜索结果高亮关键词空结果有友好提示防抖处理避免频繁请求练习2实现消息通知系统难度⭐⭐⭐需求描述用户收到系统通知评论、点赞等通知列表页红点提示未读标记已读/全部已读WebSocket实时推送高级涉及知识点数据库通知表设计后端WebSocket或SSE前端实时通信、状态同步可选推送服务极光推送等验收标准评论自己的新闻时收到通知通知列表正确显示未读数量角标显示标记已读功能正常练习3添加图片上传功能难度⭐⭐⭐需求描述发布新闻时可上传封面图编辑资料时可上传头像图片压缩和格式转换对象存储OSS/COS集成涉及知识点前端文件上传组件、图片裁剪后端文件接收、存储存储本地存储/OSS/COS安全文件类型校验、大小限制验收标准能选择并预览图片上传后能正确显示支持常见图片格式jpg/png/gif文件大小限制如最大5MB练习4实现推荐算法难度⭐⭐⭐⭐需求描述首页推荐标签个性化展示基于用户浏览历史推荐热门新闻排行协同过滤推荐高级涉及知识点算法内容推荐、协同过滤数据分析用户行为追踪缓存推荐结果缓存机器学习基础可选验收标准推荐标签下有内容展示不同用户看到不同推荐有热门排行榜推荐结果相对准确练习5实现后台管理系统难度⭐⭐⭐⭐需求描述独立的管理后台PC端用户管理查看/封禁内容审核审核新闻/评论数据统计PV/UV/活跃用户权限管理管理员/运营涉及知识点前端Element Plus/Ant Design Vue后端RBAC权限模型数据可视化ECharts表格排序、筛选、分页、导出验收标准管理员登录独立于普通用户用户列表搜索/封禁新闻管理审核/置顶/推荐数据统计图表展示练习6性能优化专项难度⭐⭐⭐优化清单优化项当前状态目标方法首屏加载~3s1.5s代码分割、懒加载API响应~500ms200msRedis缓存、SQL优化图片大小原始压缩50%WebP格式、CDN打包体积~2MB500KBTree Shaking、压缩LCP指标4s2.5s关键CSS内联、预加载验收标准Lighthouse评分 90首屏加载 2sLCP 2.5s并发支持 100 用户练习7单元测试和E2E测试难度⭐⭐⭐测试覆盖目标层级工具覆盖率目标单元测试pytest / Vitest80%API测试httpx / supertest所有接口E2E测试Playwright / Cypress核心流程必测场景用户注册登录流程新闻CRUD操作收藏/历史功能权限验证未登录访问受保护接口练习8Docker容器化部署难度⭐⭐⭐⭐需求描述编写Dockerfile前端后端docker-compose一键编排多容器编排AppMySQLRedisNginxDocker Compose示例version:3.8services:frontend:build:./frontendports:-80:80depends_on:-backendbackend:build:./backendports:-8000:8000environment:-DB_HOSTmysql-REDIS_HOSTredisdepends_on:-mysql-redismysql:image:mysql:8.0environment:MYSQL_ROOT_PASSWORD:root_passwordMYSQL_DATABASE:toutiaovolumes:-mysql_data:/var/lib/mysqlredis:image:redis:7-alpinevolumes:-redis_data:/datavolumes:mysql_data:redis_data:验收标准docker-compose up -d一键启动全部服务所有功能正常运行数据持久化重启不丢失第四部分学习路线拓展完成本项目后的进阶方向┌─────────────┐ │ 本项目完成 │ └──────┬──────┘ ┌───────────────┼───────────────┐ ▼ ▼ ▼ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ 深化前端 │ │ 深化后端 │ │ DevOps │ └─────┬──────┘ └─────┬──────┘ └─────┬──────┘ │ │ │ ┌─────┴─────┐ ┌─────┴─────┐ ┌─────┴─────┐ ▼ ▼ ▼ ▼ ▼ ▼ TypeScript Node.js Django Docker CI/CD Nuxt3(SSR) NestJS Flask K8s 监控告警 移动端APP 微服务 GraphQL 云原生 性能优化 小程序 消息队列 PostgreSQL 高并发 安全加固推荐学习资源官方文档首选Vue 3https://cn.vuejs.org/FastAPIhttps://fastapi.tiangolo.com/zh/Piniahttps://pinia.vuejs.org/zh/Vanthttps://vant-ui.github.io/在线练习平台LeetCode算法Codewars编程挑战Exercism多语言实践开源项目贡献GitHub Trending找感兴趣的项目从修复文档/翻译开始逐步参与代码贡献技术博客/社区掘金、思否、CSDN中文Dev.to、Medium英文Stack Overflow问答第五部分简历撰写指导项目经历怎么写❌ 错误写法- 做了一个新闻头条项目 - 用Vue和Python写的 - 可以看新闻、登录注册✅ 正确写法STAR法则新闻头条全栈应用 | 独立开发 | 2026.07 - 2026.08 [Situation] 这是一个仿今日头条的移动端资讯应用服务于课程设计作业 [Task] 负责整个项目的前后端架构设计、开发、测试和部署 [Action] - 前端使用 Vue 3 Vite Vant 4 构建移动端界面 实现了12个页面、主题切换、国际化等功能 - 后端基于 FastAPI SQLAlchemy 设计RESTful API 实现了JWT认证、分页查询、Redis缓存等 - 数据库设计了6张表支持用户/新闻/收藏/评论等业务 - 部署使用 Nginx Gunicorn 部署到云服务器配置HTTPS [Result] - 项目完整运行支持注册用户浏览、收藏、评论新闻 - 实现了AI智能问答功能集成OpenAI API - 代码已开源至GitHub获得xx星技术栈展示技术栈 - 前端Vue 3, Vite, Vant 4, Pinia, Vue Router, Axios - 后端FastAPI, SQLAlchemy, Pydantic, JWT - 数据库MySQL, Redis - 工具Git, VS Code全栈通用/ PyCharm后端Python主流IDE, Postman, Chrome DevTools - 部署Nginx, Docker, Linux (Ubuntu)附录常用命令速查Linux服务器运维# 系统信息uname-a# 系统版本free-h# 内存使用df-h# 磁盘使用top# 进程监控按q退出# 文件操作ls-la# 详细列出文件tail-f/var/log/syslog# 实时查看日志greperrorlogfile.log# 搜索日志chmod600.env# 修改文件权限# 服务管理systemctl status nginx# 查看服务状态systemctl restart nginx# 重启服务journalctl-unginx-f# 查看服务日志# 网络诊断curl-Ihttps://example.com# 检查HTTP响应头netstat-tlnp# 查看监听端口pingexample.com# 网络连通性# 数据库mysql-uroot-p# 登录MySQLmysqldump-uroot-pdbbackup.sql# 备份mysql-uroot-pdbbackup.sql# 恢复# Gitgitstatus# 查看状态gitadd.# 暂存所有更改gitcommit-mmsg# 提交gitpush origin main# 推送到远程文档版本v1.0更新日期2026年7月适用项目toutiao_heima 新闻头条全栈项目