电商网站商品中心设计方案,公司建站 网站设计,热点新闻事件及观点,做关键词搜索的网站零、写在前面
项目源码#xff1a;QiuShicheng/Qiu-blog (github.com)
项目是跟着B站up主【三更草堂】做的#xff0c;本人最终系统是修改了一些前端代码。
(注#xff1a;源码中前端代码未修改#xff0c;仍是up主提供的#xff09;
购买了一个轻量应用服务器2核2GQiuShicheng/Qiu-blog (github.com)
项目是跟着B站up主【三更草堂】做的本人最终系统是修改了一些前端代码。
(注源码中前端代码未修改仍是up主提供的
购买了一个轻量应用服务器2核2G新用户包年108元。
安装WinSCP用于服务器与本地文件的传输。
请一起参考四、参考链接去操作最后出错数据库连不上redis报错可以尝试删除容器和镜像重新操作。
一、工作准备
1.数据库打包
第一步在D盘新建SpringBootBlogMySQL文件夹
第二步winr在弹出的命令行黑窗口输入如下-p是数据库密码mybolgSite.sql是输出后的文件名 mysqldump -u root -p228675 sg_blog D:\SpringBootBlogMySQL\mybolgSite.sql 第三步查看SpringBootBlogMySQL文件夹就会发现有一个mybolgSite.sql这个就是数据库备份文件也就是我们要的打包文件
2.后端项目打包
第一步: 把Qiu-admin(子工程)的application.yml文件修改为如下
server:port: 8989
spring:datasource:url: jdbc:mysql://服务器ip(公):3306/sg_blog?characterEncodingutf-8serverTimezoneUTCusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverservlet:# 文件上传multipart:# 单个上传文件的最大允许大小max-file-size: 20MB# HTTP请求中包含的所有文件的总大小的最大允许值max-request-size: 20MBredis:host: 服务器ip(公)port: 6379mybatis-plus:configuration:# 日志log-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-config:db-config:logic-delete-field: delFlaglogic-delete-value: 1logic-not-delete-value: 0id-type: auto# 打开七牛云找到密钥管理把相关信息填写到下面3行会被Qiu-blog工程的OOSTest类获取
myoss:accessKey: _ibGP9wytjLCAZPqcFaWQNxbw7fMUvofSOvOFFR3secretKey: QSOAU-cv3sSDGNfVNPF6iXz-PsP5X9QTrjFI9zYwbucket: Qiu-blog
第二步: 把Qiu-blog(子工程)的application.yml文件修改为如下
server:port: 7777spring:# 数据库连接信息datasource:url: jdbc:mysql://服务器ip(公).180:3306/sg_blog?characterEncodingutf-8serverTimezoneAsia/Shanghaiusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverservlet:# 文件上传multipart:# 单个上传文件的最大允许大小max-file-size: 20MB# HTTP请求中包含的所有文件的总大小的最大允许值max-request-size: 20MB# springboot 2.6版本之后需要配置ant_path_matcher才能生使swagger生成接口文档# 我们目前的springboot版本是2.5.0不需要配置ant_path_matcher也可正常使用swaggermvc:pathmatch:matching-strategy: ant_path_matcherredis:host: 服务器ip(公)port: 6379
mybatis-plus:
# configuration:
# # 日志
# log-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-config:db-config:# 逻辑删除的字段logic-delete-field: delFlag# 代表已删除的值logic-delete-value: 1# 代表未删除的值logic-not-delete-value: 0# 主键自增策略以mysql数据库为准id-type: auto# 打开七牛云找到密钥管理把相关信息填写到下面3行会被Qiu-blog工程的OOSTest类获取
myoss:accessKey: _ibGP9wytjLCAZPqcFaWQNxbw7fMUvofSOvOFFR3secretKey: QSOAU-cv3sSDGNfVNPF6iXz-PsP5X9QTrjFI9zYwbucket: huanf-blog 第三步: 把SpringBootBlog(父工程)的pom.xml文件修改为如下然后刷新
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom.QiuBolg/groupIdartifactIdQiuBolg/artifactIdpackagingpom/packagingversion1.0-SNAPSHOT/version!-- Maven的聚合--modulesmoduleQiu-framework/modulemoduleQiu-admin/modulemoduleQiu-blog/module/modulespropertiesproject.build.sourceEncodingUTF-8/project.build.sourceEncodingjava.version1.8/java.version/propertiesdependencyManagementdependencies!-- SpringBoot的依赖配置--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-dependencies/artifactIdversion2.5.0/versiontypepom/typescopeimport/scope/dependency!--fastjson依赖--dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.33/version/dependency!--jwt依赖--dependencygroupIdio.jsonwebtoken/groupIdartifactIdjjwt/artifactIdversion0.9.0/version/dependency!--mybatisPlus依赖--dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.4.3/version/dependency!--阿里云OSS--dependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion3.10.2/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIdeasyexcel/artifactIdversion3.0.5/version/dependencydependencygroupIdio.springfox/groupIdartifactIdspringfox-swagger2/artifactIdversion2.9.2/version/dependencydependencygroupIdio.springfox/groupIdartifactIdspringfox-swagger-ui/artifactIdversion2.9.2/version/dependency/dependencies/dependencyManagementbuildpluginsplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-compiler-plugin/artifactIdversion3.1/versionconfigurationsource${java.version}/sourcetarget${java.version}/targetencoding${project.build.sourceEncoding}/encoding/configuration/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-assembly-plugin/artifactIdversion3.3.0/versionexecutions!--执行本插件的方法为在主目录下执行如下命令mvn package assembly:single对于 IntelliJ IDEA生成的 JAR 包位于每个模块下的文件夹 target--executionidmake-assembly/idphasepackage/phasegoals!-- 此处 IntelliJ IDEA 可能会报红这是正常现象 --goalsingle/goal/goals/execution/executionsconfigurationarchivemanifest!-- 配置程序运行入口所在的类 --mainClasscom.Qiu.QiuBlogApplication/mainClass/manifestmanifest!-- 配置程序运行入口所在的类 --mainClasscom.Qiu.BlogAdminApplication/mainClass/manifest/archive!-- 设置 JAR 包输出目录 --outputDirectory${project.build.directory}/#maven-assembly-plugin/outputDirectory!-- 设置打包后的 JAR 包的目录结构为默认 --descriptorRefsdescriptorRefjar-with-dependencies/descriptorRef/descriptorRefs/configuration/plugin/plugins/build
/project
第四步: 把Qiu-blog(子工程)的pom.xml文件修改为如下然后刷新
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdparentartifactIdQiuBolg/artifactIdgroupIdcom.QiuBolg/groupIdversion1.0-SNAPSHOT/version/parentmodelVersion4.0.0/modelVersionartifactIdQiu-blog/artifactIddependenciesdependencygroupIdcom.QiuBolg/groupIdartifactIdQiu-framework/artifactIdversion1.0-SNAPSHOT/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdversion2.5.0/versionexecutionsexecutiongoalsgoalrepackage/goal/goals/execution/executions/plugin/pluginsfinalName${project.artifactId}/finalName/build
/project
第五步Qiu-admin(子工程)的pom.xml文件修改为如下然后刷新
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdparentartifactIdQiuBolg/artifactIdgroupIdcom.QiuBolg/groupIdversion1.0-SNAPSHOT/version/parentmodelVersion4.0.0/modelVersionartifactIdQiu-admin/artifactIddependenciesdependencygroupIdcom.QiuBolg/groupIdartifactIdQiu-framework/artifactIdversion1.0-SNAPSHOT/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdversion2.5.0/versionexecutionsexecutiongoalsgoalrepackage/goal/goals/execution/executions/plugin/pluginsfinalName${project.artifactId}/finalName/build
/project
第六步: 打开父工程所在的目录导航栏输入cmd回车会弹出一个黑窗口 第七步: 在cmd输入如下即可得到Qiu-admin在Qiu-admin/target可找到jar包、Qiu-blog在Qiu-blog/target可找到jar包工程的jar包。当然也得到了Qiu-framework工程的jar包(这个jar包用不上) mvn package assembly:single 第八步: 测试jar包。只需要在Qiu-admin/target打开cmd输入如下即可测试Qiu-admin或Qiu-blog工程的jar包建议测试Qiu-admin工程的jar包会比较方便
注意: 由于Qiu-blog在启动时必须要开redis如果是测试Qiu-blog工程的jar包那么你必须先开启redis
3.前端项目打包
第一步: 把sg-blog-vue(前台)项目的config目录下的index.js文件port属性值从8080改为8093 第二步: 把sg-vue-admin(后台)项目的vue.config.js文件的port值从81改为8094 第三步: 把sg-blog-vue\src\vue.config.js文件里面的localhost改为服务器ip。第33行左右。 第四步: 把sg-blog-vue\src\store\index.js文件里面的localhost改为服务器ip。第13行左右。 第五步: 把sg-blog-vue的.env.development文件里面的localhost改为服务器ip注意端口是8989 # just a flag
ENV development# base api
VUE_APP_BASE_API http://服务器ip(公):8989 第六步: 把sg-blog-vue的.env.production文件里面的localhost改为服务器ip注意端口是8989 # just a flag
ENV production# base api
VUE_APP_BASE_API http://服务器ip(公):8989 第七步: 把sg-vue-admin的vue.config.js文件里面的localhost改为服务器ip注意端口是8989。第33行左右。 第八步: 把sg-vue-admin的.env.development文件里面的localhost改为服务器ip注意端口是8989。 # just a flag
ENV development# base api
VUE_APP_BASE_API http://服务器ip(公):8989 第九步: 把sg-vue-admin的.env.production文件里面的localhost改为服务器ip注意端口是8989 # just a flag
ENV production# base api
VUE_APP_BASE_API http://8.137.35.5:8989 第十步: 把sg-vue-admin\src\router\index.js文件修改为如下
import Vue from vue
import Router from vue-routerVue.use(Router)/* Layout */
import Layout from /layout/*** Note: sub-menu only appear when route children.length 1* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html** hidden: true if set true, item will not show in the sidebar(default is false)* alwaysShow: true if set true, will always show the root menu* if not set alwaysShow, when item has more than one children route,* it will becomes nested mode, otherwise not show the root menu* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb* name:router-name the name is used by keep-alive (must set!!!)* meta : {roles: [admin,editor] control the page roles (you can set multiple roles)title: title the name show in sidebar and breadcrumb (recommend set)icon: svg-name/el-icon-x the icon show in the sidebarbreadcrumb: false if set false, the item will hidden in breadcrumb(default is true)activeMenu: /example/list if set path, the sidebar will highlight the path you set}*//*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/
export const constantRoutes [{path: /login,component: () import(/views/login/index),hidden: true},{path: /,component: Layout,redirect: /dashboard,children: [{path: dashboard,name: Dashboard,component: () import(/views/dashboard/index),meta: { title: 首页, icon: dashboard }}]},{path: /write,component: Layout,children: [{path: /,name: Write,component: () import(/views/content/article/write/index),hidden: true}]},{path: /system/user,component: Layout,children: [{path: /,name: User,component: () import(/views/system/user),hidden: true}]},{path: /system/role,component: Layout,children: [{path: /,name: role,component: () import(/views/system/role),hidden: true}]},{path: /system/menu,component: Layout,children: [{path: /,name: menu,component: () import(/views/system/menu),hidden: true}]},{path: /system/role,component: Layout,children: [{path: /,name: role,component: () import(/views/system/role),hidden: true}]},{path: /content/article,component: Layout,children: [{path: /,name: article,component: () import(/views/content/article/index),hidden: true}]},{path: /content/category,component: Layout,children: [{path: /,name: category,component: () import(/views/content/category/index),hidden: true}]},{path: /content/link,component: Layout,children: [{path: /,name: link,component: () import(/views/content/link/index),hidden: true}]},{path: /content/tag,component: Layout,children: [{path: /,name: tag,component: () import(/views/content/tag/index),hidden: true}]}
]const createRouter () new Router({// mode: history, // require service supportscrollBehavior: () ({ y: 0 }),routes: constantRoutes
})const router createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter createRouter()router.matcher newRouter.matcher // reset router
}export default router
第十一步: 把sg-vue-admin\src\main.js文件注释掉下面的内容 第十二步: 在sg-blog-vue项目的终端执行如下 npm run build 第十三步: 在sg-vue-admin项目的终端执行如下 npm run build:prod 第十四步: 检查打包目录是否生成 二、服务器部署
1.开放防火墙
安装的系统环境为CentOS7。首先添加规则开发端口。 2.Docker安装 yum -y install gcc yum -y install gcc-c yum install -y yum-utils yum install vim yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum makecache fast yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin systemctl start docker # 启动docker docker version 3.拉取镜像 docker pull openjdk:8 docker pull mysql:8.0.19 # 建议和本地mysql的版本一样 docker pull redis:6.0.8 docker pull nginx:1.18.0 docker images # 查看有哪些镜像 4.构建镜像
第一步: 在目录下新建mydataQiu-admin.jar和Qiu-blog.jar包传到这个mydata目录里面 第二步: 在mydata目录新建Dockerfile文件写入如下 cd cd mydata touch Dockerfile vim Dockerfile # 基础镜像使用jdk1.8
FROM openjdk:8
# 作者
MAINTAINER xha
# VOLUME 指定临时文件目录为/tmp在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD Qiu-blog.jar qiu_blog.jar
# 运行jar包
RUN bash -c touch /qiu_blog.jar
ENTRYPOINT [java,-jar,/qiu_blog.jar]
#暴露7777端口作为微服务
EXPOSE 7777
第三步: 在mydata目录执行如下作用是构建Qiu-blog.jar包的镜像构建出来的镜像名为sangeng_blog docker build -t sangeng_blog:1.0 . 第四步: 把mydata目录下的Dockerfile文件修改为如下
# 基础镜像使用jdk1.8
FROM openjdk:8
# 作者
MAINTAINER xha
# VOLUME 指定临时文件目录为/tmp在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD Qiu-admin.jar qiu_admin.jar
# 运行jar包
RUN bash -c touch /qiu_admin.jar
ENTRYPOINT [java,-jar,/qiu_admin.jar]
#暴露8989端口作为微服务
EXPOSE 8989
第五步: 在mydata目录执行如下作用是构建Qiu-admin.jar包的镜像构建出来的镜像名为sangeng_admin docker build -t sangeng_admin:1.0 . 第六步: 检查是否构建出sangeng_blog和sangeng_admin镜像 docker images 5.创建容器
第一步看Docker-compose版本如果你是按照我上面安装的docker那么你肯定会有Docker-compose docker compose version 第二步在mydata目录新建docker-compose.yml文件写入如下 cd cd mydata touch docker-compose.yml vim docker-compose.yml 注记得mysql密码改写成自己的
#compose版本
version: 3 services:sangeng_blog:
#微服务镜像 image: sangeng_blog:1.0container_name: sangeng_blogports:- 7777:7777
#数据卷volumes:- /app/sangeng_blog:/data/sangeng_blognetworks: - blog_networkdepends_on: - redis- mysql- nginxsangeng_admin:
#微服务镜像image: sangeng_admin:1.0container_name: sangeng_adminports:- 8989:8989
#数据卷volumes:- /app/sangeng_admin:/data/sangeng_adminnetworks:- blog_networkdepends_on:- redis- mysql- nginx#redis服务redis:image: redis:6.0.8ports:- 6379:6379volumes:- /app/redis/conf/redis.conf:/etc/redis/redis.conf- /app/redis/data:/datanetworks: - blog_networkcommand: redis-server /etc/redis/redis.conf#mysql服务mysql:image: mysql:8.0.19environment:MYSQL_ROOT_PASSWORD: 123456MYSQL_ALLOW_EMPTY_PASSWORD: noMYSQL_DATABASE: sg_blogMYSQL_USER: rootMYSQL_PASSWORD: 123456ports:- 3306:3306volumes:- /app/mysql/db:/var/lib/mysql- /app/mysql/conf/my.cnf:/etc/my.cnf- /app/mysql/init:/docker-entrypoint-initdb.dnetworks:- blog_networkcommand: --default-authentication-pluginmysql_native_password #解决外部无法访问#nginx服务nginx:image: nginx:1.18.0ports:- 80:80- 8093:8093- 8094:8094volumes:- /app/nginx/html:/usr/share/nginx/html- /app/nginx/logs:/var/log/nginx- /app/nginx/conf:/etc/nginxnetworks:- blog_network#创建自定义网络
networks: blog_network: 输入如下作用是检查docker-compose.yml文件有没有语法错误如果输入之后没任何输出就说明没有语法错误 cd cd mydata docker compose config -q 运行docker-compose.yml文件就可以创建并运行java容器、mysql容器、redis容器、nginx容器。-d表示后台运行 docker compose up -d docker ps -a #查看正在运行的容器 6.导入数据库
第一步把前面在 部署博客项目-数据库打包 那里拿到的 mybolgSite.sql 文件上传到服务器的 /app/mysql/db 目录 第二步:查看容器ID docker ps -a #查看容器ID 第三步: 进入MySQL容器内部执行导入sql文件的操作 docker start mydata-mysql-1 # 启动mysql容器 docker exec -it 容器ID bash # 进入mysql容器内部 # 下面的是执行导入sql文件的操作必须要进入了mysql容器内部才能执行如下命令mysql的登录密码是228675 mysql -u root -p 228675 use sg_blog; source /var/lib/mysql/mybolgSite.sql; show tables; #这里能看到数据库表格 第四步: 退出MySQL容器内部 exit # 退出MySQL exit # 退出MySQL容器 7.配置Redis
第一步进入 /app/redis/redis.conf 目录下新建redis.conf文件写入如下注意不需要把配置写完全redis有自己的默认配置 cd /app/redis/redis.conf touch redis.conf vim redis.conf bind 0.0.0.0 daemonize no protected-mode no 第二步: 启动所有容器。nginx容器启动不了没关系现在还没配置nginx systemctl start docker # 启动docker docker ps -a # 查看容器ID docker restart 容器ID # 重新启动所有容器 docker ps # 查看实际启动的容器 8.配置Nginx
第一步将前端项目打包好后的两个dist文件夹重命名发送到/app/nginx/html目录下 第二步修改/app/nginx/conf/nginx.conf配置文件文件内容如下
#user nobody;
worker_processes 1;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 8093;server_name localhost;location / {root /usr/share/nginx/html/blog_dist;index index.html index.htm;try_files $uri $uri/ /index.html;}}server {listen 8094;server_name localhost;location / {root /usr/share/nginx/html/admin_dist;index index.html index.htm;try_files $uri $uri/ /index.html;}}
}
第三步 启动所有容器。注意这次nginx容器是可以正常启动的并且全部容器都是正常启动的 systemctl start docker # 启动docker docker ps -a # 查看容器ID docker restart 容器ID # 重新启动所有容器 docker ps # 查看实际启动的容器 到此完成了所有部署相关的操作。即可浏览器输入ip8093查看个人前端系统。ip8094查看个人后台系统。
三、效果展示
前台博客系统 http://8.137.35.5:8093/#/Home 四、参考链接
1. myblog (yuque.com)
2. 超详细Docker部署SpringBootVue项目(三更博客项目部署) - xhang′s blog (xhablog.online)
