部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

时间:2022-11-28 09:55:40

一、安装docker
yum install docker -y

docker常用命令

service docker start
service docker stop
service docker restart

配置docker加速器
打开 /etc/docker/daemon.json 文件,然后设置成如下内容:

vim /etc/docker/daemon.json
{
 "registry-mirrors": ["https://mirror.ccs.tencentyun.com"]
}

重新启动Docker服务,加速器才能生效。

service docker restart
二、安装
2.1. 安装mysql
docker run -it -d --name mysql-emos --net=host \
-p 3306:3306 \
-m 500m -v /root/mysql/data:/var/lib/mysql \
-v /root/mysql/config:/etc/mysql/conf.d \
-e MYSQL_ROOT_PASSWORD=abc123456 \
-e TZ=Asia/Shanghai mysql:8.0.23 \
--lower_case_table_names=1

用Navicat连接MySQL数据库,创建emos逻辑库,然后导入git上面的SQL文件。

2.2. 安装MongoDB

创建 /root/mongo/mongod.conf 文件,然后在文件中添加如下内容:

mkdir /root/mongo -p
vim /root/mongo/mongod.conf
net:
 port: 27017
 bindIp: "0.0.0.0"
storage:
 dbPath: "/data/db"
security:
 authorization: enabled

创建容器,为MongoDB分配500M内存。

docker run -it -d --name mongo --net=host \
-p 27017:27017 \
-v /root/mongo:/etc/mongo \
-v /root/mongo/data/db:/data/db \
-m 500m \
-e MONGO_INITDB_ROOT_USERNAME=admin \
-e MONGO_INITDB_ROOT_PASSWORD=abc123456 \
-e TZ=Asia/Shanghai \
mongo:4.4.7 --config /etc/mongo/mongod.conf
2.3. 安装Redis程序

创建 /root/redis/conf/redis.conf 文件,然后添加如下内容:

mkdir /root/redis/conf -p
vim  /root/redis/conf/redis.conf
bind 0.0.0.0
protected-mode yes
port 6379
tcp-backlog 511
timeout 0
tcp-keepalive 0
loglevel notice
logfile ""
databases 4
save 900 1
save 300 10
save 60 10000
stop-writes-on-bgsave-error yes
rdbcompression yes
rdbchecksum yes
dbfilename dump.rdb
dir ./
requirepass abc123456

执行命令,创建Redis容器,分配300M内存。

docker run -it -d --name redis -m 300m --net=host \
-e TZ=Asia/Shanghai \
-v /root/redis/conf:/usr/local/etc/redis redis:6.0.10 \
redis-server /usr/local/etc/redis/redis.conf
2.4. 安装RabbitMQ

执行命令,创建RabbitMQ容器,分配300M内存。

docker run \
-d \
-m 300m \
--net=host \
--name some-rabbit \
-p 5672:5672 \
-p 15672:15672 \
-e TZ=Asia/Shanghai \
rabbitmq:3.9.10-management
2.5. 在云主机上面开放端口

在云主机上面开放一些端口,这样外界才能远程管理MySQL、MongoDB,以及访问前后端项目等等。我们在云主机的安全组面板上面可以设置要开放的端口。

序号 端口 用途
1 3306 mysql端口
2 6379 redis端口
3 27017 MongoDB端口
4 4369 RabbitMQ端口
5 5671 RabbitMQ端口
6 5672 RabbitMQ端口
7 8090 emos-api项目端口
8 9090 emos-workflow项目端口
9 80 emos-vue项目端口

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

firewall-cmd --zone=public --add-port=9090/tcp --permanent
firewall-cmd --zone=public --add-port=8090/tcp --permanent
firewall-cmd --zone=public --add-port=5672/tcp --permanent
firewall-cmd --zone=public --add-port=5671/tcp --permanent
firewall-cmd --zone=public --add-port=4369/tcp --permanent
firewall-cmd --zone=public --add-port=27017/tcp --permanent
firewall-cmd --zone=public --add-port=6379/tcp --permanent
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload
三、部署后端项目
3.1. 下载JDK镜像

我们本地电脑用的是15.0.2版本的JDK,所以在Docker中部署后端项目也要用这个版本的JDK,那么咱们就先把JDK镜像给下载一下。
拉取jdk镜像

docker pull openjdk:15.0.2-oraclelinux7
  • 为镜像创建一个新的引用名称
docker tag openjdk:15.0.2-oraclelinux7 jdk15
  • 删除原有引用名
docker rmi openjdk:15.0.2-oraclelinux7

连接mysql创建emos数据库,初始化表结构
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

3.2. 部署工作流项目

在云主机的root目录中,创建workflow文件夹,然后把 emos-workflow.jar 和application.yml 文件上传到该目录中。
application.yml 文件中的MySQL和Redis连接必须要写成localhost,不要写IP地址。因为将来我们要关闭外网访问数据库端口,所以我们用localhost访问云主机本地的数据库是不受影响的。

mkdir /root/workflow -p
  • 上传emos-workflow.jar 和application.yml 文件上传到该目录中
    部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

接下来执行命令创建Docker容器,运行工作流项目。因为启动日志输出到out.log文件中,所以我们等待2分钟,然后打开这个日志文件,看看有没有报错信息。如果一切正常,说明该项目已经成功的启动了。

创建workflow容器

docker run -it -d --name=workflow --net=host -m 400m \
-e TZ=Asia/Shanghai \
-v /root/workflow:/root/workflow jdk15
  • 进入Java容器
docker exec -it workflow bash
  • 访问容器中的workflow文件夹
cd /root/workflow
  • 运行工作流项目
nohup java -jar -Dfile.encoding=utf-8 emos-workflow.jar --spring.config.location=application.yml >> out.log  2>&1 &
3.3. 部署emos-api项目

在云主机的root目录中,创建 emos-api 目录,然后把打包好的 emos-api.jar 和 application.yml 文件上传到该目录。依然要把 application.yml 文件中的数据库连接部分换成localhost才可以。

我们要在云主机的 /root/emos-api 文件夹中放入 apiclient_cert.p12 这个微信支付文件,然后接收审批
结果的 recieveNotify 和工作流的 url 都要改成 localhost 才可以。
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

mkdir /root/emos-api -p

上传emos-api.jar application.yml 、apiclient_cert.p12文件上传到该目录

接下来执行命令创建Docker容器,运行后端项目。

docker run -it -d --name=emos_api --net=host -m 400m \
-v /root/emos-api:/root/emos-api jdk15
  • 进入Java容器
docker exec -it emos_api bash
  • 访问容器中的emos-api文件夹
cd /root/emos-api
  • 运行工作流项目
nohup java -jar -Dfile.encoding=utf-8 emos-api.jar --spring.config.location=application.yml >> out.log  2>&1 &
四、在Docker中部署前端项目

我们在Docker中顺利的部署了Java项目,日志文件中并没有异常消息,说明项目运行一切正常。我们现在把前端VUE项目打包,然后部署到Nginx里面。

4.1. 修改前端代码

因为后端项目发布到云主机上面了,所以我们要把 main.js 文件中各种URL中的IP地址换成你自己云主机的IP。
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
有的小伙伴问,既然前端和后端项目都部署在云主机上面,前端发起Ajax请求用localhost有什么不行的?
还真不行。我们用浏览器打开前端页面,倘若发出的Ajax请求写的是localhost,那么访问的不是云主机,
而是我们本地电脑。我们本地电脑现在也没有运行后端项目,自然Ajax会报错。所以大家一定要写云主机的IP地址,切记!

4.2. 打包VUE项目

因为在Nginx中,可以部署多个前端项目,所以我要给每个前端项目分配一个相对路径,这样可以避免访问冲突。打开前端项目的 vite.config.js 文件,在里面给项目分配URI相对地址。
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
在命令行界面,进入emos-vue目录,然后执行下面的命令打包前端项目。

npm run build

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
下面的截图,说明打包已经成功了。前端项目会多出来 dist 目录,你把这个目录打成ZIP压缩包,稍后我们要上传到云主机。
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

4.3. 创建Nginx容器

首先下载安装Nginx镜像,这里我依然使用特定版本的镜像。

docker pull nginx:1.21.3

在root目录中,创建nginx文件夹。然后把课程git上面“其他”目录中的nginx.conf文件,上传到该目录。并且创建html文件夹,把index.html和50x.html文件上传到该目录。

具体文件内容:见文章末尾附录

mkdir /root/nginx/html -p

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
执行下面的命令,创建Nginx容器,然后用浏览器访问云主机的80端口,可以看到Nginx的欢迎画面。

docker run -it -d --name nginx -m 200m --net=host \
-v /root/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \
-v /root/nginx/html:/usr/share/nginx/html:ro \
-e TZ=Asia/Shanghai \
nginx:1.21.3

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

4.4. 部署前端项目

把 dist.zip 文件上传到 /root/nginx/html 目录中,然后执行unzip命令解压缩。
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

#进入到html目录
cd /root/nginx/html

#解压缩文件夹
unzip dist.zip

#删除压缩文件
rm -rf dist.zip

#给文件夹改名
mv dist emos-vue

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统
打开浏览器,访问 http://云主机IP:80/emos-vue ,如果能看到登陆页面,说明程序部署成功

部署SpringBoot+Vue3 项目实战,打造企业级在线办公系统

附录
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

50x.html
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>An error occurred.</h1>
<p>Sorry, the page you are looking for is currently unavailable.<br/>
Please try again later.</p>
<p>If you are the system administrator of this resource then you should check
the error log for details.</p>
<p><em>Faithfully yours, nginx.</em></p>
</body>
</html>

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}