手把手教你入门vue+springboot开发（五）--docker部署

---

前言

前面我们重点介绍了vue+springboot前后端分离开发的过程，本篇我们结合docker容器来研究一下打包部署过程。

---

一、前端打包

在VSCode的命令行中输入npm run build可以打包前端代码，出现下图提示表示打包完成。

打包成功后会在前端工程目录生成dist目录，如下图所示：

把dist目录中所有文件拷贝到后端工程的src\main\resources\static目录，springboot默认从static目录加载静态文件。然后运行后端工程，在浏览器中访问“http://localhost:8088”，注意前端端口只是开发调试用，实际打包部署后用的是后端端口。
这时我们发现打不开网页，经过长时间的排查终于找到原因，原来是后端拦截器拦截了http首页请求，excludePathPatterns方法中带的是放行的请求：/user/login，其它请求都拦截。
可以在excludePathPatterns方法中带上/,/index.html,/js/,/assets/,/css/**等请求，代码如下：

registry.addInterceptor(loginInterceptor).excludePathPatterns("/user/login","/","/index.html","/js/**","/assets/**","/css/**");

或者用addPathPatterns方法，它带的是需要拦截的请求，也可以改成addPathPatterns，只拦截/user/selectAll请求。

二、后端打包

后端直接用IDEAU工具打包，如下图，主菜单选择"Project Structure…"

然后选择"Artifacts"–“+”–“JAR”–“From modules with dependencies…”

如下图填写标红的内容确认。

选择类型和打包目录确认。

然后回到主菜单，选择"Build"–“Build Artifacts…”

选择“demo::jar”–“Build”

打包完成后在demo\out\artifacts\demo_jar目录会出现demo.jar包。

打开命令行，执行java -jar demo.jar运行jar包，如下图运行成功，然后在浏览器中访问“http://localhost:8088”，测试OK

三、docker运行

在容器出现之前我们一般在虚拟机中运行测试，现在有了容器我们就可以直接在docker容器中运行，效率提升很多，不需要再安装虚拟机、配置环境等。
docker环境安装和使用可以见前面的文章，这里就不再重复。
1）我们先编写dockerfile文件

FROM ubuntu:20.04
 
# Install Java
RUN apt-get update && apt-get install -y openjdk-21-jdk
 
# 将jar文件复制到容器中
COPY . /usr/app

2）然后把demo.jar和其他jar文件都拷贝到dockerfile文件同一目录。
3）执行docker build -f ./dockerfile -t demo:v1 .命令生成demo:v1镜像文件
4）执行docker run -it -p 8088:8088 demo:v1 bash命令运行demo:v1镜像
注意：-p表示端口映射，把docker的8088端口映射到本机的8088端口
5）demo容器中安装MySQL
执行apt-get install mysql-server命令默认安装MySQL8，demo.jar连接MySQL会报错，有问题。
通过以下方法安装mysql5.7
//新建文件夹
mkdir /usr/local/mysql
cd /usr/local/mysql
apt-get install wget
//下载
wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-server_5.7.31-1ubuntu18.04_amd64.deb-bundle.tar
//解压
tar -xvf mysql-server_5.7.31-1ubuntu18.04_amd64.deb-bundle.tar
//删除不用的模块
rm -f mysql-testsuite_5.7.31-1ubuntu18.04_amd64.deb
rm -f mysql-community-test_5.7.31-1ubuntu18.04_amd64.deb
//安装
dpkg -i mysql-common_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i libmysqlclient20_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i libmysqlclient-dev_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i libmysqld-dev_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i mysql-community-source_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i mysql-community-client_5.7.31-1ubuntu18.04_amd64.deb
apt-get -f install
dpkg -i mysql-community-client_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i mysql-client_5.7.31-1ubuntu18.04_amd64.deb
//新增插件
apt-get install libmecab2
dpkg -i mysql-community-server_5.7.31-1ubuntu18.04_amd64.deb
apt-get -f install
dpkg -i mysql-community-server_5.7.31-1ubuntu18.04_amd64.deb
dpkg -i mysql-server_5.7.31-1ubuntu18.04_amd64.deb
安装完成，执行以下命令启动MySQL数据库
/etc/init.d/mysql start
6）MySQL新建数据库testdb
mysql -uroot -proot命令进入mysql数据库，执行以下SQL语句
CREATE DATABASE testdb;
use testdb;
CREATE TABLE users (id int NOT NULL,userName varchar(64) NOT NULL,password varchar(64) NOT NULL,sex varchar(16),telephone varchar(32),PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO users (id, userName, password, sex, telephone) VALUES (1, ‘admin’, ‘25d55ad283aa400af464c76d713c07ad’, ‘男’, ‘123456789’);
7)demo容器中安装redis
apt-get install redis-server
cd /usr/bin
./redis-server &
8）运行demo
cd /usr/app
java -jar demo.jar
9)然后在浏览器中访问“http://localhost:8088”

---

总结

至此，vue+springboot的开发、调试、打包部署全过程都已经打通了，但是我们对js、java语言的语法以及各种细节还知之甚少，后续我们将结合具体实例进行细节的研究。