NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录

温馨提示：这篇文章已超过382天没有更新，请注意相关的内容是否还可用！

摘要：本篇文章记录了个人博客NBlog的部署维护过程，包括后端使用Spring Boot框架和前端采用Vue框架的技术细节。文章详细介绍了如何搭建后端服务、配置数据库、处理用户认证和权限等核心功能，以及前端界面的开发、数据交互和性能优化等方面。整体流程简洁明了，对于开发者来说具有很高的实用性和参考价值。

项目是fork的Naccl大佬NBlog项目，页面做的相当漂亮，所以选择了这个。可以参考2.3的效果图

惭愧，工作两年了也没个自己的博客系统，趁着过年时间，开始搭建一下.

NBlog原项目的github链接：Naccl/NBlog: 🍓 Spring Boot + Vue 前后端分离博客系统 https://naccl.top (github.com)

非常建议自己去部署一个来维护，之前尝试csdn、github做笔记，但是效果都不好，不如一个可以自己完全控制的博客让人舒心。

目前项目进度：

1.IP端口部署（完成，可以通过IP+端口访问服务）

2.域名访问（完成，域名访问即可）

3.OSS图库整合（完成，已经加入了对OSS的支持）

4.MySQL定时备份（完成）

5.引入接口文档（完成）

6.功能熟悉及完善（进行中，对于不熟悉的功能实现进行学习，对于需要扩展的功能进行修改等）

可以访问下面的链接查看效果：

项目前端主页

项目接口文档

个人Fork的代码放这里了，慢慢改：https://github.com/Chaobk/CBlog

更新记录

2024-05-18 引入接口文档Knife4j，可在 https://api.chaobk.com/doc.html 查看
2024-03-31 完善MySQL定时备份功能
2024-03-17 补充MySQL定时备份
2024-03-10 完成整合OSS图库。（下一个流程更新MySQL的定时备份，防止数据丢失）
2024-03-03 接入QQ邮箱。（略忙，没啥变更，下周更新OSS上传）
2024-02-24 调整前端的nginx部署，解决刷新页面404问题。现在的前端仅上传dist文件夹即可。

美图镇楼

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第1张

一、本地初步尝试

clone项目到本地，名字和配置都改一改。注意不要全局替换，因为有一些图片的链接也会包含在内。

繁杂工作，就不记录了。

另外项目里使用了redis与mysql，需要准备一下这两个软件。

本地运行足够使用了，不过这里我选择使用服务器上的，因为部署到服务器也是需要准备这两个组件的。详细步骤下一章节写。

二、前后端部署

1.服务器环境准备

既然要部署自己的博客，那么需要准备一台服务器环境。

这里我选择的是观星云（国内领先的云服务器、高防服务器、香港服务器云计算服务商！上云就上观星云！ - - 观星云 (guanxingyun.com)）的服务器，4核8G，一年五百，定了三年。有条件建议使用阿里云或者腾讯云，观星云的只是便宜，但是稳定性不行，有遇到过整个机房停电，导致服务器挂掉的情况。

服务器内存还是建议4G起步，2G实在干不了啥东西。

准备下docker环境，使用docker安装配置软件太方便了。

1.1 配置Docker

Linux安装配置Docker，详细可以参考这篇文章：Linux安装Docker完整教程-腾讯云开发者社区-腾讯云 (tencent.com)

安装成功后可以使用docker -v检查是否安装成功。

1.2 安装并启动mysql

使用Docker安装mysql，详细可以参考这篇文章：Docker 上安装、启动 MySQL （图解）-腾讯云开发者社区-腾讯云 (tencent.com)。注意使用的mysql版本，不指定的话默认是最新的。

启动后，使用本地数据库客户端检查下是否可以使用，显示连接成功即完成。

1.3 安装并启动redis

类似于Mysql，也是先搜索可用版本，然后选择指定的版本进行安装，不指定默认最新。详细流程可以参考这篇文章：最详细的docker中安装并配置redis-腾讯云开发者社区-腾讯云 (tencent.com)

启动后使用本地客户端尝试连接，这里使用的软件是Another Redis Desktop Manager，可以连接即完成。

1.4 准备Java8环境

由于我们的项目是Java8版本，所以这里使用Java8的环境。

安装配置参考这篇文章即可：Linux安装JDK并配置环境变量 - 详细步骤-腾讯云开发者社区-腾讯云 (tencent.com)

配置好环境变量，使用java -version显示版本说明成功。

1.5 准备Nodejs环境

选择合适的版本进行安装，建议选择和本地一样的，避免出环境问题。

详细流程可以参考这篇文章：Linux下Nodejs安装（最新版）-腾讯云开发者社区-腾讯云 (tencent.com)

服务器运行node -v以及npm -v来验证是否成功。

2.准备部署资源

2.1 后端部署

既然要部署在服务器上，环境信息是要改的。

服务的ip和端口需要配置成服务器的，域名或者ip都行，前后端统一。

目前还没有配置域名，我就先写死成了IP地址+端口，域名之后搞。

# 后端服务URL
blog.api=http://185.242.235.202:${server.port}
# 后台管理URL https://admin.naccl.top
blog.cms=http://185.242.235.202:8080
# 前台界面URL https://naccl.top
blog.view=http://185.242.235.202:8079

修改一下redis、mysql的配置信息，如果代码使用git进行管理，请一定注意不要把服务器上的数据库密码暴露出去，容易被攻击，别问我怎么知道的，求方便的话，直接在blog-api的.gitignore中添加配置文件的忽略项，即：

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第2张

/src/main/resources/application-dev.properties

另外配置信息中还有个评论里的QQ头像保存方式，也请注意修改，就是下面的这几个。（我使用的OSS图床，后续更新代码和配置，Github太慢了）

# 评论中QQ头像存储方式: 本地:local GitHub:github 又拍云:upyun
upload.channel=local
# 静态文件上传访问路径 Windows环境例如: C:/Users/cblog/Desktop/upload/ Linux环境例如：/home/cblog/upload/
upload.file.path=/home/cblog/upload/
upload.file.access-path=/image/**
upload.file.resources-locations=file:${upload.file.path}

之后上传到服务器运行即可，我这里是放在了/home/CBlog/api下面

[root@ser723958765859 CBlog]# ls
api  cms  view
[root@ser723958765859 CBlog]# pwd
/home/CBlog

上传后直接后台启动即可。

[root@ser723958765859 api]# pwd
/home/CBlog/api
[root@ser723958765859 api]# ls
blog-api-0.0.1.jar 
[root@ser723958765859 api]# nohup java -jar blog-api-0.0.1.jar &

2.2 前端部署

（后续使用nginx部署会有调整，此章节可略过）

首先根据项目的README.md文档，先把/blog-view/src/plugins/axios.js和/blog-cms/src/util/request.js中的baseUrl修改为后端 API 地址。

然后前端直接使用npm run build生成dist包，然后制作一个server.js文件，用来配置启动信息。注意和后端配置相统一。

例如，我个人的配置的如下：

blog-cms，8079端口

const express = require('express');
const app = express();
app.use(express.static('./dist'));
//运行时的端口，可以自己自定义
const port = 8079;
app.listen(port, function (err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('Listening at http://localhost:' + port + '\n');
});

blog-view，8080端口

const express = require('express');
const app = express();
app.use(express.static('./dist'));
//运行时的端口，可以自己自定义
const port = 8080;
app.listen(port, function (err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('Listening at http://localhost:' + port + '\n');
});

部署资源准备好后，把dist、node-modules、server.js打包上传到服务器的目录下。

以view为例，上传后解压，直接后台启动即可：

（使用nohup不知道为什么退出终端就失效了，改用了disown）

[root@ser723958765859 view]# pwd
/home/CBlog/view
[root@ser723958765859 view]# ls
dist  node_modules  server.js
[root@ser723958765859 view]# node server.js & disown

前端部署完成

2.3 部署测试

启动后直接本地通过ip+端口尝试访问下是否成功。

例如下图，首页显示，前端部署成功。

分类点过去有一篇文章显示，后端部署成功。（测试数据）

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第3张

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第4张

基本部署流程结束，现在就有了一个好看的个人博客了~

现在好多东西都是用的原来的，只替换了名字和图片，之后逐步改了。

3.开启域名访问

3.1 域名购买

直接网络搜索域名即可购买，我这里选择的阿里云。

登录后直接搜索域名，进入域名注册页面，输入自己预购入的域名即可。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第5张

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第6张

选择后直接购买即可，不需要购买其他服务。注册的时候需要选择信息模板，根据提示创建即可。

3.2 DNS解析

域名购买完成后，进入控制台，看到域名点过去即可。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第7张

进入域名，点击解析。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第8张

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第9张

按照类似右边的配置即可，因为已经配过了，所以左边是有记录的。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第10张

按需配置，我这里配置了www以及@的解析，两者的含义在主机记录有显示：

主机记录就是域名前缀，常见用法有：
www：解析后的域名为www.aliyun.com。
@：直接解析主域名 aliyun.com。
*：泛解析，匹配其他所有域名 *.aliyun.com。
mail：将域名解析为mail.aliyun.com，通常用于解析邮箱服务器。
二级域名：如：abc.aliyun.com，填写abc。
手机网站：如：m.aliyun.com，填写m。
显性URL：不支持泛解析（泛解析：将所有子域名解析到同一地址）

配置完成后，本地打开cmd，通过ping命令测试一下：

C:\Users\xxx>ping www.chaobk.com
正在 Ping www.chaobk.com [185.242.235.202] 具有 32 字节的数据:
来自 185.242.235.202 的回复: 字节=32 时间=17ms TTL=48
来自 185.242.235.202 的回复: 字节=32 时间=17ms TTL=48
来自 185.242.235.202 的回复: 字节=32 时间=16ms TTL=48
来自 185.242.235.202 的回复: 字节=32 时间=17ms TTL=48

显示了解析后的IP，域名解析配置成功。

3.3 证书申请

不用备案，我们直接用免费三个月的就行，也就更新证书稍微麻烦一点，详细步骤可以参考官方的：2022阿里云免费SSL证书申请全过程（图文详解）-阿里云开发者社区 (aliyun.com)

3.4 下载证书到服务器

进入SSL证书控制台，找到对应的域名下载。我这里分别为前台页面、管理台页面、后端服务（后端服务调用也需要https调用）申请了证书，这里展示www.chaobk.com。

我这里使用的是nginx，所以选取nginx证书进行下载。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第11张

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第12张

下载后是个压缩包，上传到服务器。

解压后是两个文件，分别是.pem和.key，把这两个证书放到nginx容器里的某个位置进行管理（如果使用了目录映射的话，放到宿主机对应的目录即可；如果没有使用目录映射，可以通过docker cp命令放到容器里面，建议配置映射更方便）。

例如：

docker cp ./xxx.pem nginx:/etc/nginx/cert/cblog

这是把当前目录下的pem文件复制到nginx实例cblog目录下。nginx是容器运行的实例名，/etc/nginx是nginx文件所在目录，如果cert/blog目录不存在，记得先创建这个目录，可以进入到容器里面去创建这个目录，有目录后再复制过去。

以下命令可以进入到容易里面：

docker exec -it nginx /bin/bash

证书放置完后，就可以配置nginx转发了。

3.5 配置Ngnix转发

我这里直接在nginx的配置目录conf.d新建了一个cblog.conf文件，内容如下：

#定义一个HTTP服务组
upstream cblog {
    #定义HTTP地址，负载均衡配置为加权轮询，weight：权重，默认为1， weight越大，负载的权重就越大
    server 185.242.235.202:8080 weight=1;
}
server {
    #HTTPS的默认访问端口443。
    listen 443 ssl;
    #填写证书绑定的域名
    server_name www.chaobk.com chaobk.com;
    #填写证书文件绝对路径
    ssl_certificate /etc/nginx/cert/cblog/www.chaobk.com.pem;
    #填写证书私钥文件绝对路径
    ssl_certificate_key /etc/nginx/cert/cblog/www.chaobk.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
    #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    #表示优先使用服务端加密套件。默认开启
    ssl_prefer_server_ciphers on;
    location / {
        #通过代理将请求发送给upstream命名的HTTP服务
        proxy_pass http://cblog;
    }
}

这里的证书记得对应上一步证书存放的位置，位置指的是容器内部证书的位置。

配置完成后重启nginx，本地尝试通过域名访问。

NBlog个人博客部署维护过程记录 -- 后端springboot + 前端vue，NBlog个人博客后端Springboot与前端Vue部署维护过程实录第13张

后端配置成功。

前端配置略有调整，之前是上传了dist、server.js、node-modules，三个文件或目录，实际上只需要一个dist即可。

然后把dist放到nginx实例中的某个目录下，然后在nginx进行配置：

server {
    #HTTPS的默认访问端口443。
   listen 443 ssl;
    #填写证书绑定的域名
    server_name admin.chaobk.com;
    #填写证书文件绝对路径
    ssl_certificate /etc/nginx/cert/admin.cblog/admin.chaobk.com.pem;
    #填写证书私钥文件绝对路径
    ssl_certificate_key /etc/nginx/cert/admin.cblog/admin.chaobk.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
    #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    #表示优先使用服务端加密套件。默认开启
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/share/nginx/html/CBlog/cms/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

注意root这个目录说的是容器里面的目录，不要和宿主机目录搞混了。

配置完后重启

3.6 服务代码重新部署

修改成域名部署后，之前写死的IP地址也需要更改，否则，页面功能其实是不可用的，只是域名转发正常。

把后端的配置文件，前端的request.js、axios.js等该修改的都改了。

改完后重新部署到服务器。

三、功能完善及扩展（待更新）

下一步，对于不熟悉的功能实现进行学习，对于需要扩展的功能，有很多想法想试试，例如看板娘、数据备份、简化部署（现在每次都要手动上传包麻烦死了）、评论功能优化（已经评论过的账号，换头像的话不会更新）等等，过程会继续记录。

1.邮箱接入

改一改配置即可，授权码的生成可以参考官方指导：帮助系统 (qq.com)

开启SMTP，然后配置授权码，即可接收邮件。

spring.mail.properties.mail.smtp.socketFactory.port=465
spring.mail.properties.mail.smtp.ssl.enable=true
spring.mail.host=smtp.qq.com
spring.mail.port=465
spring.mail.username=1004945427@qq.com
spring.mail.password=授权码

2.整合OSS图库

代码挺杂，新开了个博客记录：

https://blog.csdn.net/qq_43349112/article/details/136606740

3.加入MySQL定时备份任务

https://blog.csdn.net/qq_43349112/article/details/136785537

X.问题记录

1 部署的页面刷新后报错 cannot xxx xxx

参考文章：Vue项目部署到Nginx后刷新404或者500错误的解决方案

刷新后访问路径未受到路由管理，调整了前端部署方式。

现前端仅上传dist文件夹到nginx内部，并配置nginx的conf文件：

server {
    #HTTPS的默认访问端口443。
   listen 443 ssl;
    #填写证书绑定的域名
    server_name admin.chaobk.com;
    #填写证书文件绝对路径
    ssl_certificate /etc/nginx/cert/admin.cblog/admin.chaobk.com.pem;
    #填写证书私钥文件绝对路径
    ssl_certificate_key /etc/nginx/cert/admin.cblog/admin.chaobk.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
    #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    #表示优先使用服务端加密套件。默认开启
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/share/nginx/html/CBlog/cms/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
        #proxy_pass http://cblog;
    }
}