项目概述本文记录一个完整的前后端分离个人博客项目部署流程。后端采用 Spring Boot MyBatis-Plus MySQL 8.0前端为 Vue 3通过 Nginx 反向代理实现生产环境部署。适合有一定编程基础、想从零搭建个人博客的开发者参考。前言拥有一个独立的个人博客既能沉淀技术积累也是面试时的加分项。本文涉及的项目是一套完整的前后端分离博客系统支持 Markdown 编辑、图片粘贴上传、分类标签管理等功能。整个部署流程分为服务器准备 → 环境安装 → 数据库配置 → 后端部署 → 前端构建 → Nginx 代理 → 安全组配置。下面按步骤详细展开。一、服务器选购与系统准备1.1 服务器配置建议对于个人博客这类轻量级应用最低配置即可流畅运行配置项建议说明CPU/内存2核2G支撑 Spring Boot MySQL Nginx 足够带宽3Mbps个人博客访问量不大3M 完全够用系统盘40GB SSD代码 数据库 图片备份操作系统Ubuntu 22.04 LTS社区支持好文档丰富成本优化建议如果是新用户阿里云轻量应用服务器目前有特惠活动2核2G3M 配置低至 38 元/年很适合个人开发者练手和小型项目部署。有需求的朋友可以通过官方活动页面了解详情https://www.aliyun.com/minisite/goods?userCodeiakscw7s建议先登录找到服务器购买位置再定个闹钟每天9:55,14:55提前5分钟进去准备狂点不然可能抢不到。1.2 连接服务器购买完成后在阿里云控制台重置实例密码然后通过 SSH 连接sshroot你的公网IP首次登录建议更新系统sudoaptupdatesudoaptupgrade-y二、基础环境安装按顺序安装 JDK、Maven、Node.js、MySQL 和 Nginx。2.1 JDK 17sudoaptinstallopenjdk-17-jdk-yjava-version2.2 Mavensudoaptinstallmaven-ymvn-v2.3 Node.js 20.x重要注意必须使用 Node.js 2018.x 版本在构建时会出现兼容性问题。curl-fsSLhttps://deb.nodesource.com/setup_20.x|sudo-Ebash-sudoaptinstallnodejs-ynode-v# 确认输出 v20.x.xnpm-v2.4 MySQL 8.0sudoaptinstallmysql-server-ysudosystemctl start mysqlsudosystemctlenablemysqlsudosystemctl status mysql# 确认状态为 active2.5 Nginxsudoaptinstallnginx-ysudosystemctl start nginx三、MySQL 配置易踩坑环节Ubuntu 下 MySQL 8.0 的root用户默认使用auth_socket认证插件这会导致后端 JDBC 连接时频繁报错。建议创建独立的数据库用户避免使用 root。3.1 创建数据库与用户sudomysql-uroot在 MySQL 命令行中执行CREATEDATABASEIFNOTEXISTSpersonal_blogCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ci;CREATEUSERbloglocalhostIDENTIFIEDWITHmysql_native_passwordBYblog123456;GRANTALLPRIVILEGESONpersonal_blog.*TObloglocalhost;FLUSHPRIVILEGES;EXIT;3.2 验证连接mysql-ublog -pblog123456-eUSE personal_blog; SELECT 1;返回1即表示数据库和用户配置正确。这一步务必通过后再往下进行否则后端启动时会报CannotGetJdbcConnectionException。3.3 导入初始化数据将项目中的init.sql上传到服务器执行mysql-ublog -pblog123456init.sql验证表结构mysql-ublog -pblog123456-eUSE personal_blog; SHOW TABLES;正常应输出blog和user两张表。四、项目上传与目录结构在/opt下创建项目目录mkdir-p/opt/projectscd/opt/projects# 上传项目压缩包后解压unzippersonal-blog.zipcdpersonal-blog预期目录结构如下/opt/projects/personal-blog/ ├── blog-server/ # Spring Boot 后端 │ ├── src/ │ ├── target/ │ └── uploads/ # 图片上传目录需手动创建 ├── blog-web/ # Vue3 前端 │ └── dist/ # 构建产物目录 ├── init.sql # 数据库初始化脚本 └── ...五、后端部署与配置5.1 修改数据库配置cd/opt/projects/personal-blog/blog-servervimsrc/main/resources/application.yml关键配置项如下务必根据实际情况修改server:port:8080spring:datasource:url:jdbc:mysql://localhost:3306/personal_blog?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrueusername:blog# 第3步创建的专用用户password:blog123456# 密码用单引号包裹防止特殊字符解析错误driver-class-name:com.mysql.cj.jdbc.Driverhikari:maximum-pool-size:20minimum-idle:5connection-timeout:30000mybatis-plus:configuration:log-impl:org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case:truejwt:secret:your-256-bit-secret-key-for-jwt-signing-must-be-at-least-32-characters-longexpiration:604800000upload:path:/opt/projects/personal-blog/blog-server/uploads/max-size:10485760配置要点说明allowPublicKeyRetrievaltrueMySQL 8.0 必须加否则连接失败password加单引号如果密码包含#等特殊字符YAML 解析会出错upload.path使用绝对路径确保图片上传后 Nginx 能正确定位5.2 编译打包cd/opt/projects/personal-blog/blog-server mvn clean package-DskipTests-q打包完成后会在target/目录下生成blog-server-1.0.0.jar。5.3 创建上传目录mkdir-p/opt/projects/personal-blog/blog-server/uploads/chmod755/opt/projects/personal-blog/blog-server/uploads/5.4 启动后端测试阶段建议前台启动便于观察日志java-jartarget/blog-server-1.0.0.jar看到Started PersonalBlogApplication且无报错后CtrlC停止改为后台运行nohupjava-jartarget/blog-server-1.0.0.jar/opt/projects/personal-blog/blog.log215.5 验证后端接口curlhttp://localhost:8080/api/blog/list返回如下 JSON 即表示后端运行正常{code:200,message:success,data:{total:0,pages:0,current:1,size:10,records:[]}}六、前端构建6.1 安装依赖并构建cd/opt/projects/personal-blog/blog-webnpminstallnpmrun build构建完成后会生成dist/目录里面是可用于生产环境的静态文件。6.2 确认构建产物ls-la/opt/projects/personal-blog/blog-web/dist/应包含index.html和assets/等文件。七、Nginx 配置核心环节Nginx 在这里承担三个职责托管前端静态资源、反向代理后端 API、提供图片访问入口。7.1 创建站点配置文件sudotee/etc/nginx/sites-available/blogEOF server { listen 80; server_name _; # 如有域名此处替换为你的域名 # 前端静态资源 location / { root /opt/projects/personal-blog/blog-web/dist; index index.html; try_files $uri $uri/ /index.html; } # 图片上传目录必须配置否则博客图片无法加载 location /uploads/ { alias /opt/projects/personal-blog/blog-server/uploads/; expires 30d; add_header Cache-Control public, immutable; } # 后端 API 代理注意 proxy_pass 末尾的 /api/ 不可省略 location /api/ { proxy_pass http://localhost:8080/api/; 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配置要点说明配置段作用常见错误location /托管 Vue 打包后的静态文件try_files不加会导致刷新 404location /uploads/直接映射图片目录到 URL不配置会导致博客图片无法展示location /api/将前端请求转发到 8080 端口proxy_pass末尾缺少/api/会导致接口 4047.2 启用配置# 删除默认站点避免冲突sudorm-f/etc/nginx/sites-enabled/default# 启用博客站点sudoln-sf/etc/nginx/sites-available/blog /etc/nginx/sites-enabled/blog# 检查配置语法并重启sudonginx-tsudosystemctl restart nginx7.3 验证 Nginx 代理# 验证 API 代理是否正常curlhttp://localhost/api/blog/list# 验证图片路径是否可访问curl-Ihttp://localhost/uploads/八、安全组与防火墙配置8.1 云服务器安全组必须登录阿里云控制台 → ECS → 安全组 → 配置规则添加以下入方向规则类型端口源地址说明HTTP800.0.0.0/0网站访问HTTPS4430.0.0.0/0后续配置 SSL 使用自定义TCP8080127.0.0.1/32仅本机访问后端可选8.2 服务器本地防火墙sudoufw allow80/tcpsudoufw allow443/tcpsudoufw reload九、访问与验证完成以上步骤后通过浏览器访问地址说明http://你的公网IP博客首页http://你的公网IP/login管理后台登录页默认管理员账号用户名admin密码admin123建议登录后立即修改默认密码。十、域名与备案可选进阶如果希望使用域名访问如www.yourblog.com需要购买域名在阿里云万网或其他域名服务商注册域名解析添加 A 记录指向你的 ECS 公网 IPICP 备案中国内地服务器必须备案流程约 7-20 个工作日配置 HTTPS在阿里云申请免费 SSL 证书配置 Nginx 443 端口备案期间网站需关闭访问或显示备案中页面建议提前规划。十一、常见问题汇总Q1后端启动报错CannotGetJdbcConnectionException按以下顺序排查sudo systemctl status mysql确认 MySQL 运行中mysql -u blog -p密码 -e SELECT 1;确认用户密码正确检查application.yml中密码是否加了单引号确认 JDBC URL 包含allowPublicKeyRetrievaltrue确认使用的是blog用户而非rootQ2登录或调用接口返回 404检查 Nginx 配置中proxy_pass http://localhost:8080/api/;末尾是否遗漏了/api/。Q3博客中上传的图片无法显示确认application.yml中upload.path是绝对路径确认 Nginx 中有location /uploads/配置段确认alias路径末尾有/执行sudo systemctl restart nginxQ4前端构建报错EBADENGINENode.js 版本过低必须升级到 20.x。Q5Vue 路由刷新后 404Nginx 的location /中缺少try_files $uri $uri/ /index.html;。十二、运维常用命令# 实时查看后端日志tail-f/opt/projects/personal-blog/blog.log# 重启后端服务pkill-fblog-servercd/opt/projects/personal-blog/blog-servernohupjava-jartarget/blog-server-1.0.0.jar/opt/projects/personal-blog/blog.log21# 重启 Nginxsudosystemctl restart nginx# 查看端口占用ss-tlnp|grep-E80|8080# 查看 Nginx 错误日志sudotail-n20/var/log/nginx/error.log总结整个部署流程的核心在于环境版本匹配Node 20、MySQL 8.0 专用用户和Nginx 代理路径的正确配置。只要按照文档中的顺序操作大部分问题都可以避免。对于想尝试独立部署全栈项目的朋友这套博客系统是一个很好的练手项目。服务器成本方面新用户选择阿里云的活动机型一年几十元的投入即可获得完整的 Linux 服务器环境性价比很高。如果在部署过程中遇到其他问题欢迎在评论区交流。