跳到主要内容

4、更新日志

版权声明

注意

本着开源共享、共同学习的精神:

本文是记录了 博主Ruyu 开源项目:《Ruyu-Blog 》https://gitee.com/kuailemao/ruyu-blog 部署&使用过程得一些细节,转载无需和我联系,但请注明文章来源。如果侵权之处,请联系博主进行删除,谢谢~

强烈推荐:

博主Ruyu

Ruyu-Blog开源博客gitee地址:https://gitee.com/kuailemao/ruyu-blog

Ruyu-Blog开源博客网站地址:https://www.kuailemao.xyz/

image-20240804154704039

image-20240804154737946

更新日志

http://kuailemao.xyz/article/46

image-20240724033127056

作者gitee仓库:

https://gitee.com/kuailemao/ruyu-blog

image-20240731215955426

2023.9.5(更新成功)

更新log

image-20240905195824113

2024.9.3

image-20240905195936752

@全体成员 项目更新日志,v1.4.4已发布: 本次更新: 1.新增前台Banner管理 2.调整文件上传默认格式与大小限制 3.优化后台前端 4.跳转前台前端 5.调整其他代码 gitee&github均已提交新版本 在线文档:https://kuailemao.xyz/article/46 在线站点:http://docs.kuailemao.xyz/ 完整版本更新日志:https://gitee.com/kuailemao/ruyu-blog/compare/v1.4.3...v1.4.4

09.5

image-20240905200856561

更新方法

##拉取最新代码
cd /root/ruyu-blog-latest-code/ruyu-blog
git pull


##拷贝最新代码
cd /root
mkdir -p /root/ruyu-blog-latest-0905/
cp -a /root/ruyu-blog-latest-code/ruyu-blog /root/ruyu-blog-latest-0905/
cd /root/ruyu-blog-latest-0905/ruyu-blog/

##最新是
#lrwxrwxrwx 1 root root 32 Aug 24 15:57 ruyu-blog -> /root/ruyu-blog-latest/ruyu-blog
cd ~
ln -sfn /root/ruyu-blog-latest-0905/ruyu-blog ruyu-blog
ll -t



##第2步:覆盖3个核心配置文件#################################################################################################
rm -rf /root/ruyu-blog/blog-backend/src/main/resources/application.yml
cp /root/ruyu-blog-latest/ruyu-blog/blog-backend/src/main/resources/application.yml /root/ruyu-blog/blog-backend/src/main/resources/

rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/default.conf
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-blog/default.conf /root/ruyu-blog/blog-frontend/kuailemao-blog


rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/default.conf
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-admin/default.conf /root/ruyu-blog/blog-frontend/kuailemao-admin

#vim /root/ruyu-blog/blog-backend/src/main/resources/application.yml
#.env
#检查下对不对

rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.development
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.production
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-blog/.env.development /root/ruyu-blog/blog-frontend/kuailemao-blog
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-blog/.env.production /root/ruyu-blog/blog-frontend/kuailemao-blog


rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/.env.development
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/.env.production
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-admin/.env.development /root/ruyu-blog/blog-frontend/kuailemao-admin
cp /root/ruyu-blog-latest/ruyu-blog/blog-frontend/kuailemao-admin/.env.production /root/ruyu-blog/blog-frontend/kuailemao-admin




##第3步:构建镜像#######################################################################################################
#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
##这里记得做好原作者Dockerfile里target/的补充
docker build . -t ruyu-blog-hd-latest-v1-2024.9.5
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-latest-v1-2024.9.5
docker ps
##



#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-latest-v1-2024.9.5
docker run --name blog-qt -d -p 80:80 blog-qt-latest-v1-2024.9.5
docker ps
##


#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-admin/
rm -rf dist
pnpm install
pnpm uninstall husky
pnpm install husky
pnpm build

#删除老容器和老镜像
docker rm -f blog-ht
#docker rmi -f blog-ht

#构建新镜像和启动新容器
docker build . -t blog-ht-latest-v1-2024.9.5
docker run --name blog-ht -d -p 81:81 blog-ht-latest-v1-2024.9.5
docker ps
##

注意事项

利用最新版代码进行大版本更新,其他配置文件保持不变;

需要导入blog-banners.sql文件;

mysql -uroot -p123456 blog < /root/blog-banners.sql 
重启mysql

特别注意:需要手动在后台添加权限,不然无法设置轮播图;

image-20240908084841601

png转webp格式的网站:

https://www.freeconvert.com/zh/webp-converter

存在的问题

后台图片显示大小为0.3M

image-20240905200141030

03979c3cd47e012c5c16c4cd7e12947b

image-20240905200302467

582e99b564d18427343a5e3dbea1a0fb

image-20240905200339661

image-20240905200355776

image-20240905200422889

image-20240905200454730

https://convertio.co/zh/

image-20240905200524198

image-20240905200602874

修改方法
注意

自己本次只记录方法,不进行验证

配置来源:

https://hydoc.netlify.app/docs/Ruyu-Upload-file-size

image-20240908085918965

1.更新日志

更新日志

V1.4.4版本更新日志:

  • 1.新增前台Banner管理
  • 2.调整文件上传默认格式与大小限制
  • 3.优化后台前端
  • 4.跳转前台前端
  • 5.调整其他代码
  • 6.vite-plugin-imagemin依赖下载有问题,去除图片压缩
  • 7.vite-plugin-imagemin依赖下载有问题,去除图片压缩
  • 8.修复生产与开发环境时间不一致问题
  • 9.修复评论删除时与点赞的联动删除问题
  • 10.修复留言删除时与点赞收藏评论的联动删除问题
  • 11.修复后台评论跳转按钮问题
  • 12.优化评论的显示顺序
  • 13.优化其他代码
  • 14.修复后台登录无法跳转问题

ps:优化了加载速度,亲测无缓存首页加载最快3.5s,平均4s

完整的更新日志: https://gitee.com/kuailemao/ruyu-blog/compare/v1.4.3...v1.4.4

2.背景

背景

最近,Ruyu-Blog 作者发布了 V1.4.4 版本更新,该版本对文件上传功能进行了严格的限制,将上传文件的最大大小限制设定为 0.3MB。这个限制对于需要上传较大图片或文件的用户来说是个不小的困扰,比如在上传站长头像、背景图或其他多媒体资源时,往往无法满足实际需求。为了解决这个问题,我编写了一个详细的教程,帮助大家解除这个文件大小限制,通过简单的配置修改,让博客的文件上传不再受到 0.3MB 的束缚,从而自由上传更大尺寸的文件,提升用户体验并满足更多的实际使用场景。希望这个教程能够帮助到需要的朋友们,让大家能够更加灵活地管理博客资源。

3.缺点

  • 解除文件上传大小限制的做法虽然解决了上传较大文件的问题,但也带来了一些潜在的缺点和风险

缺点

  • 性能问题: 上传更大的文件可能会导致服务器负载增加,特别是在带宽或服务器资源有限的情况下,可能会影响网站的加载速度和响应时间,从而降低用户体验。
  • 存储成本增加: 上传更大尺寸的文件会占用更多的存储空间,这可能会导致服务器存储成本的增加,尤其是对使用云存储服务的用户。
  • 安全风险: 放宽上传限制可能会增加恶意文件上传的风险,可能会有不安全的文件格式或超大文件被上传,从而造成安全隐患。
  • 页面加载速度: 较大的图片或文件会影响页面的加载速度,特别是对于移动端用户或网络环境较差的用户,可能导致页面加载时间变长,影响网站的整体性能。
  • 用户体验不一致: 上传大文件可能导致不同用户设备之间的体验差异,一些低配置或老旧设备在处理大文件时可能会出现卡顿或崩溃的问题。
  • 带宽消耗增加: 较大的文件会消耗更多的带宽,特别是在高流量的网站上,这可能会导致带宽成本的增加,同时也可能引发带宽超限的问题。

这些缺点需要在解除上传限制时予以考虑,最好能结合具体需求,通过优化图片压缩、调整服务器配置等方式,尽量减小对性能和安全的影响,需权衡资源、性能和安全方面的影响

4.后端限制

blog-backend/src/main/java/xyz/kuailemao/enums/UploadEnum.java

下图的5.0修改您自定义的图片文件上传大小

public enum UploadEnum {

// 站长头像
WEBSITE_INFO_AVATAR("websiteInfo/avatar/", "站长头像", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 0.5),
// 站长背景
WEBSITE_INFO_BACKGROUND("websiteInfo/background/", "站长背景", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 1.0),
// 文章封面
ARTICLE_COVER("article/articleCover/", "文章封面", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 3.0),
// 文章图片
ARTICLE_IMAGE("article/articleImage/", "文章图片", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.GIF, ImageConst.WEBP), 3.0),
// 用户头像
USER_AVATAR("user/avatar/", "用户头像", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 0.5),
// 前台首页Banners图片
UI_BANNERS("banners/", "前台首页Banners图片", List.of(ImageConst.JPG, ImageConst.JPEG, ImageConst.PNG, ImageConst.WEBP), 1.0);


// 上传目录
private final String dir;

// 描述
private final String description;

// 支持的格式
private final List<String> format;

// 文件最大大小 单位:MB
private final Double limitSize;
}

5.前端限制

blog-frontend\kuailemao-admin\src\pages\blog\info\stationmaster-info\index.vue
function beforeUpload(file: UploadProps['fileList'][number]) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp'
if (!isJpgOrPng)
message.error('文件格式必须是jpg或png或webp')

#后面的数字2就是您定义的大小
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M)
message.error('图片必须小于 2MB')

return isJpgOrPng && isLt2M

6.重新运行后端

停止井重新运行BlogBackendApplication',也就是application-dev.yml文件

7.上传验证

admin角色用户应该具备后台添加背景图功能

image-20240908085208086

后台背景图片数量限制为5个

image-20240908085257299

420b037f177da445a6da35b78292b304

修改方法
注意

自己本次只记录方法,不进行验证

image-20240908085333242

image-20240908085359354

blog-frontend\kuailemao-blog\src\views\Home\Main

image-20240908090713002

后台背景图只能一张张上传

image-20240908085434983

2024.8.23

image-20240824154656093

@全体成员 项目更新日志:

更新内容

1.修复生产与开发环境时间不一致问题 2.修复评论删除时与点赞的联动删除问题 3.修复留言删除时与点赞收藏评论的联动删除问题 4.修复后台评论跳转按钮问题 5.优化评论的显示顺序 6.优化其他代码 gitee & github已提交 在线更新日志地址:https://kuailemao.xyz/article/46 gitee提交地址:https://gitee.com/kuailemao/ruyu-blog/commits/master

image-20240824154717503


image-20240824160012305

image-20240824160039604

url: jdbc:mysql://[数据库IP]:[数据库端口]/blog?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Hong_Kong

image-20240824160154894

2024.8.19-

更新log

image-20240819203008044

完整的更新日志: https://gitee.com/kuailemao/ruyu-blog/compare/v1.4.2...v1.4.3

最后提交信息为: 优化首页加载

image-20240819203312709

image-20240819203408852

没有.env文件发生变化:

image-20240819203604413

重新部署

重新构建后端/前端:

但是保持.env不变。

已做好快照

image-20240819203735039

开始升级

备份好原来的文件--> 创建本次新的release ln

image-20240819204426154

image-20240819203952502

ln -sfn /root/ruyu-blog-release/ruyu-blog-v1.4.3 ruyu-blog
ll -t

image-20240819204135752

拷贝核心文件过去

大版本覆盖更新

##第1步:下载最新release代码并做好软连接ln##############################################################################
cd ~
cd ruyu-blog-release

#手动拉取代码,gitee需要手动下载,wget下载会失败的
#上传最新代码
# wget https://gitee.com/kuailemao/ruyu-blog/archive/refs/tags/v1.4.1.tar.gz
tar xf ruyu-blog-v1.4.1.tar.gz

cd ~
ln -sfn /root/ruyu-blog-release/ruyu-blog-v1.4.3 ruyu-blog
ll -t



##第2步:覆盖3个核心配置文件#################################################################################################
rm -rf /root/ruyu-blog/blog-backend/src/main/resources/application.yml
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-backend/src/main/resources/application.yml /root/ruyu-blog/blog-backend/src/main/resources/

rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/default.conf
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-blog/default.conf /root/ruyu-blog/blog-frontend/kuailemao-blog


rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/default.conf
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-admin/default.conf /root/ruyu-blog/blog-frontend/kuailemao-admin

#vim /root/ruyu-blog/blog-backend/src/main/resources/application.yml
#.env
#检查下对不对

rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.development
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.production
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-blog/.env.development /root/ruyu-blog/blog-frontend/kuailemao-blog
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-blog/.env.production /root/ruyu-blog/blog-frontend/kuailemao-blog


rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/.env.development
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-admin/.env.production
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-admin/.env.development /root/ruyu-blog/blog-frontend/kuailemao-admin
cp /root/ruyu-blog-release/ruyu-blog-v1.4.2/blog-frontend/kuailemao-admin/.env.production /root/ruyu-blog/blog-frontend/kuailemao-admin




##第3步:构建镜像#######################################################################################################
#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
##这里记得做好原作者Dockerfile里target/的补充
docker build . -t ruyu-blog-hd-v1.4.3-v1-2024.8.19
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v1.4.3-v1-2024.8.19
docker ps
##



#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.4.3-v1-2024.8.19
docker run --name blog-qt -d -p 80:80 blog-qt-v1.4.3-v1-2024.8.19
docker ps
##


#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-admin/
rm -rf dist
pnpm install
pnpm uninstall husky
pnpm install husky
pnpm build

#删除老容器和老镜像
docker rm -f blog-ht
#docker rmi -f blog-ht

#构建新镜像和启动新容器
docker build . -t blog-ht-v1.4.3-v1-2024.8.19
docker run --name blog-ht -d -p 81:81 blog-ht-v1.4.3-v1-2024.8.19
docker ps
##

image-20240819204705595

image-20240819205014758

部署:

image-20240819205540697

部署前台报错:

image-20240819205825898

[root@ruyub-blog-prod kuailemao-blog]# pnpm build

> kuailemao-blog@0.0.0 build /root/ruyu-blog-release/ruyu-blog-v1.4.3/blog-frontend/kuailemao-blog
> vite build

failed to load config from /root/ruyu-blog-release/ruyu-blog-v1.4.3/blog-frontend/kuailemao-blog/vite.config.ts
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-plugin-imagemin' imported from /root/ruyu-blog-release/ruyu-blog-v1.4.3/blog-frontend/kuailemao-blog/vite.config.ts.timestamp-1724072180439-206afc2a604ca.mjs
at new NodeError (node:internal/errors:387:5)
at packageResolve (node:internal/modules/esm/resolve:852:9)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1115:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36)
 ELIFECYCLE  Command failed with exit code 1.
[root@ruyub-blog-prod kuailemao-blog]#

这个是为啥?

这个错误表示在构建过程中,无法找到导入自 /root/ruyu-blog-release/ruyu-blog-v1.4.3/blog-frontend/kuailemao-blog/vite.config.tsvite-plugin-imagemin 包。

要解决这个问题,您可以尝试以下步骤:

  1. 确保 vite-plugin-imagemin 包已经正确安装。运行以下命令来安装它:

    pnpm install vite-plugin-imagemin

    如果已经安装了该包,请确保它是最新版本。您可以通过运行以下命令更新该包:

    pnpm update vite-plugin-imagemin
  2. 检查您的配置文件 /root/ruyu-blog-release/ruyu-blog-v1.4.3/blog-frontend/kuailemao-blog/vite.config.ts 是否正确。确保您正确导入了 vite-plugin-imagemin 并进行了正确的配置。

  3. 如果您的应用程序具有其他依赖项,也请确保它们都正确安装并配置。

如果上述步骤都没有解决问题,请提供更多关于您的配置文件和依赖项的详细信息,以便我能够更好地帮助您解决问题。


报错了:。。。

image-20240819205928926

image-20240819205941629

image-20240819210053203


再次执行又好了。。。。

image-20240819210242100

image-20240819210524116

验证

502报错

image-20240819210835747

image-20240819210854864

默认:

image-20240819210929999

把这个给设置为空:

image-20240819211027476

重新构建:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.4.3-v2-2024.8.19
docker run --name blog-qt -d -p 80:80 blog-qt-v1.4.3-v2-2024.8.19
docker ps
##

image-20240819211147553

验证:(换是报错。。。。)

image-20240819211234084

image-20240819211338610

image-20240819211351181

并且好多数据也没了。。。。

恢复回来:

image-20240819211522710

image-20240819211558621

再验证:

image-20240819211616456

遗留502报错问题。。。

2024年8月19日

2024.8.4-修复发布新文章无法缓存文章浏览量bug(已更新)

作者更新log

image-20240804070700698

image-20240804071008507

047ffa6cb5bea8c537c6f1b470b4736f

更新过程

image-20240804070904032

blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java


cd /root/ruyu-blog-latest-code/ruyu-blog/
git pull


rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java
cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/

image-20240804071300447

  • 构建
#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
docker build . -t ruyu-blog-hd-v11-2024.8.4
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v11-2024.8.4
docker ps
##

image-20240804071920664

验证

升级成功。(现象待后续测试)

image-20240804072011837

最新镜像

blog-qt-v1.3.0-v17-2024.8.6 #2024.8.3-v2-https升级成功
blog-ht-v2-2024.8.3 #2024.8.3-v2-https升级成功
ruyu-blog-hd-v11-2024.8.4 #2024.8.4-修复发布新文章无法缓存文章浏览量bug

image-20240804072156405

2024.8.3-v2-https升级成功(成功)

效果

https://blog.onedayxyy.cn/

image-20240803164446240

最新镜像

blog-qt-v1.3.0-v16-2024.8.3 #2024.8.3-v2-https升级成功
blog-ht-v2-2024.8.3 #2024.8.3-v2-https升级成功
ruyu-blog-hd-v1.3.0-2024.8.3-v10 #2024.8.3-v2-https升级成功

image-20240803171036495

2024.8.3-更新博客首页菜单项里的一些url为子域名(已解决)

更新

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue


// 菜单默认值
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
// console.log(key, keyPath)
if (key === 'knowledge-base') {
window.open('https://wiki.onedayxyy.cn/', '_blank');
}
if (key === 'hexo-blog') {
window.open('https://onedayxyy.cn/hexoblog/', '_blank');
}
if (key === 'docusaurus-blog') {
window.open('https://wiki.onedayxyy.cn/blog', '_blank');
}
if (key === 'shuoshuo') {
window.open('https://moments.onedayxyy.cn/', '_blank');
}
if (key === 'photo') {
window.open('https://photo.onedayxyy.cn/', '_blank');
}
if (key === 'music') {
window.open('https://music.onedayxyy.cn/', '_blank');
}
}

image-20240803110109588

重新构建:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v14-2024.8.3
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v14-2024.8.3
docker ps

image-20240803110303304

效果

验证:(完美)

image-20240803110350938

最新镜像

blog-qt-v1.3.0-v14-2024.8.3 #2024.8.3-更新博客首页菜单项里的一些url为子域名
blog-ht
ruyu-blog-hd-v1.3.0-2024.8.1-v9 #2024.8.1-3个更新-优化随机文章接口 & 修改友链申请邮箱发送,数据库邮箱改为站长邮箱& 修复sql查询已删除文章错误

image-20240803110606861

2024.8.2-配置成自己的菜单项(已解决)

如何在首页添加对应的模块及自定义相关模块?

image-20240802113011405

需求

image-20240802081500534

这个是前端项目,我们来看下具体配置

把自己正在用的生产源码包下载到本地:

cd ~
tar cf ruyu-blog-`date +%F`-bak.tar.gz /root/ruyu-blog-release/ruyu-blog-v1.3.0

sz ruyu-blog-2024-08-02-bak.tar.gz

以关于为例

image-20240802103938021

应该就在这一块儿。

image-20240802104146609

备份虚机

image-20240802104333963

开始测试

本地运行前端服务

配置方法

cd ~
cd ruyu-blog/blog-frontend/kuailemao-blog/
pnpm run dev

image-20240802104636364

编辑文件:

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

<el-menu-item index="/about">
<el-icon>
<UserFilled/>
</el-icon>
知识库
</el-menu-item>

image-20240802105117467

验证:

外哦,可以了哦。

image-20240802105443576


按这个方法继续配置:

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

<el-menu-item index="https://onedayxyy.cn/docusaurus/">
<el-icon>
<UserFilled/>
</el-icon>
知识库
</el-menu-item>

image-20240802105611598

这个会自动刷新的。

验证:

image-20240802105800816

但是无法跳转哇???该怎么办


gpt

这个index.vue文件是博客前端的一个菜单配置文件,我想实现点击知识库菜单后,就跳转到另外一个https://onedayxyy.cn/docusaurus/链接,请问该如何改写代码呢?

image-20240802110542232

image-20240802111121437

输出代码:

代码太长,这里省略部分代码:




<!-- 添加知识库菜单项 -->
<el-menu-item index="knowledge-base">
<el-icon>
<UserFilled/>
</el-icon>
知识库
</el-menu-item>



// 菜单默认值
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
if (key === 'knowledge-base') {
window.location.href = 'https://onedayxyy.cn/docusaurus/'
}
}

image-20240802111620006

image-20240802111636013

备份代码:

cp /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue{,.bak}

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue
#输入内容

验证

image-20240802111028705

image-20240802111043917

哇哦,完美。


但是,这个是在当前页面打开的链接,能不能在新的标签页打开呢?

image-20240802111239038

image-20240802111742938

输出代码:

const handleSelect = (key: string, keyPath: string[]) => {
if (key === 'knowledge-base') {
window.open('https://onedayxyy.cn/docusaurus/', '_blank');
}
}

image-20240802111831299

验证

验证:(完美,符合预期。)

image-20240802113011405

image-20240802111852635

遗留,得处理下这个图标问题(后续再说)

image-20240802112024568

遗留:处理其他菜单项(后续再说)

将其代码更新到生产环境里

重新打包:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v11-2024.8.2
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v11-2024.8.2
##

image-20240802112318456

验证:(完美)

image-20240802112407504

image-20240802112415452

最新镜像

blog-qt-v1.3.0-v11-2024.8.2 #2024.8.2-自己更新知识库菜单选项进去
blog-ht
ruyu-blog-hd-v1.3.0-2024.8.1-v9 #2024.8.1-3个更新-优化随机文章接口 & 修改友链申请邮箱发送,数据库邮箱改为站长邮箱& 修复sql查询已删除文章错误

做快照

image-20240802112812011

继续处理剩余菜单项:处理其它菜单项

image-20240802125553649

这里添加一个精神小屋菜单项(已解决)

去除chatgpt。

编辑:

#备份
cp /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue-`date +%F`.bak

##粘贴内容

// 菜单默认值
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
// console.log(key, keyPath)
if (key === 'knowledge-base') {
window.open('https://onedayxyy.cn/docusaurus/', '_blank');
}
if (key === 'shuoshuo') {
window.open('http://47.100.215.163:3000/', '_blank');
}
}


<el-sub-menu index="3">
<template #title>
<el-icon>
<IceCreamRound/>
</el-icon>
精神小屋
</template>
<el-menu-item index="/tree-hole">
<el-icon>
<Fries/>
</el-icon>
树洞
</el-menu-item>
<el-menu-item index="shuoshuo">
<el-icon>
<Bowl/>
</el-icon>
说说
</el-menu-item>
<el-menu-item index="/message">
<el-icon>
<Postcard/>
</el-icon>
留言版
</el-menu-item>
</el-sub-menu>

本地运行:

cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
pnpm run dev

image-20240802131022835

image-20240802131032715

验证:(符合预期)

image-20240802131005138

这里添加一个娱乐菜单项(已解决)

在备份:

cp  /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue-`date +%F`.bak-1

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

##内容

<el-sub-menu index="4">
<template #title>
<el-icon>
<IceCreamRound/>
</el-icon>
娱乐
</template>
<el-menu-item index="photo">
<el-icon>
<Bowl/>
</el-icon>
相册
</el-menu-item>
<el-menu-item index="music">
<el-icon>
<Bowl/>
</el-icon>
音乐
</el-menu-item>
</el-sub-menu>



// 菜单默认值
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
// console.log(key, keyPath)
if (key === 'knowledge-base') {
window.open('https://onedayxyy.cn/docusaurus/', '_blank');
}
if (key === 'shuoshuo') {
window.open('http://47.100.215.163:3000/', '_blank');
}
if (key === 'photo') {
window.open('http://47.100.215.163:8082/', '_blank');
}
if (key === 'music') {
window.open('https://onedayxyy.cn/musics/', '_blank');
}
}

本地运行:

cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
pnpm run dev

image-20240802131836501

image-20240802131904534

验证:(完美)

image-20240802131824822

最终版

再次构建镜像,发布版本。

image-20240802133520681

重新构建

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v13-2024.8.2
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v13-2024.8.2
docker ps

image-20240802133439044

验证:(完美)

image-20240802133520681

最新镜像 **

blog-qt-v1.3.0-v13-2024.8.2 #2024.8.2-配置成自己的菜单项
blog-ht
ruyu-blog-hd-v1.3.0-2024.8.1-v9 #2024.8.1-3个更新-优化随机文章接口 & 修改友链申请邮箱发送,数据库邮箱改为站长邮箱& 修复sql查询已删除文章错误

做快照

image-20240802133623690

2024.8.1-3个更新-优化随机文章接口 & 修改友链申请邮箱发送,数据库邮箱改为站长邮箱& 修复sql查询已删除文章错误(已更新)

image-20240801210513742

优化随机文章接口

blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java
blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java

image-20240801193723487

image-20240801193758151

修改友链申请邮箱发送,数据库邮箱改为站长邮箱

blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java

image-20240801193834269

修复sql查询已删除文章错误

blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java

image-20240801210610680

开始更新

已做好快照

image-20240801193920667

这3个文件互相独立,都是后端文件

image-20240801194005797

blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java
blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java

blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java

更新代码:

cd ~
cd ruyu-blog-latest-code/ruyu-blog/
git pull

直接替换就好:

rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java
rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java
rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java




cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/

cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/

cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/

image-20240801194346108

  • 构建镜像
#ruyu-blog-hd-v1.3.0-2024.7.31-v7 old
#ruyu-blog-hd-v1.3.0-2024.8.1-v8 old

#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
docker build . -t ruyu-blog-hd-v1.3.0-2024.8.1-v8
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v1.3.0-2024.8.1-v8
##

image-20240801194616238

验证效果(更新出新Bug了👸)

机器也重启过,还是有问题;。。。

缓存也清理过,还是有问题;。。。

image-20240801195442643

c1ef23e5f3663c1c7c11851df4cb5b93

0a7e2d571c5ab68736d67e6cf833c1ac

8f3d2b07eb22379379d4a6496c01c0a0

升级后,bug快照

image-20240801195712277

再次更新

##old

rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java
rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java
rm -rf /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java




cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/

cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/ArticleServiceImpl.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/

cp /root/ruyu-blog-latest-code/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/LinkServiceImpl.java /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/service/impl/

本次:

#blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java
vim /root/ruyu-blog/blog-backend/src/main/java/xyz/kuailemao/mapper/ArticleMapper.java

image-20240801210610680

原来的:

image-20240801210852001

更新后:

image-20240801210926605

  • 重新构建
#ruyu-blog-hd-v1.3.0-2024.7.31-v7 old
#ruyu-blog-hd-v1.3.0-2024.8.1-v8 old

#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
docker build . -t ruyu-blog-hd-v1.3.0-2024.8.1-v9
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v1.3.0-2024.8.1-v9
docker ps

image-20240801211110007

验证效果(完美)

image-20240801211257618

最新镜像

blog-qt-v1.3.0-v10-2024.8.1 #去掉音乐模块,重构about页面
blog-ht
ruyu-blog-hd-v1.3.0-2024.8.1-v9 #2024.8.1-3个更新-优化随机文章接口 & 修改友链申请邮箱发送,数据库邮箱改为站长邮箱& 修复sql查询已删除文章错误

vm快照

image-20240801211735814

2024.7.31-2个更新-修复后台角色停用后该角色还可以使用的bug & 后端mq策略优化(已更新)

作者更新log

01

image-20240731220409487

4 个文件发生了变化,影响行数: +25 -8

blog-backend/src/main/java/xyz/kuailemao/constants/SQLConst.java
blog-backend/src/main/java/xyz/kuailemao/constants/UserConst.java
blog-backend/src/main/java/xyz/kuailemao/enums/RoleEnum.java
blog-backend/src/main/java/xyz/kuailemao/service/impl/UserServiceImpl.java

image-20240731220502119

02

image-20240731215432106

image-20240731215456756

image-20240731215537420

gitee信息:

image-20240731220138537

更新log:

4 个文件发生了变化,影响行数: +42 -47

blog-backend/src/main/java/xyz/kuailemao/config/rabbit/ConsumerConfig.java
blog-backend/src/main/java/xyz/kuailemao/handler/RabbitListenerErrorHandler.java
blog-backend/src/main/java/xyz/kuailemao/interceptor/EmailQueueListener.java
blog-backend/src/main/resources/application.yml

image-20240731220705845

开始更新

直接更新后端代码即可

blog-backend/

注意下这个application.yml文件

blog-backend/src/main/resources/application.yml

image-20240731221026920

我的后端代码之前有需要更改的吗?

应该没,那直接更新代码即可。

image-20240731221159896

做好快照,拉取最新代码

  • 做好备份

image-20240731221615878

  • 拉取最新代码
cd /root/ruyu-blog-latest-code/
cd ruyu-blog/
git pull

image-20240731221419287

  • 直接更新
#做好备份
cd ~
cd ruyu-blog/
cp -a blog-backend blog-backend-`date +%F`
ls blog-backend-2024-07-31

image-20240731221848948

更新后端代码:

rm -rf /root/ruyu-blog/blog-backend
cp -a /root/ruyu-blog-latest-code/ruyu-blog/blog-backend /root/ruyu-blog

image-20240731222043979

拷贝核心application文件:

cp /root/ruyu-blog/blog-backend-2024-07-31/src/main/resources/application.yml  /root/ruyu-blog/blog-backend/src/main/resources
#输入yes


##更新次文件内容
vim /root/ruyu-blog/blog-backend/src/main/resources/application.yml
# mail:
# smtp:
# auth: true
# starttls:
# enable: true

image-20240731222526302

配置Dockerfile:

vim Dockerfile
……
COPY target/blog-backend-0.0.1-SNAPSHOT.jar /app/app.jar

更新后,直接构建新镜像。

#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
docker build . -t ruyu-blog-hd-v1.3.0-2024.7.31-v7
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v1.3.0-2024.7.31-v7
##

image-20240731223000051

验证效果

image-20240731223026101

重启测试:(完美)

image-20240731223223804

做好虚机快照:

image-20240731223534339

最新镜像

blog-qt-v1.3.0-v10-2024.8.1 #去掉音乐模块,重构about页面
blog-ht
ruyu-blog-hd-v1.3.0-2024.7.31-v7 #修复后台角色停用后该角色还可以使用的bug & 后端mq策略优化

2024.7.31-重构about页面(已更新)

vm快照:

image-20240731074344500

效果:

http://blog.onedayxyy.cn/about

image-20240731074410509

镜像版本:

blog-qt-v1.3.0-v9-2024.7.31 #2024.7.31-v20-重构about页面
blog-ht
ruyu-blog-hd-v1.3.0-2024.7.24-v6 #将ecs minio切回到本地并配置域名,更新后端代码(作者发布) (最新)

作者更新log

image-20240801060015561

image-20240731071555604

4aace6c654d5bbfb86a61da4bf747a22

自己更新

已备份vm

image-20240731071625438

查看更新方法

image-20240731071726012

image-20240731071808746

因此,直接更新这部分代码就好

blog-frontend/kuailemao-blog/src/assets/icons/bilibili_icon.svg

blog-frontend/kuailemao-blog/src/views/About/index.vue

开始更新

拉取作者最新代码:

cd ~
cd ruyu-blog-sourcecode/ruyu-blog/
git pull

更新文件:

更新文件1:

cd ~
cd ruyu-blog/blog-frontend/kuailemao-blog/

#rz bilibili_icon.svg 到blog-frontend/kuailemao-blog/src/assets/icons/路径

cp /root/ruyu-blog-sourcecode/ruyu-blog/blog-frontend/kuailemao-blog/src/assets/icons/bilibili_icon.svg /root/ruyu-blog/blog-frontend/kuailemao-blog/src/assets/icons

更新文件2:

#vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue

#备份
cp /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue-`date +%F`

cp /root/ruyu-blog-sourcecode/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue
#输入yes

image-20240731072613018

重新打包测试:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v7-2024.7.31
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v7-2024.7.31
##



##old blog-qt-v1.3.0-v6-2024.7.28
## new blog-qt-v1.3.0-v7-2024.7.31

image-20240731072838266

验证效果

(完美,符合预期)

image-20240731072918856

修改为自己的信息

cp /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue   /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue.`date +%F`-success

vim /root/ruyu-blog/blog-frontend/kuailemao-blog/src/views/About/index.vue

再次打包构建:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v9-2024.7.31
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v9-2024.7.31

image-20240731074023494

验证:(完美)

image-20240731074047406

做好虚机快照。

2024-7-29-升级https(待更新),增加是否支持音乐模块选项(已更新)

作者更新log

image-20240801061436708

新增是否集成第三方音乐播放器模块选项

blog-frontend/kuailemao-blog/.env.development
blog-frontend/kuailemao-blog/.env.production

blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue
blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

image-20240801061528583

image-20240801061614995

image-20240801061630731

image-20240801061641331

替换部分http为https,去掉默认初始化音乐(这部分文件更改好多)

image-20240801061900115

image-20240801061833955

image-20240801062418457

问题现象

image-20240803140823809

image-20240803140752580

我开始替换

mkdir ruyu-blog-imgs

vim /etc/nginx/conf.d/home.conf
location /ruyu-blog-imgs {
alias /root/ruyu-blog-imgs;
index index.html; # 默认显示index.html文件,如果没有则列出目录内容
}


https://image.kuailemao.xyz/blog/logo/blog后台logo.svg

https://onedayxyy.cn/ruyu-blog-imgs/blog-houtai-logo.svg

cd ruyu-blog/

blog-frontend/kuailemao-admin/src/config/default-setting.ts
#https://onedayxyy.cn/ruyu-blog-imgs/blog-houtai-logo.svg


blog-frontend/kuailemao-blog/src/components/Banner/index.vue
#https://onedayxyy.cn/ruyu-blog-imgs/study-boy.jpg


blog-frontend/kuailemao-blog/src/components/Loading/index.vue
#https://onedayxyy.cn/ruyu-blog-imgs/loading-gif.gif


rm -rf blog-frontend/kuailemao-blog/src/store/modules/music.ts


rm -rf blog-frontend/kuailemao-blog/src/utils/O.o/heo.ts


#https://onedayxyy.cn/ruyu-blog-imgs/TreeHole-back.png
#https://onedayxyy.cn/ruyu-blog-imgs/wechat-pay.jpg
#https://onedayxyy.cn/ruyu-blog-imgs/chatgpt-de79290a.png
#https://onedayxyy.cn/ruyu-blog-imgs/water-dog.png

打包

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v16-2024.8.3
docker run --name blog-qt -d -p 80:80 -p 443:443 blog-qt-v1.3.0-v16-2024.8.3
docker ps
##

image-20240803143750697

验证:

image-20240803143920184

但是文章页面有问题:。。。。文章封面显示不了。。。。

image-20240803144119853

应该是自己的minio有问题:。。。。

image-20240803144308305

那也只能给minio再配置一个子域名了:。。。。

再次构建:。。。。。

#重新构建jar包
cd /root/ruyu-blog/blog-backend
mvn clean
mvn clean package

#删除老容器和老镜像
docker rm -f ruyu-blog-hd
#docker rmi -f ruyu-blog-hd

#构建新镜像和启动新容器
docker build . -t ruyu-blog-hd-v1.3.0-2024.8.3-v10
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd-v1.3.0-2024.8.3-v10
docker ps
##

开始更新

拉取最新代码

cd ~
cd ruyu-blog-latest-code/ruyu-blog/
git pull
pwd
/root/ruyu-blog-latest-code/ruyu-blog

备份当前最新代码

cd ~
cd ruyu-blog
cp -a blog-frontend/ blog-frontend-`date +%F`.bak
ls blog-frontend-2024-08-01.bak

问题:我之前更改的那些前端信息需要改,怎么办?只能手动再改一次了吗?

开始更新--新增是否集成第三方音乐播放器模块选项

blog-frontend/kuailemao-blog/.env.development
blog-frontend/kuailemao-blog/.env.production

blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue
blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

1

默认配置:

cd ~
cd /root/ruyu-blog/blog-frontend/kuailemao-blog

[root@ruyub-blog-prod kuailemao-blog]# cat .env.production
# 生产环境配置
NODE_ENV = production

# 博客代理
VITE_APP_BASE_API = '/api'
# 后台域名
VITE_SERVE=''
# 前台域名
VITE_FRONTEND_URL = ''
# 音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
# 音乐后台
VITE_MUSIC_SERVE=''
# 音乐前端地址
VITE_MUSIC_FRONTEND_URL = ''
# 自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟qps限制,有时会得不到想要的结果
VITE_YIYAN_API = ''[root@ruyub-blog-prod kuailemao-blog]# cat .env.development
# 开发环境配置
NODE_ENV = development

# 博客代理地址
VITE_APP_BASE_API = '/api'
# 博客后台
VITE_SERVE=''
# 前台域名
VITE_FRONTEND_URL = ''
# 音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
# 音乐前端地址
VITE_MUSIC_FRONTEND_URL = ''
# 音乐后台
VITE_MUSIC_SERVE=''
# 自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟qps限制,有时会得不到想要的结果
[root@ruyub-blog-prod kuailemao-blog]#

需要修改为:

image-20240801061614995

最新代码内容:

cd /root/ruyu-blog-latest-code/ruyu-blog/blog-frontend/kuailemao-blog


[root@ruyub-blog-prod kuailemao-blog]# cat .env.development
# 开发环境配置
NODE_ENV = development

# 博客代理地址
VITE_APP_BASE_API = '/api'
# 博客后台
VITE_SERVE=''
# 前台域名
VITE_FRONTEND_URL = ''
# 音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
# 第三方开源集成的音乐前端地址,如果不配置上面菜单栏就不会出现音乐选项
VITE_MUSIC_FRONTEND_URL = ''
# 音乐后台
VITE_MUSIC_SERVE=''
# 自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟qps限制,有时会得不到想要的结果
VITE_YIYAN_API = ''


[root@ruyub-blog-prod kuailemao-blog]# cat .env.production
# 生产环境配置
NODE_ENV = production

# 博客代理
VITE_APP_BASE_API = '/api'
# 后台域名
VITE_SERVE=''
# 前台域名
VITE_FRONTEND_URL = ''
# 音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
# 音乐后台
VITE_MUSIC_SERVE=''
# # 第三方开源集成的音乐前端地址,如果不配置上面菜单栏就不会出现音乐选项
VITE_MUSIC_FRONTEND_URL = ''
# 自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟qps限制,有时会得不到想要的结果
VITE_YIYAN_API = ''[root@ruyub-blog-prod kuailemao-blog]#

因此,直接覆盖:

rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.development
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/.env.production


cp /root/ruyu-blog-latest-code/ruyu-blog/blog-frontend/kuailemao-blog/.env.development /root/ruyu-blog/blog-frontend/kuailemao-blog
cp /root/ruyu-blog-latest-code/ruyu-blog/blog-frontend/kuailemao-blog/.env.production /root/ruyu-blog/blog-frontend/kuailemao-blog

image-20240801063736985

覆盖代码:

blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue
blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue

image-20240801063831806

blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue
blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue




###删除
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue
rm -rf /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue


###拷贝
cp /root/ruyu-blog-latest-code/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/MoveMenu

cp /root/ruyu-blog-latest-code/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header/index.vue /root/ruyu-blog/blog-frontend/kuailemao-blog/src/components/Layout/Header

直接覆盖把,暂时先不管了。。。。

image-20240801064612537

重新构建:

#重新构建dist
cd /root/ruyu-blog/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm install
pnpm build

#删除老容器和老镜像
docker rm -f blog-qt
#docker rmi -f blog-qt

#构建新镜像和启动新容器
docker build . -t blog-qt-v1.3.0-v10-2024.8.1
docker run --name blog-qt -d -p 80:80 blog-qt-v1.3.0-v10-2024.8.1
###

image-20240801064842384

验证效果

完美。

image-20240801064929977

2024.7.23(已更新)

image-20240724032953281

线上日志已更新:http://kuailemao.xyz/article/46

247043df679503806ff5ffa5555ca9c6

2024.7.18(已更新)

(自己已更新代码到自己仓库)

image-20240718122754153

70cbabaac671641ce061a22cc2d833e3

959817048c349c892ae5443ca8f5d440

代码已同步gitee&github,线上地址, 线上日志:http://kuailemao.xyz/article/46


0%