有关三更博客项目部署的内容

部署SpringBoot+Vue项目

以下是项目的视频教程

B站最通俗易懂手把手SpringBoot+Vue项目实战-前后端分离博客项目-Java项目

项目地址： 以下内容和视频有出入，仅供参考
后端
博客前台
博客后台

1.项目部署规划

1.后端多模块项目blog以及各模块运行端口：

前台服务模块zpp-blog->7777，后台服务模块zpp-admin->8989，公共模块zpp-framework

  • 前端前台Vue项目：sg-blog-vue->8093

  • 前端后台Vue项目：sg-vue-admin->8094

docker所需镜像：

  • lwieske/java-8（jdk1.8）

  • mysql:8.0.19

  • redis:6.0.8

  • nginx:1.18.0

部署步骤：

  1. 安装docker

  2. 拉取lwieske/java-8镜像，后端项目使用maven打包，上传jar包到服务器指定目录/mydata，编写Dockerfile文件，将后端项目打成镜像文件。

  3. 拉取mysql:8.0.19、redis:6.0.8、nginx:1.18.0镜像。

  4. 编写docker-compose.yml文件，使用docker-compose容器编排管理容器运行。

  5. 配置mysql，导入sql文件

  6. 配置redis，修改redis.conf文件

  7. 配置nginx，将打好包的Vue项目放到html目录下，并配置nginx.conf文件

  8. 测试运行

2.前置工作

2.1修改后端配置文件ip

修改后端项目的application.yaml文件，将MySQL服务和Redis服务的localhost修改为服务器ip

2.2修改前端Vue项目运行端口

前台Vue项目修改项目运行端口是在config文件夹下的index.js文件当中，运行端口由原来的8080变为8093

后台Vue项目修改项目运行端口是在vue.config.js文件当中，运行端口由原来的8081变为8094

2.3修改前端对应的服务器ip

  1. 使用快捷键ctrl+shift+R全局搜索，将原来的localhost更改为对应的服务器ip
  2. 前台Vue项目

  1. 后台Vue项目

将原来的开发环境和生产环境的VUE_APP_BASE_API都更改为你的服务器ip和后端子模块端口

2.4后端项目打包

后端项目使用maven打包
打包后在target目录下生成对应模块的jar包

打包出现的问题：我在打包完成后查看jar包，发现只有16kb，然后试在本地运行jar包测试，果然有错误，报错信息是：xxxxx-0.0.1-SNAPSHOT.jar中没有主清单属性，原因是不能找到程序的主类，需要修改父pom文件和子模块sangeng-blog的pom文件和子模块sangeng-admin的pom文件，修改如下：

2.4.1解决打包问题

1
这是要使用的SpringBoot版本要在2.6以上，我的为2.7.6
  1. 父pom 记得更改配置程序运行入口所在的类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.10.1</version>
            </plugin>
            <!-- 此插件必须放在父 POM 中  -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-assembly-plugin</artifactId>
                <version>3.3.0</version>
                <executions>
                    <!--
                    执行本插件的方法为，在主目录下执行如下命令：
                    mvn package assembly:single

                    对于 IntelliJ IDEA，生成的 JAR 包位于每个模块下的文件夹 target
                    -->
                    <execution>
                        <id>make-assembly</id>
                        <phase>package</phase>
                        <goals>
                            <!-- 此处 IntelliJ IDEA 可能会报红，这是正常现象  -->
                            <goal>single</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <archive>
                        <manifest>
                            <!-- 配置程序运行入口所在的类 -->
                            <mainClass>com.zpp.ZppBlogApplication</mainClass>
                        </manifest>
                        <manifest>
                            <!-- 配置程序运行入口所在的类 -->
                            <mainClass>com.zpp.BlogAdminApplication</mainClass>
                        </manifest>
                    </archive>
                    <!-- 设置 JAR 包输出目录 -->
                    <outputDirectory>${project.build.directory}/#maven-assembly-plugin</outputDirectory>
                    <!-- 设置打包后的 JAR 包的目录结构为默认 -->
                    <descriptorRefs>
                        <descriptorRef>jar-with-dependencies</descriptorRef>
                    </descriptorRefs>
                </configuration>
            </plugin>
        </plugins>
    </build>
  1. 子模块zpp-blog和子模块zpp-admin的pom文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.6</version>
                <configuration>
<!--                    <fork>true</fork> &lt;!&ndash; 如果没有该配置，devtools不会生效 &ndash;&gt;-->
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
        <finalName>${project.artifactId}</finalName>
    </build>

2.4.2项目打包，本地运行jar包测试

在这之前首先修改配置文件中的mysql和redis服务ip地址(这一点很重要，包括端口，我这里没有使用默认端口)

在父pom下首先clean清除先前的jar包，再install打包.（单模块项目首先clean清除先前的jar包，再package打包）
zpp-blog模块

zpp-admin模块

进入target目录下，在文件搜索框输入cmd进入Dos窗口，使用命令运行jar包

-jar jar包
1
java -jar jar包

若未报错则jar包没有问题

2.5前端项目打包

  1. 前端sangeng-blog模块项目使用下面命令打包
1
npm run build

  1. 前端sangeng-admin模块项目使用下面命令打包

    注意：因为后端使用的是Finclip提供的模板，所以生产环境使用的是npm run build:prod，如果你没有使用提供的模板，就直接使用npm run build命令。

1
npm run build:prod
  1. 如果你打包的过程中出现以下错误，表示 node.js版本过高，可以关闭node.js安全校验后再打包
1
set NODE_OPTIONS=--openssl-legacy-provider

  1. 如果使用出现ERROR，请注释掉以下内容

下面这一步可以先忽略，因为我是后端部署完成之后再在本地测试前端项目的

  1. 在本地测试，放在Nginx里面测试发现后台只有登录和左边menu能够显现，原因是因为Route目录下的index.js有问题，只有/login和/dashborad

    记得修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import Vue from 'vue'
import Router from 'vue-router'

Vue.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 sidebar
    breadcrumb: 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 support
  scrollBehavior: () => ({ 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

2.6开放端口

  1. 打开所有需要运行服务的端口

根据你的服务器自行解决

因为我的服务器有其他服务，端口被占用，所以没有使用默认端口

以下是我的端口分配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
nginx----->81

redis------>8091

mysql----->8092



sg-blog-vue---->8093

sg-blog-admin---->8094



zpp-blog------>7777

zpp-admin----->8989

2.7配置安全组规则

在云服务器的安全组中添加规则

根据云服务器运营商不同，自行研究解决

3.docker环境安装及镜像加速

根据服务器系统不同自行安装解决

4.拉取镜像

1
2
3
4
5
docker pull lwieske/java-8
docker pull mysql:8.0.19
docker pull redis:6.0.8
docker pull nginx:1.18.0
docker images //查看镜像

5.编写Dockerfile文件，构建镜像

  1. 首先将jar包传到服务器指定目录下

我这里是在根目录下创建了一个mydata目录

这里我们两个jar包分别打成两个镜像，因为一个目录下只能有一个Dockerfile文件，所以当构建完第一个镜像之后修改对应的Dockerfile文件。

第一个Dockerfile文件

1
2
3
4
5
6
7
8
9
10
11
12
13
#基础镜像使用jdk1.8
FROM lwieske/java-8
#作者
MAINTAINER zpp
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD zpp-admin.jar zpp_admin.jar
# 运行jar包
# RUN bash -c 'touch /zpp_blog.jar'
ENTRYPOINT ["java","-jar","/zpp_admin.jar"]
#暴露8989端口作为微服务
EXPOSE 8989

构建镜像

1
docker build -t zpp_admin:1.0 .

第二个Dockerfile文件

1
2
3
4
5
6
7
8
9
10
11
12
13
#基础镜像使用jdk1.8
FROM lwieske/java-8
#作者
MAINTAINER zpp
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD zpp-blog.jar zpp_blog.jar
# 运行jar包
# RUN bash -c 'touch /zpp_blog.jar'
ENTRYPOINT ["java","-jar","/zpp_blog.jar"]
#暴露7777端口作为微服务
EXPOSE 7777

构建镜像

docker build -t zpp_blog:1.0 .

查看构建的镜像

6.使用Docker-compose容器编排

6.1配置nginx文件

  1. 在/目录下创建一个app目录，进入app目录
1
mkdir /app
  1. 首先创建一个nginx容器，只是为了复制出配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1.运行容器
docker run -p 80:80 --name nginx -d nginx:1.18.0

# 2.将容器内的配置文件拷贝到当前目录/app中:
docker container cp nginx:/etc/nginx .
# 3.将文件nginx修改为conf
mv nginx conf
# 4.创建文件夹nginx
mkdir nginx
# 5.将conf目录拷贝到nginx目录
cp -r conf nginx/
# 6.删除conf目录
rm -rf conf
# 3.停止并删除容器
docker stop nginx && docker rm nginx

6.2编写docker-compose.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
#compose版本
version: "3"


services:
  zpp_blog:
#微服务镜像
    image: zpp_blog.jar:1.0
    container_name: zpp_blog
    ports:
      - "7777:7777"
#数据卷
    volumes:
      - /app/zpp_blog:/data/zpp_blog
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx


  zpp_admin:
#微服务镜像
    image: zpp_admin.jar:1.0
    container_name: zpp_admin
    ports:
      - "8989:8989"
#数据卷
    volumes:
      - /app/zpp_admin:/data/zpp_admin
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx

#redis服务
  redis:
    image: redis:6.0.8
    ports:
      - "8091:6379"
    volumes:
      - /app/redis/redis.conf:/etc/redis/redis.conf
      - /app/redis/data:/data
    networks:
      - blog_network
    command: redis-server /etc/redis/redis.conf

 #mysql服务
  mysql:
    image: mysql:8.0.19
    environment:
      MYSQL_ROOT_PASSWORD: '123456'
      MYSQL_ALLOW_EMPTY_PASSWORD: 'no'
      MYSQL_DATABASE: 'sg_blog'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: '123456'
    ports:
       - "8092:3306"
    volumes:
       - /app/mysql/db:/var/lib/mysql
       - /app/mysql/conf/my.cnf:/etc/my.cnf
       - /app/mysql/init:/docker-entrypoint-initdb.d
    networks:
      - blog_network
    command: --default-authentication-plugin=mysql_native_password #解决外部无法访问

 #nginx服务
  nginx:
    image: nginx:1.18.0
    ports:
      - "81:80"
      - "8093:8093"
      - "8094:8094"
    volumes:
      - /app/nginx/html:/usr/share/nginx/html
      - /app/nginx/logs:/var/log/nginx
      - /app/nginx/conf:/etc/nginx
    networks:
      - blog_network



 #创建自定义网络
networks:
   blog_network:
  1. 检查当前目录下compose.yml文件是否有语法错误
1
docker compose config -q
  1. 启动所有docker-compose服务并后台运行
1
docker compose up -d

注意：因为MySQL和Redis还未配置，会出现容器挂掉的情况，这点等待配置过MySql和Redis之后再重启容器实例即可

7.配置MySQL

  1. 将sql文件传到/app/mysql/db目录下(和MySQL容器实例相同的容器数据卷位置)

本机Navicat导出sql文件，传送到/app/mysql/db目录下

  1. 进入MySQL容器实例
1
docker exec -it 容器ID bash

在/var/lib/mysql目录下查看是否有sql文件

  1. 登录MySQL

密码就是在docker-compose.yml文件当中进行配置的

  1. 使用对应的数据库，导入sql文件
1
2
use sg_blog;
source /var/lib/mysql/sg_blog.sql;
  1. sql数据导入成功

8.配置Redis

  1. 获取redis对应版本的配置文件

因为docker拉取的redis镜像是没有redis.conf文件的。因此，就需要我们官网上找一个相对应版本的的redis.conf配置文件

redis配置文件官网Redis configuration | Redis

可直接获取

因为我的redis版本是6.0.8，所以我选择6.0.的配置文件

  1. 进入/app/redis目录下

不知为何docker-compose.yml文件写的没有问题，但是这里创建的redis.conf文件却是一个文件夹，无奈只好删除redis.conf目录，创建一个redis.conf文件

使用vim命令进入vim编辑器，将redis配置文件内容粘贴进去

1
2
touch redis.conf
vim redis.conf

  1. 修改配置文件内容

使用/进行搜索

  • 添加redis密码（requirepass）

  • 修改bind为0.0.0.0（任何机器都能够访问）

  • 为了避免和docker中的-d参数冲突，将后台启动设置为no（daemonize no）

  • 关闭保护模式(protected-mode no)

9.测试后端接口

  1. 重启现在未启动的容器实例
1
docker restart 容器ID

2.使用ApiFox进行接口测试（postman也可以）

测试通过

如果没有问题，下面开始Nginx容器配置

10.配置Nginx

  1. 将打包好后的两个dist文件夹重命名发送到/app/nginx/html目录下

  1. 修改nginx.conf配置文件

进入conf文件夹下，打开nginx.conf文件

在http{.......}添加两个server
记得root路径为容器内的dist文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
server {
     listen       8093;
     server_name  localhost;

     #charset koi8-r;
     #
     #       #access_log  logs/host.access.log  main;

           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;

     #charset koi8-r;
     #
     #       #access_log  logs/host.access.log  main;

           location / {
                  root   /usr/share/nginx/html/admin_dist;
                  index  index.html index.htm;
                  try_files $uri $uri/ /index.html;
                }

     }


11.项目测试

访问对应ip和端口，查看项目是否有问题

版权声明：本文参考CSDN博主「☜阳光」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_52030824/article/details/127982206