手把手教你使用Docker部署Vue+Springboot项目（详细版）

目录

前端

一、将Vue项目打包

二、将打包的dist放入到服务器中的一个文件夹中

三、在存放dist的这个文件夹中新建两个文件

四、用docker构建镜像

五、用docker构建容器

后端

六、将springboot项目打包

七、新建一个文件夹，和前端项目平级的文件夹，将打包好的jar包放进去

八、在这个文件夹中创建Dockerfile文件

九、用docker构建镜像

十、用docker构建容器

数据库

前端

一、将Vue项目打包

二、将打包的dist放入到服务器中的一个文件夹中

三、在存放dist的这个文件夹中新建两个文件

Dockerfile文件内容

FROM nginx
 
MAINTAINER onesummer
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html/

FROM nginx：该镜像是基于nginx:latest镜像构建的
 
MAINTAINER onesummer：添加说明
 
 
ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
 
COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

default.conf文件内容

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

   location ^~/energe/backend{
         proxy_pass http://127.0.0.1:5000; //修改为部署后端的IP+端口，用于前后端联通
	 proxy_read_timeout 120s;
} 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

四、用docker构建镜像

 在前端的文件夹目录下输入docker指令

dcoker build -t vue3-test-front .   //vue3-test-front是镜像名字

 五、用docker构建容器

继续输入docker指令，通过镜像构建容器

docker run -d -p 92:80 --name vue3-first-front vue3-first-front

在电脑中打开127.0.0.1:92进行测试，是否成功部署前端页面 

注：default.conf里面不需要加http

http需要删除，以下是错误示例

http{
server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

   location ^~/energe/backend{
         proxy_pass http://127.0.0.1:5000;
	 proxy_read_timeout 120s;
} 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
}

当该子配置文件加载到主配置文件时，整体结构会是这样：

http {   
http{
server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

   location ^~/energe/backend{
         proxy_pass http://127.0.0.1:5000;
	 proxy_read_timeout 120s;
} 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
}
}
}

所以就会报异常。

子配置文件的话直接这样写就OK了

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

   location ^~/energe/backend{
         proxy_pass http://127.0.0.1:5000;
	 proxy_read_timeout 120s;
} 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

后端

六、将springboot项目打包

七、新建一个文件夹，和前端项目平级的文件夹，将打包好的jar包放进去

八、在这个文件夹中创建Dockerfile文件

Dockerfile文件内容

FROM openjdk:8
ADD ./smart-recruit.jar app.jar 
EXPOSE 5000
CMD java -jar app.jar  

FROM openjdk:8   //指定了基础镜像为OpenJDK 8。
ADD ./smart-recruit.jar app.jar  /将当前目录下的smart-recruit.jar文件复制到镜像的/app目录下，并将其命名为app.jar
EXPOSE 5000  //声明了容器将监听5000端口  在springboot程序中的sever port同样要填这个端口
CMD java -jar app.jar   //设置了容器启动时运行的命令，即运行app.jar文件 

Dockerfile文件中不要加注释，否则容易报错

九、用docker构建镜像

 在后端的文件夹目录下输入docker指令

docker build -f ./Dockerfile -t vue3-test-back .

十、用docker构建容器

继续输入docker指令，通过镜像构建容器 

docker run -id -p 5000:5000 vue3-test-back

在电脑中打开127.0.0.1:92进行测试，查看是否前后端联通。

数据库

sql文件也需要通过navicat软件放入相应的服务器中的数据库中。