手把手教你用Docke+Docker-Compose部署SpringBoot+Vue+Mysql项目

秦川Code

已于 2023-11-18 17:37:39 修改

阅读量782

点赞数 2

分类专栏： Docker 文章标签： docker spring boot vue.js

于 2023-11-18 17:31:02 首次发布

本文链接：https://blog.csdn.net/m0_57288751/article/details/134479883

版权

Docker 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

最近写完了一个SpringBoot+Vue的项目，企业进销存系统，想用docker部署到服务器上去，找了很多文章都没找到合适的，折腾了两天终于部署上去了，所以把这个过程记录下来，方便小伙伴们参考
服务器：华为云
开放常用端口：比如mysql的3306，后端的8080等等
这个在你的服务器网页控制台的安全组里面可以更改
现在的服务器都有一键开放常用端口的

工具：Final Shell 连接服务器
下载链接：http://www.hostbuf.com/downloads/finalshell_install.exe

Navicat：连接数据库
链接：https://pan.baidu.com/s/1UZyRCedMp-SSiKlI7zROHg?pwd=6666
提取码：6666

后端配置

在对后端项目进行打包前，我们必须要做一些更改
我们平时开发一个简单的项目就一个yml配置文件，application.yml文件
但是这是我们得到开发文件，我们在服务器上不能使用这个文件
所以我们再新建一个application-pro.yml作为我们的配置文件
那怎么让项目指定使用这个application-pro.yml作为我们的配置文件呢
所以我们新建一个application.properties来帮助我们指定配置文件
在这里插入图片描述

下面是application-pro.yml

server:
  port: 8080

# 数据库配置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root# 服务器用户名
    password: 你的服务器mysql密码# 服务器mysql密码
    url: jdbc:mysql://mysql:3306/psi_manager?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

# 配置mybatis实体和xml映射
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.entity
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

# 分页
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

ip: 60.204.154.92

在这里插入图片描述
这里指的是你的docker里面的mysql容器名称，这里指定mysql，后面在docker-compose.yml文件里面会指定的

后端打包

在这里插入图片描述
先clean，再package，就得到了jar包

后端的配置和打包就结束了，我们去前端

前端配置

在这里插入图片描述
我们现在是部署到服务器上了，那肯定不能还是生产环境下的配置了，和后端配置一样，我们得再新建一个服务器配置文件，然后指向服务器配置文件，如下

前端打包

在这里插入图片描述
打包之后我们会得到一个dist文件夹

到这里前端的打包也完成了

准备docker配置文件

光打包前后端还不够，我们要准备docker配置文件，在springboot目录下新建
在这里插入图片描述
dockerfile如下

#依赖jdk8环境
FROM openjdk:8

#对外暴露8085
EXPOSE 8080
#复制server-1.0-SNAPSHOT到docker容器中并命名为app.jar
ADD springboot-0.0.1-SNAPSHOT.jar app.jar
#执行命令
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

在这里插入图片描述
docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:latest
    ports:
      - 80:80
    volumes:
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true
  mysql:
    image: mysql:8
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=123456
  springboot:
    image: springboot:latest
    build: .
    ports:
      - 8080:8080
    volumes:
      - /usr/photo:/usr/photo
    depends_on:
      - mysql
#volumes:
#  psi:

在这里插入图片描述

准备文件一览

在这里插入图片描述
dist是前端打包文件
files是我的图片文件夹，你们不用理会
docker-compose.yml是docker配置文件
dockerfile是docker配置文件
psi_manager.sql是数据库脚本
最后一个是后端打包文件

在服务器上安装docker和dockercompose

安装docker

使用Final Shell 连接服务器
在这里插入图片描述
安装一些软件包

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

添加docker官方仓库

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

安装docker引擎

sudo yum install docker-ce docker-ce-cli containerd.io

启动docker

systemctl start docker

设置为开机启动

systemctl enable docker

验证安装

docker --version

安装成功
在这里插入图片描述

安装docker-compose

从github上拉取

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

添加权限

sudo chmod +x /usr/local/bin/docker-compose

验证安装

docker-compose --version

我由于网络原因安装失败，所以我是手动安装的
手动第一步：清理

sudo rm /usr/local/bin/docker-compose
rm -rf ~/.docker/compose

运行以下命令确保 Docker Compose 已被成功删除
docker-compose --version

手动第二步：从github上手动下载文件
https://github.com/docker/compose/releases
选择在这里插入图片描述
手动第三步：
传输到云服务器上的
/usr/local/bin/docker-compose
记得修改文件名为docker-compose
手动第四步：

然后设置执行权限
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

把准备文件放到服务器对应位置上

在服务器的/root文件夹下面新建一个文件夹，然后把你的准备文件放上去
在这里插入图片描述
后端的文件我们就放完了，接着放前端的文件
在服务器的/root下新建一个nginx，在nginx下新建html和nginx.conf

把我们的前端打包文件dist下的所有文件都放到这里面

nginx.conf也别忘了，接下里书写里面的配置内容
在这里插入图片描述
nginx.conf

#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  60.204.154.92; # 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!!!
        root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
   }

}