写在前面

ps：因为docker容器如果没有配置统一网络的话，如果vue使用localhost连接后端是会连接失败的。两种方法，一是配置统一网络，二是将localhost改成云服务器ip。

一、将本地vue和springboot项目打包

1、vue项目打包命令

npm run buide

2、springboot项目打包

maven中的package命令

二、构建vue前端镜像

1、将vue打包生成的disk文件上传到云服务器

cd /home
mkdir time_todolist
mkdir vue_time

2、将disk文件放入vue_time文件夹下

3、在同文件夹下（vue_time）编写Dockerfile文件

touch Dockerfile
vim Dockerfile

# 设置基础镜像
FROM nginx:1.15
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 暴露端口
EXPOSE 80

4、运行打包命令打包成docker镜像

# vue_time为自定义镜像名字
[root@iZ8vb9n5juyckzozuq2wgfZ vue_time] docker build -t vue_time .

5、查看镜像

docker images


[root@iZ8vb9n5juyckzozuq2wgfZ vue_time]# docker images
REPOSITORY        TAG       IMAGE ID       CREATED         SIZE
vue_time          latest    f7c9e8631b97   17 hours ago    110MB
springboot_time   latest    c7f1f7aba95b   17 hours ago    722MB
mysql             5.7       f07dfa83b528   13 days ago     448MB
openjdk           latest    e105e26a0a75   2 weeks ago     486MB
tomcat            latest    feba8d001e3f   2 weeks ago     649MB
nginx             latest    ae2feff98a0c   2 weeks ago     133MB
mysql             latest    ab2f358b8612   3 weeks ago     545MB
mysql             8.0.18    ed1ffcb5eff3   12 months ago   456MB
nginx             1.15      53f3fd8007f7   20 months ago   109MB
java              8         d23bdf5b1b1b   3 years ago     643MB
java              latest    d23bdf5b1b1b   3 years ago     643MB

6、运行镜像

docker run -d --name vue_time -p 80:80 vue_time

7、查看容器是否成功

docker ps 

[root@iZ8vb9n5juyckzozuq2wgfZ vue_time] docker ps
CONTAINER ID   IMAGE             COMMAND                  CREATED        STATUS        PORTS                               NAMES
c3de18f2083c   vue_time          "nginx -g 'daemon of…"   17 hours ago   Up 17 hours   0.0.0.0:80->80/tcp                  vue_time

三、构建springboot后端镜像

1、将springboot打包好的jar包传到云服务器

cd /home/time_todolist
mkdir springboot_time

2、将jar文件放入springboot_time文件夹下

3、在同文件夹下（springboot_time）编写Dockerfile文件

touch Dockerfile
vim Dockerfile

FROM java:8
VOLUME /tmp
ADD retime-0.0.1-SNAPSHOT.jar /app.jar
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

4、运行打包命令打包成docker镜像

# springboot_time为自定义镜像名字
[root@iZ8vb9n5juyckzozuq2wgfZ springboot_time] docker build -t springboot_time .

5、查看镜像

docker images


[root@iZ8vb9n5juyckzozuq2wgfZ vue_time]# docker images
REPOSITORY        TAG       IMAGE ID       CREATED         SIZE
vue_time          latest    f7c9e8631b97   17 hours ago    110MB
springboot_time   latest    c7f1f7aba95b   17 hours ago    722MB
mysql             5.7       f07dfa83b528   13 days ago     448MB
openjdk           latest    e105e26a0a75   2 weeks ago     486MB
tomcat            latest    feba8d001e3f   2 weeks ago     649MB
nginx             latest    ae2feff98a0c   2 weeks ago     133MB
mysql             latest    ab2f358b8612   3 weeks ago     545MB
mysql             8.0.18    ed1ffcb5eff3   12 months ago   456MB
nginx             1.15      53f3fd8007f7   20 months ago   109MB
java              8         d23bdf5b1b1b   3 years ago     643MB
java              latest    d23bdf5b1b1b   3 years ago     643MB

6、运行容器

docker run -d --name springboot_time -p 9002:9002 springboot_time

7、查看容器是否成功

[root@iZ8vb9n5juyckzozuq2wgfZ springboot_time]# docker ps
CONTAINER ID   IMAGE             COMMAND                  CREATED        STATUS        PORTS                               NAMES
c3de18f2083c   vue_time          "nginx -g 'daemon of…"   17 hours ago   Up 17 hours   0.0.0.0:80->80/tcp                  vue_time
8da53c2a0c9d   springboot_time   "sh -c 'java $JAVA_O…"   17 hours ago   Up 17 hours                                       springboot_time

四、拉取mysql镜像

1、使用docker拉取mysql镜像

docker pull mysql:5.7

2、运行mysql容器

docker run -d --name vue_mysql -p 3306:3306 mysql:5.7

3、进入mysql容器并配置密码

docker exec -it vue_mysql /bin/bash
# 改密码方面就不再赘述了

五、完成