Docker部署前后端分离项目

一、打包

1.服务器打包

通过maven中的clear方法清理系统历史文件，再通过package方法将后端服务器整体打包，打包好以后会生成一个targe文件夹，该文件夹下会有一个后缀为jar或war的程序包，打包后生成什么后缀，取决于该系统中定义的打包方式。

2.vue打包

通过cd命令进到vue项目所在目录下，再使用npm install命令对vue项目的依赖进行加载，然后使用npm run build命令对项目进行打包，打包完成后会生成一个dist的文件夹。

二、远程传输到虚拟机上

1.新建目录

通过mkdir web创建一个名为web的文件夹，用于存放服务端程序包

通过mkdir vue创建一个名为vue的文件夹，用于存放vue项目的包

2.xshell传输

通过xshell工具，建立与虚拟机的连接，将打包好的项目包分别传入创建的两个目录下。

3.创建mysql镜像

使用docker images命令查看一下是否包含所需的远端镜像，如果不包含，则需要远端拉取。

docker pull mysql:8.0.26

将mysql镜像运行成容器

docker run -d -p 3306:3306 --name web-mysql -v /mydata:/var/lib/mysql -e MYSQL_PASSWORD=xxxxxxx mysql:8.0.26

使用docker ps可查看已运行的容器

使用navicat远端连接虚拟机上的mysql，导入数据

4.dockerfile

在运行好容器后，我们需要通过cd命令进入到服务器端目录，通过vim dockerfile命令编辑dockerfile文件，其中按i是进入编辑模式，esc退出编辑模式，进入一般模式，使用“：”（英文状态下）从一般模式进入末行模式。

在末行模式中，q！是强制退出，不保存并退出。

wq是保存修改并退出。

x是保存并退出。

修改dockerfile文件

FROM java:8
NOMULE /web-data
ADD *.jar app.jar
EXPOSE 8082
CMD ["java","jar","/app.jar"]

保存退出。

5.构建镜像

docker build -t web-chat .

查看镜像

docker images

6.运行镜像

docker run -d -p 8082:8082 --name web-chat web-chat

docker ps查看是否运行，通过端口访问系统，查看是否运行起来了。

7.vue创建镜像

cd …进入上层目录

cd vue/进入vue项目目录

vim dockerfile编辑dickerfile文件

FROM nginx
COP ./fist /usr/share/nginx/html/
EXPOSE 80

退出

8.构建镜像

docker build -t web-chat-ui .

docker images查看镜像

9.运行镜像

docker run -d -p 8081:80 --name web-chat-ui web-chat-ui

docker ps查看运行中的镜像

访问80端口查看是否已经运行成功。