WeBlog 部署实战：从 0 到 1 将个人博客部署到云服务器（附演示环境）

WeBlog 部署实战从 0 到 1 将个人博客部署到云服务器附演示环境【免费下载链接】WeBlog Spring Boot Vue 3.2 Vite 4.3 前后端分离个人博客可作为 Java 毕业设计项目~ 感谢点个 Star 呀~项目地址: https://gitcode.com/gh_mirrors/we/WeBlog想拥有一个属于自己的个人博客却又不想从零写代码WeBlog 这款基于 Spring Boot Vue 3.2 的前后端分离博客项目正是为这类需求而生的开源方案。本文是一份完整的个人博客部署到云服务器实战教程手把手带你完成环境准备、数据库初始化、后端打包、前端构建与 Nginx 反向代理配置让博客从 0 到 1 正式上线。文末还附有演示环境方便你先行体验效果。WeBlog 是什么为什么要选它做个人博客部署WeBlog 是一套开箱即用的前后端分离博客系统后端使用 Spring Boot 2.6.3 MyBatis Plus MySQL前端使用 Vue 3.2 Vite 4.3 Element Plus 纯手写搭建没有套用任何 Admin 框架代码结构清晰非常适合作为 Java 毕业设计或个人博客部署项目。它的核心能力包括 支持 Markdown 格式发布与编辑文章内置分类与标签管理 后台仪表盘提供 Echarts 文章发布热力图与 PV 访问量统计 基于 Spring Security JWT 的登录认证体系后台安全有保障⚙️ 支持博客基本信息设置与社交主页跳转 演示环境http://116.62.199.48/ 游客账号test密码test部署前可以先上去体验一下整体功能再动手实操。个人博客部署到云服务器的前置准备在开始之前你需要先准备一台云服务器阿里云、腾讯云等均可2 核 4G 起步即可流畅运行并在安全组中放行80、8081端口。技术栈版本清单与项目保持一致避免踩坑组件推荐版本用途JDK1.8后端运行环境Maven3.6.3后端构建工具MySQL5.7数据存储Node.js18.15.0前端构建环境Nginx1.20静态资源托管与反向代理项目结构整体分为三部分部署时各司其职weblog-springboot后端项目其中weblog-web是启动入口模块默认端口8081weblog-vue3前端项目基于 Vite 构建sql数据库初始化脚本表结构 初始化数据第一步初始化 MySQL 数据库10 分钟搞定首先在云服务器上安装并启动 MySQL 5.7然后新建一个名为weblog的数据库CREATE DATABASE weblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;接着按顺序导入项目根目录sql模块下的两个初始化脚本schema.sql表结构脚本创建文章、分类、标签、用户等数据表data.sql初始化数据脚本包含登录用户、博客基本设置等信息mysql -uroot -p weblog schema.sql mysql -uroot -p weblog data.sql导入完成后你可以用 Navicat 或 DBeaver 连接数据库确认表结构是否完整其中用户表中已内置了演示账号test。第二步获取项目源码并修改后端配置通过 Git 将项目克隆到云服务器或本地打包后再上传git clone https://gitcode.com/gh_mirrors/we/WeBlog后端采用多模块 Maven 工程父工程 pom.xml 统一管理了weblog-module-common通用模块、weblog-module-admin后台管理模块、weblog-module-jwtJWT 认证模块和weblog-web前台启动入口四个子模块且已配置阿里云 Maven 仓库源依赖下载速度很快。修改生产环境数据库配置后端默认激活dev环境部署到云服务器时需要切换为prod环境。打开生产配置文件 application-prod.yaml将数据库连接信息改为你自己的spring: datasource: url: jdbc:mysql://localhost:3306/weblog?useUnicodetruecharacterEncodingUTF-8autoReconnecttrueuseSSLfalse username: root password: 你的数据库密码同时修改 application.yaml 中的spring.profiles.active为prod。可选配置 Minio 对象存储项目使用 Minio 存储文章中的图片。若暂时没有 Minio 服务可以先跳过此配置不影响博客基本功能的部署后续需要时再在 MinioConfig.java 对应的配置项中填入 endpoint、accessKey 等参数即可。第三步打包后端并启动最快配置方法在weblog-springboot目录下执行 Maven 打包命令跳过测试以加快速度mvn clean package -Dmaven.test.skiptrue构建完成后在weblog-web/target/目录下会生成可执行的 jar 包直接启动即可nohup java -jar weblog-web-0.0.1-SNAPSHOT.jar weblog.log 21 启动入口类为 WeblogWebApplication.java。看到日志输出Started WeblogWebApplication后访问http://服务器IP:8081即可验证后端是否正常响应。第四步构建前端并配置 Nginx 反向代理1. 安装依赖并打包进入weblog-vue3目录安装依赖并执行生产构建npm install npm run build构建产物会输出到dist目录。生产环境的前端接口地址通过 .env.production 中的VITE_APP_BASE_API/api控制请求统一走/api前缀。2. 配置 Nginx将dist目录上传到服务器如/usr/share/nginx/html/weblog然后编辑 Nginx 配置将/api请求反向代理到后端8081端口server { listen 80; server_name 你的域名或IP; # 前端静态资源 location / { root /usr/share/nginx/html/weblog; index index.html; try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8081/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } 开发环境下vite.config.js 中已内置了/api到http://localhost:8081的代理配置本地调试无需额外处理生产环境则由 Nginx 完成同样的转发工作。保存配置后执行nginx -s reload重载浏览器访问服务器 IP即可看到博客首页。访问http://服务器IP/admin进入后台使用test/test登录个人博客就正式上线了部署后常见问题排查清单后端启动失败报数据库连接错误检查application-prod.yaml中的 URL、账号密码是否正确确认 MySQL 已启动且weblog库已导入脚本。前端页面能打开但接口报 404多为 Nginx 代理配置问题检查location /api/的proxy_pass是否带尾部斜杠并确认 8081 端口已放行。上传图片失败未配置 Minio 导致按上文第二步配置好 Minio 参数后重启后端即可。刷新页面 404前端使用 vue-router 的 history 模式务必在 Nginx 中添加try_files $uri $uri/ /index.html;配置。结语至此你已经完成了 WeBlog 的个人博客部署到云服务器全流程初始化数据库、打包后端、构建前端、配置 Nginx 反向代理一步到位让博客上线。这套部署思路同样适用于其他 Spring Boot Vue 前后端分离项目掌握了它就等于掌握了一类博客部署的标准打法。如果你在部署过程中遇到问题可以先去演示环境对比功能表现再对照本文的排查清单逐项检查。祝你博客上线顺利早日拥有自己的独立小站【免费下载链接】WeBlog Spring Boot Vue 3.2 Vite 4.3 前后端分离个人博客可作为 Java 毕业设计项目~ 感谢点个 Star 呀~项目地址: https://gitcode.com/gh_mirrors/we/WeBlog创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考