使用Docker容器部署springboot+vue项目教程

目录

准备工作

难点

后端部署

一、准备工作

二、编写Dockerfile文件

三、编写compose.yml文件

四、 后端打包

前端部署

一、准备工作

2、编写nginx.conf

 3、打包

 启动

---

准备工作

首先提前安装好docker和docker-compose

在docker中安装mysql与redis。

创建一个文件夹并且进入，例如

提前了解技术：

nginx、docker-compose

难点

前端项目是通过nginx反向代理进行部署

后端部署

一、准备工作

1、复制一份application.yml配置文件命名为application-pro.yml，修改mysql和redis主机地址。

2、如果有跨域问题时，需要将其中方法中的地址改为docker中访问的地址，如果不修改，还会出现跨域问题

二、编写Dockerfile文件

方框中的用于是指定加载pro.yml文件

三、编写compose.yml文件

四、 后端打包

打包好的项目在target中，将打包好的项目进行上传到docker中

前端部署

一、准备工作

修改跨域地址，修改为后端在docker中暴露的端口号，我的是9001

修改axios网络请求的端口号

2、编写nginx.conf

在当前文件夹中创建nginx文件夹

编写nginx.conf，除了修改服务器地址，其余不用修改，服务器地址修改为你的docker服务器地址

#user  root;
worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  192.168.175.7;   #服务器地址
      location / {
          root   /usr/share/nginx/html;       
          try_files $uri $uri/ /index.html last; # 避免404
          index  index.html index.htm;

      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

 3、打包

在nginx文件夹中创建一个html文件夹用于存放前端打包项目

打包命令

 打包项目位置

首先将文件压缩然后上传到docker中html目录下

然后解压缩，并将压缩包删去

 

最后html文件夹中的内容为

nginx文件夹中的内容为

 启动

当前app文件夹中的内容有

使用docker-compose编排

编排成功会显示创建并启动了四个容器

如果出现错误可能是地址匹配不正确，将上面需要修改的地址进行修改，测试。