828华为云征文|基于Flexus云服务器X实例的应用场景-部署自己的博客系统

🔴大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

先看这里

- 写在前面
- 效果图
- 部署拾壹博客系统
- - 项目架构
  - 项目特点
  - 详细介绍
  - 部署博客系统
  - 更改redis的信息
  - 打包后端
  - 上传jar到服务器中
  - 打包前端项目
- 总结

写在前面

华为云828云服务器活动来啦，B2B企业节正在举办，Flexus X实例的促销也非常给力，详情可以看这里：点我查看

具体的活动规则可以参考如下：

活动对象：

（1）新用户专享：华为云官网已完成注册和实名认证，且从未购买过华为云资源的用户（客户等级是V0）才可购买；

（2）企业新客专享：仅从未购买过华为云资源（客户等级是V0），且已完成企业实名认证用户可购买；

（3）产品新客专享：华为云官网已完成注册和实名认证，且从未购买过相关华为云资源的用户（不限客户等级）才可购买；

（具体用户范围以届时活动页面展示为准）

活动时间：

2024年8月22日-2024年9月15日（活动期间如有调整，以届时活动页面展示为准）
在这里插入图片描述

这不，我手里正好拿到了一台华为云Flexus X实例的服务器，经过几天的评测，整体来说还是很满意的。今天，我们继续基于华为云Flexus X实例的服务器，结合实际场景，部署一款精美的博客系统。

效果图

还是老规矩，在看正文之前，我们先看看效果图，毕竟，长篇大论不如一幅图表现的更加直观。

在这里插入图片描述

上面，我简单的了放了三张图片，说实话，这种小清新的风格，大部分开发者还是比较喜欢的，我目前的博客也是用的他的，不过很老啦，再加上好多自己的业务也在里面，就一直没有更新。

下面，我们来看看具体如何进行部署。

部署拾壹博客系统

一款vue+springboot前后端分离的博客系统，博客后台管理系统使用了vue+elmentui开发，后端使用Sa-Token进行权限管理,支持动态菜单权限，动态定时任务，文件支持本地和七牛云上传，使用ElasticSearch作为全文检索服务，支持QQ、微信公众号扫码、码云、GitHub登录。实现即时通讯聊天室功能

项目架构

在部署之前，我们有必要先了解一下拾壹博客的整个架构：

blog
├── shiyi-admin    --  后台管理系统的controller模块
├── shiyi-common        --  通用模块
├── shiyi-generate        --  代码生成模块
├── shiyi-quartz        --  定时任务模块
├── shiyi-server        --  博客启动类模块
├── shiyi-web           --  门户接口模块

该博客采用的是前后端分离技术，后端使用springboot+mybatis plus。前端采用的是vue2，据说最近还在升级vue3，我是不太会vue3，所以一直研究的事vue2。

项目特点

后台参考"vue-element-template"设计，侧边栏，历史标签，面包屑自动生成。
采用Markdown编辑器，写法简单。
评论支持表情输入回复等
前后端分离部署，适应当前潮流。
接入第三方登录，减少注册成本。
留言采用弹幕墙，更加炫酷。
支持代码高亮和复制，图片预览，深色模式等功能，提升用户体验。
搜索文章支持高亮分词，响应速度快。
新增文章目录、推荐文章等功能，优化用户体验。
新增aop注解实现日志管理
支持动态权限修改，采用RBAC模型，前端菜单和后台权限实时更新。
后台管理支持修改背景图片，博客配置等信息，操作简单，支持上传相册。
代码支持多种搜索模式（Elasticsearch或MYSQL），可支持配置。
代码支持多种文件上传模式（七牛云oss或本地上传），可支持配置。
代码遵循阿里巴巴开发规范，利于开发者学习。
使用netty+websocket技术实现博客群聊和单聊功能

详细介绍

前端： vue3.0 + pinia + vue-router + axios + element-plus + echarts
后端： SpringBoot + nginx + docker + sa-token + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch
其他：接入QQ、微博、码云、微信公众号等第三方登录，接入七牛云对象存储
服务器：腾讯云2核4G CentOS7.6
对象存储：七牛云OSS
最低配置： 1核2G服务器（关闭ElasticSearch）

部署博客系统

该博客暂未提供docker部署，所以我们只能采用源码的方式部署。

拉取仓库代码：

git clone https://gitee.com/quequnlong/shiyi-blog.git

在这里插入图片描述
2. 导入数据库

接下来，我们使用工具连接上mysql数据库（数据库安装的方式暂不在这里讲解）

打开我们拉下来的项目，找到blog.sql这个文件，他就是数据库脚本。

在这里插入图片描述

在mysql工具中，先新建一个名为blog的数据库。

在这里插入图片描述

接下来，我们导入刚刚找到的blog.sql文件的脚本。

在这里插入图片描述
可以从图中看到，我们已经导入成功。

更改redis的信息

数据库设置好了之后，下面我们需要需要设置一下redis的配置信息，我们需要找到项目中的配置文件，路径在这里src/main/resources/application.yml，在这个yml文件中，找到redis这个配置，修改一下Host为我们服务器的地址，端口和密码都按照实际情况更改：

在这里插入图片描述

另外，一定要在yml文件中，修改一下数据库的配置信息，比如ip地址，端口，以及密码。

在这里插入图片描述

下面，我们来启动一下项目。

在这里插入图片描述

如果看到和我一样的输出信息，则代表后端没有问题，已经成功启动。

打包后端

如果能启动，则表示服务和配置都是没有问题的，下面我们来继续下一步–打包。

先点击这个clean，清空一下缓存，不然可能会导致出现莫名的错误。
在这里插入图片描述
执行完毕后，继续双击下面的package，执行打包的操作。

然后进行等待。

在这里插入图片描述
如图展示，证明打包成功。

上传jar到服务器中

首先，我们需要再服务器上新建个目录，我这边在/home/project 这个目录下创建了个blog的目录，如图：

在这里插入图片描述

然后我们将包传入这个地方：

千万别传错了哈，是这里的shiyi-blog.jar这个包，因为打包后，他每个模块都会有这个名字一样的包，传错了就没法正常使用了。

在这里插入图片描述
我这边已经传输成功，然后我们通过下面的命令来启动后端服务：

nohup java -jar shiyi-blog.jar &

打包前端项目

下面，我们还是使用idea或者vscode打开前端项目，先执行命令：

npm install

安装一下依赖，安装的时候可能比较长，耐心等待即可。

注意：前端是有bolg-admin和bolg-web两部分，打包方式都一样。

在这里插入图片描述

两个端都需要执行，执行完毕后，我们开始打包。打包的方式很简单，我们找到package.json这个文件，然后点击build:prod前面的绿色小箭头即可。

在这里插入图片描述

等待执行完毕后，我们将dist目录上传到服务器中，如图所示：

在这里插入图片描述
接下来，我们在nginx中配置一下就可以访问啦，nginx配置方式如下：

 ##博客项目
     server {
        listen       80;
        listen       443 ssl http2;
        server_name  aaaa.team;
        gzip on;
         gzip_vary on;
         gzip_comp_level 9;
         gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
         gzip_disable "MSIE [1-6]\.";
       gzip_min_length 2048;
        
        if ($server_port !~ 443){
            rewrite ^(/.*)$ https://$host$1 permanent;
        }
        
        #证书地址
        ssl_certificate      /home/project/https/aaa.team_bundle.pem;
        ssl_certificate_key   /home/project/https/aaa.team.key;
        ssl_prefer_server_ciphers on;
      
      # 博客项目前台
       location / {
            root   /home/project/blog/web-dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        #博客项目后台
        location /admin {
            alias   /home/project/blog/admin-dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        
        #公众号小游戏
        location /games {
            alias   /home/project/blog/web/games/fxq;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
       
        ##后台接口
        location ^~ /shiyi/ {
            proxy_pass http://127.0.0.1:8800;
            proxy_connect_timeout 300s;
            proxy_send_timeout 300s;
            proxy_read_timeout 300s;
        }
        
      
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    ## server结束

然后我们就可以通过上面配置的域名访问刚刚部署的博客项目啦，如下所示：

在这里插入图片描述