NBlog个人博客部署维护过程记录 -- 后端springboot + 前端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.功能熟悉及完善（进行中，对于不熟悉的功能实现进行学习，对于需要扩展的功能进行修改等）

可以访问下面的链接查看效果：
https://www.chaobk.com

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

美图镇楼

image-20240216161505644

一、本地初步尝试

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中添加配置文件的忽略项，即：

image-20240216154927063

/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 前端部署

首先根据项目的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+端口尝试访问下是否成功。

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

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

image-20240216161152576

image-20240216161221893

基本部署流程结束，现在就有了一个好看的个人博客了~
现在好多东西都是用的原来的，只替换了名字和图片，之后逐步改了。

3.开启域名访问

3.1 域名购买

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

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

image-20240217200304350

image-20240217200319756

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

3.2 DNS解析

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

image-20240217200700428

进入域名，点击解析。

image-20240217202011834

image-20240217202037983

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

image-20240217202156444

按需配置，我这里配置了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证书进行下载。

image-20240219204258192

image-20240219204427182

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

解压后是两个文件，分别是.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，本地尝试通过域名访问。
image-20240219205729884

配置成功。

管理页、后台服务的配置也是类似的逻辑。配置完成后测试是否成功即可。

3.6 服务代码重新部署

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

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

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

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

4.功能完善及扩展（待更新）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/690761.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据库||数据库的完整性

数据库||数据库的完整性

1.实验题目：数据库的完整性 2.实验目的和要求： 掌握数据库的实体完整性约束定义，完整性检查及违约处理方式。 掌握数据库的参照完整性约束定义，完整性检查及违约处理方式。 掌握数据库的用户定义完整性约束定义，完…
阅读更多...
如何构建企业专属GPT

如何构建企业专属GPT

大语言模型（LLM）具有令人印象深刻的自然语言理解和生成能力， 2022年11月底OpenAI发布了ChatGPT，一跃成为人工智能AI领域的现象级应用。但由于LLM的训练数据集主要来源于互联网数据，企业私域信息并未被LLM所训练&#x…
阅读更多...
LeetCode 3028.边界上的蚂蚁

LeetCode 3028.边界上的蚂蚁

边界上有一只蚂蚁&#xff0c;它有时向 左 走&#xff0c;有时向 右 走。 给你一个 非零 整数数组 nums 。蚂蚁会按顺序读取 nums 中的元素&#xff0c;从第一个元素开始直到结束。每一步&#xff0c;蚂蚁会根据当前元素的值移动&#xff1a; 如果 nums[i] < 0 &#xff0…
阅读更多...
如何从 git 分支中合并特定文件，而不是整个分支的内容

如何从 git 分支中合并特定文件，而不是整个分支的内容

问题 在git 中&#xff0c;我们可以使用 git merge 命令&#xff0c;合并整个分支&#xff0c;覆盖当前分支的内容&#xff0c;但是有时候我们并不想这么做&#xff0c;而是想 merge 某个文件。那么下面提供两种办法。 方法一 使用 git checkout&#xff0c;从别的分支&…
阅读更多...
【工具插件类教学】Unity运行时监控变量，属性，事件等的值和调用Runtime Monitoring

【工具插件类教学】Unity运行时监控变量，属性，事件等的值和调用Runtime Monitoring

目录 一、介绍 二、安装方式 三、入门 1.实例化和静态成员
阅读更多...
MySQL进阶 - 备份与恢复

MySQL进阶 - 备份与恢复

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…
阅读更多...
gowin GW1N4 OSC IP 使用

gowin GW1N4 OSC IP 使用

创建工程 1. File 选项下&#xff0c;选择新建工程New.. 2.Name 是指工程名&#xff1b;Creat in 指工程路径&#xff1b; 3.选择对应的 器件&#xff0c;本测试示例使用的是 GW1N4BLV_LQFP144C6I5; 4.选择好器件型号&#xff0c;单击Finish; 5.给工程增加VerilogFile 即 .v …
阅读更多...
IDEA2023版本创建Spring项目只能勾选17和21却无法使用Java8

IDEA2023版本创建Spring项目只能勾选17和21却无法使用Java8

问题&#xff1a;新建springboot项目时&#xff0c;发现java版本只有17和21 解决办法&#xff1a;将server URL中的https://start.spring.io/更换成http://start.springboot.io/或者https://start.aliyun.com/ 截图如下&#xff1a; 原因分析 Spring官方发布Spring Boot 3.0.0…
阅读更多...
【JVM篇】什么是运行时数据区

【JVM篇】什么是运行时数据区

文章目录 &#x1f354;什么是运行时数据区⭐程序计数器⭐栈&#x1f50e;Java虚拟机栈&#x1f388;栈帧的内容 &#x1f50e;本地方法栈 ⭐堆⭐方法区 &#x1f354;什么是运行时数据区 运行时数据区指的是jvm所管理的内存区域&#xff0c;其中分为两大类 线程共享&#xf…
阅读更多...
Nginx介绍和使用

Nginx介绍和使用

Nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;其使用方法包括安装、配置以及与其他软件的配合使用。 Nginx被广泛认为是一个轻量级、占用资源少、并发处理能力强大的web服务器软件。它不仅可以作为HTTP服务器提供静态内容服务&#xff0c;还可以作为反向代理服务器…
阅读更多...
【小呆的力学笔记】弹塑性力学的初步认知四：简单应力状态下的应力应变关系

【小呆的力学笔记】弹塑性力学的初步认知四：简单应力状态下的应力应变关系

文章目录 2. 简单应力状态下的应力应变关系2.1 简单拉伸的应力应变关系2.2 真实应力应变关系2.3 应力-应变关系简化模型 2. 简单应力状态下的应力应变关系 我们在高中就学过&#xff0c;弹簧拉伸力和变形量成比例&#xff0c;对于一般的金属材料&#xff0c;在一定载荷以内这种…
阅读更多...
leetcode刷题记录：二叉树02（思路篇）

leetcode刷题记录：二叉树02（思路篇）

参考labuladong的算法小抄&#xff1a;https://labuladong.online/algo/data-structure/binary-tree-part1/ 复习二叉树纲领篇&#xff0c;二叉树解题的思维模式分两类&#xff1a; 1、是否可以通过遍历一遍二叉树得到答案&#xff1f;如果可以&#xff0c;用一个 traverse 函…
阅读更多...
Elasticsearch如何设置密码

Elasticsearch如何设置密码

目录 一、配置1.修改配置文件2.设置密码3.修改密码 二、验证 一、配置 1.修改配置文件 修改配置文件 config/elasticsearch.yml&#xff0c;写入以下配置&#xff1a; xpack.security.enabled: true discovery.type: single-node xpack.security.transport.ssl.enabled: tru…
阅读更多...
【数据结构】二叉树根节点到特定节点路径（C语言版）

【数据结构】二叉树根节点到特定节点路径（C语言版）

二叉树——根节点到特定节点路径查找 一、思路二、代码实现 一、思路 使用二叉链表创建的二叉树&#xff0c;这里我的思路是用链栈来存放找寻二叉树特定节点中&#xff0c;用来存放节点元素 个人思路&#xff1a;创建链栈&#xff0c;遍历二叉树并把路径中节点元素存放到栈中&…
阅读更多...
Xilinx（AMD） 7系列FPGA配置引脚说明

Xilinx（AMD） 7系列FPGA配置引脚说明

xilinx 7系列FPGA配置引脚 下表详细描述了xilinx7系列FPGA所有配置引脚及其功能。 Pin NameBanktypeDirectionDescriptionCFGBVS0dedicatedIBank0电压选择&#xff0c;当Bank0电压为2.5v/3.3v时该引脚上拉到VCCO_0&#xff0c;如果Bank0工作于1.8V该引脚下拉接地。对于只能工…
阅读更多...
【iOS】系统框架

【iOS】系统框架

文章目录 前言四十七、熟悉系统框架四十八、多用块枚举&#xff0c;少用for循环四十九、对自定义其内存管理语义的collection使用无缝桥接五十、构建缓存时选用NSCache而非NSDictionary五十一、精简initialize与load的实现代码五十二、别忘了NSTimer会保留其目标对象 前言 本次…
阅读更多...
E. Final Countdown

E. Final Countdown

思路&#xff1a;对于每一位统计贡献&#xff0c;不难发现&#xff0c;假设数为12345&#xff0c;个位的贡献就是12345&#xff0c; 十位的贡献是1234&#xff08;仅当个位跳转时产生贡献&#xff09;&#xff0c;百位贡献是123,后面同理。 12345 1234 123 12 1 …
阅读更多...
Stable Diffusion 模型下载：Dark Sushi Mix 大颗寿司Mix

Stable Diffusion 模型下载：Dark Sushi Mix 大颗寿司Mix

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 Dark Sushi Mix 大颗寿司Mix 是一个动漫大模型&#xff0c;绘制的图片色彩丰富…
阅读更多...
网络运行安全

网络运行安全

网络运行安全 第一节 一般规定 第二十一条 国家实行网络安全等级保护制度。网络运营者应当按照网络安全等级保护制度的要求，履行下列安全保护义务，保障网络免受干扰、破坏或者未收授权的访问，防止网络数据泄露或者被窃取、篡改： 制定内部安全管理制度和操作规程，确定网络…
阅读更多...
【MySQL初阶】索引

【MySQL初阶】索引

1. 索引基本概念 1.1 索引介绍 索引(index)&#xff1a;是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的一列或者多列创建索引&#xff0c;并指定索引的类型&#xff0c;各类索引有各自的数据结构实现。&#xff08;具体细节在MySQL进阶章节详…
阅读更多...
最新文章

Copyright @ 2022~2023