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

news2024/12/23 9:29:02

项目是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.coloradmin.cn/o/1457905.html

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

相关文章

leetcode（动态规划）53.最大子数组和（C++详细解释）DAY12

leetcode（动态规划）53.最大子数组和（C++详细解释）DAY12

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。 子数组 是数组中的一个连续部分。 示例 提示 2.解答思…
阅读更多...
Sora一出 哪里又要裁员了？

Sora一出 哪里又要裁员了？

上班前夕迎来大新闻，那就是Sora了，Sora是什么，有什么牛逼之处，怎么实现的，我们跟着官方文档透露出来的一点点信息，简单的捋一捋。 一、Sora是什么 官方给出的定义是：世界模拟器。这很明显有夸大…
阅读更多...
数据结构：动态内存分配+内存分区+宏+结构体

数据结构：动态内存分配+内存分区+宏+结构体

一、作业 1.定义一个学生结构体&#xff0c;包含结构体成员&#xff1a;身高&#xff0c;姓名&#xff0c;成绩&#xff1b;定义一个结构体数组有7个成员&#xff0c;要求终端输入结构体成员的值&#xff0c;根据学生成绩&#xff0c;进行冒泡排序。 #include <stdio.h>…
阅读更多...
Qt C++春晚刘谦魔术约瑟夫环问题的模拟程序

Qt C++春晚刘谦魔术约瑟夫环问题的模拟程序

什么是约瑟夫环问题&#xff1f; 约瑟夫问题是个有名的问题&#xff1a;N个人围成一圈&#xff0c;从第一个开始报数&#xff0c;第M个将被杀掉&#xff0c;最后剩下一个&#xff0c;其余人都将被杀掉。例如N6&#xff0c;M5&#xff0c;被杀掉的顺序是&#xff1a;5&#xff…
阅读更多...
如何利用Idea创建一个Servlet项目(新手向)

如何利用Idea创建一个Servlet项目(新手向)

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;如何利用Idea创建一个Servlet项目(新手向) Servlet是tomcat的api,利用Servlet进行webapp开发很方便,本文将介绍如何通过Idea创建一个Servlet项目(一共分为七步,这可能是我们写过的…
阅读更多...
备战蓝桥杯---动态规划（应用1）

备战蓝桥杯---动态规划（应用1）

话不多说&#xff0c;直接看题&#xff1a; 首先我们考虑暴力&#xff0c;用二维前缀和即可&#xff0c;复杂度为o(n^4). 其实&#xff0c;我们不妨枚举任意2行&#xff0c;枚举以这个为边界的最大矩阵。 我们把其中的每一列前缀和维护出来&#xff0c;相当于把一个矩阵压缩成…
阅读更多...
观察者模式和发布订阅模式的区别

观察者模式和发布订阅模式的区别

从下图中可以看出&#xff0c;观察者模式中观察者和目标直接进行交互&#xff0c;而发布订阅模式中统一由调度中心进行处理&#xff0c;订阅者和发布者互不干扰。这样一方面实现了解耦&#xff0c;还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息&#xff0c;但…
阅读更多...
【Vue3】搭建Pinia环境及其基本使用

【Vue3】搭建Pinia环境及其基本使用

下载 npm i pinia引入并注册 App.vue import { createApp } from vue import { createPinia } from pinia import App from ./App.vue // 1. 引入 import { createPinia } from piniaconst app createApp(App) // 2. 创建 const pinia createPinia() // 3. 注册 app.use(p…
阅读更多...
python----面向对象

python----面向对象

这里写目录标题 面向对象思想类类的定义类名的定义类的构造函数的定义类的属性类的方法定义 继承语法关于构造函数问题 文件操作绝对路径相对路径pycharm获取绝对路径和相对路径文件读写读文件open&#xff08;&#xff09;read&#xff08;&#xff09;readline&#xff08;&a…
阅读更多...
2021年CSP-J认证 CCF信息学奥赛中小学初级组 第一轮真题-单项选择题解析

2021年CSP-J认证 CCF信息学奥赛中小学初级组 第一轮真题-单项选择题解析

2021年 中小学信息学奥赛CSP-J真题解析 1、以下不属于面向对象程序设计语言的是 A、c B、python C、java D、c 答案&#xff1a;D 考点分析&#xff1a;主要考查编程语言&#xff0c;ABC都是面向对象语言&#xff0c;D选项c语言是面向过程语言&#xff0c;答案D 2、以下奖…
阅读更多...
202427读书笔记|《猫的自信：治愈系生活哲学绘本》——吸猫指南书，感受猫咪的柔软慵懒与治愈

202427读书笔记|《猫的自信：治愈系生活哲学绘本》——吸猫指南书，感受猫咪的柔软慵懒与治愈

202427读书笔记|《猫的自信&#xff1a;治愈系生活哲学绘本》——吸猫指南书&#xff0c;感受猫咪的柔软慵懒与治愈 《猫的自信&#xff1a;治愈系生活哲学绘本》作者林行瑞&#xff0c;治愈系小漫画绘本&#xff0c;10分钟可以读完的一本书&#xff0c;线条明媚&#xff0c;自…
阅读更多...
SQL注入工具之SQLmap入门操作

SQL注入工具之SQLmap入门操作

了解SQLmap 基础操作 SQLmap是一款自动化的SQL注入工具&#xff0c;可以用于检测和利用SQL注入漏洞。 以下是SQLmap的入门操作步骤&#xff1a; 1.下载SQLmap&#xff1a;可以从官方网站&#xff08;https://sqlmap.org/&#xff09;下载最新版本的SQLmap。 2.打开终端&#…
阅读更多...
CDP和Chrome

CDP和Chrome

CDP和Chrome CDP和WebDriver Protocol WebDriver和 Chrome DevTools Protocol&#xff08;CDP&#xff09; 是用于自动化浏览器的两个主要协议&#xff0c;大多数的浏览器自动化工具都是基于上述其中之一来实现的。可以通过这两种形式来和浏览器交互&#xff0c;通过代码来控…
阅读更多...
使用maven集成spring在测试的时候报出了如下的异常：version 60

使用maven集成spring在测试的时候报出了如下的异常：version 60

使用maven集成spring在测试的时候报出了如下的异常&#xff1a; Caused by: java.lang.IllegalArgumentException: Unsupported class file major version 60 解决&#xff1a;
阅读更多...
MAC M1安装vmware和centos7虚拟机并配置静态ip

MAC M1安装vmware和centos7虚拟机并配置静态ip

一、下载vmware和centos7镜像 1、VMWare Fusion 官网的下载地址是&#xff1a;下载地址 下载好之后注册需要秘钥&#xff0c;在官网注册后使用免费的个人秘钥 2、centos7 下载地址&#xff1a; https://biosyxh.cn:5001/sharing/pAlcCGNJf 二、虚拟机安装 直接将下…
阅读更多...
比特币正在蚕食黄金

比特币正在蚕食黄金

号外&#xff1a;教链内参2.19《内参&#xff1a;蹭热点、骗流量、割韭菜》 众所周知&#xff0c;自从美国SEC批准比特币现货ETF登陆美股市场之后&#xff0c;打开了美国金融市场泛滥的流动性向比特币流入的大门。只用了短短的30个交易日&#xff0c;比特币ETF就从零膨胀到了近…
阅读更多...
基于RBAC的权限管理的理论实现和权限管理的实现

基于RBAC的权限管理的理论实现和权限管理的实现

权限管理的理论 首先需要两个页面支持&#xff0c;分别是角色管理和员工管理&#xff0c;其中角色管理对应的是角色和权限的配合&#xff0c;员工管理则是将登录的员工账号和员工所处的角色进行对应&#xff0c;即通过新增角色这个概念&#xff0c;让权限和员工并不直接关联&a…
阅读更多...
Ubuntu18.04有线连接后，无法设置ip地址以及显示网口设置

Ubuntu18.04有线连接后，无法设置ip地址以及显示网口设置

前提&#xff1a;首先测试过网线是完全没问题的 桌面端找不到设置网口 终端输入&#xff1a; ifconfig 没有找到网口设置和对应IP 然后查询网口驱动是否正常安装&#xff0c;输入&#xff1a; lspci | grep Ethernet 有输出说明网口驱动正常安装 然后查询电脑的ip地址&am…
阅读更多...
2023年全球软件开发大会（QCon北京站2023）2月：核心内容与学习收获（附大会核心PPT下载）

2023年全球软件开发大会（QCon北京站2023）2月：核心内容与学习收获（附大会核心PPT下载）

本次峰会是一个汇集了最新技术趋势、最佳实践和创新思维的盛会。对于从事软件开发和相关领域的专业人士来说&#xff0c;参加这样的大会将有助于他们了解行业动态、提升技能水平、拓展职业视野&#xff0c;并与同行建立联系和合作。 本次峰会包含&#xff1a;AI基础架构、DevO…
阅读更多...
Stable Diffusion 绘画入门教程（webui）-lora

Stable Diffusion 绘画入门教程（webui）-lora

通过前边的文章&#xff0c;相信大家已经能够自己产出好看的小姐姐或者小哥哥了&#x1f923; 不知道有没有发现每次生成的脸、身材、衣服、环境、风格等等可能都会有所差异&#xff0c;那么如果这个问题不解决&#xff0c;实用性将大大降低&#xff0c;因此lora诞生了。 文章…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023