部署SpringBoot+Vue3 项目实战，打造企业级在线办公系统_编程开发

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

创始人

2024-04-13 23:04:23

0次

文章目录

- - - - 一、安装docker
      - 二、安装
      - 2.1. 安装mysql
        2.2. 安装MongoDB
        2.3. 安装Redis程序
        2.4. 安装RabbitMQ
        2.5. 在云主机上面开放端口
      - 三、部署后端项目
      - 3.1. 下载JDK镜像
        3.2. 部署工作流项目
        3.3. 部署emos-api项目
      - 四、在Docker中部署前端项目
      - 4.1. 修改前端代码
        4.2. 打包VUE项目
        4.3. 创建Nginx容器
        4.4. 部署前端项目
      - 附录
      - index.html
        50x.html
        nginx.conf

一、安装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: 27017bindIp: "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项目端口

在这里插入图片描述

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数据库，初始化表结构
在这里插入图片描述

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 文件上传到该目录中

接下来执行命令创建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 才可以。
在这里插入图片描述

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。
在这里插入图片描述

有的小伙伴问，既然前端和后端项目都部署在云主机上面，前端发起Ajax请求用localhost有什么不行的？
还真不行。我们用浏览器打开前端页面，倘若发出的Ajax请求写的是localhost，那么访问的不是云主机，
而是我们本地电脑。我们本地电脑现在也没有运行后端项目，自然Ajax会报错。所以大家一定要写云主机的IP地址，切记！

4.2. 打包VUE项目

因为在Nginx中，可以部署多个前端项目，所以我要给每个前端项目分配一个相对路径，这样可以避免访问冲突。打开前端项目的 vite.config.js 文件，在里面给项目分配URI相对地址。
在这里插入图片描述
在命令行界面，进入emos-vue目录，然后执行下面的命令打包前端项目。

npm run build

在这里插入图片描述
下面的截图，说明打包已经成功了。前端项目会多出来 dist 目录，你把这个目录打成ZIP压缩包，稍后我们要上传到云主机。

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

在这里插入图片描述
执行下面的命令，创建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

在这里插入图片描述

4.4. 部署前端项目

把 dist.zip 文件上传到 /root/nginx/html 目录中，然后执行unzip命令解压缩。
在这里插入图片描述

#进入到html目录
cd /root/nginx/html#解压缩文件夹
unzip dist.zip#删除压缩文件
rm -rf dist.zip#给文件夹改名
mv dist emos-vue

在这里插入图片描述
打开浏览器，访问 http://云主机IP:80/emos-vue ，如果能看到登陆页面，说明程序部署成功

在这里插入图片描述

附录

index.html




Welcome to nginx!



Welcome to nginx!
If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.
For online documentation and support please refer to
nginx.org.

Commercial support is available at
nginx.com.
Thank you for using nginx.

50x.html




Error



An error occurred.
Sorry, the page you are looking for is currently unavailable.

Please try again later.
If you are the system administrator of this resource then you should check
the error log for details.
Faithfully yours, nginx.

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;
}

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【Java语言】Java顺序表和链表的详细教程一学就会

下一篇：CDGA|促进数据生产要素在大湾区自由流动，培养数据治理人才先行

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

文章目录

一、安装docker

二、安装

2.1. 安装mysql

2.2. 安装MongoDB

2.3. 安装Redis程序

2.4. 安装RabbitMQ

2.5. 在云主机上面开放端口

三、部署后端项目

3.1. 下载JDK镜像

3.2. 部署工作流项目

3.3. 部署emos-api项目

四、在Docker中部署前端项目

4.1. 修改前端代码

4.2. 打包VUE项目

4.3. 创建Nginx容器

4.4. 部署前端项目

附录

index.html

Welcome to nginx!

50x.html

An error occurred.

nginx.conf

相关内容

热门资讯