Docker搭建Vue+springBoot项目

指南针.

已于 2022-04-29 18:15:47 修改

阅读量2.4k

点赞数

于 2022-04-24 23:20:44 首次发布

本文链接：https://blog.csdn.net/xuhuan172/article/details/124394484

版权

一、将SpringBoot项目和Vue项目打包

1.Vue项目中的vue.config.js文件

3.在任意地方创建一个文件夹，用于存放docker-compose.yml文件以及需要部署的jar包

编写dockerfile文件

编写docker-compose.yml文件

4.在docker-compose.yml文件的目录下运行：

一、将SpringBoot项目和Vue项目打包

1.Vue项目中的vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.187.131:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  publicPath: '/'
})

这里配置了一下代理服务器用来解决跨域问题，以及构建项目后的路径，就不过多阐述了

2.SpringBoot项目配置文件

# 数据源
spring:
  datasource:
    druid:
      driver-class-name: com.mysql.cj.jdbc.Driver
      # 注意：这里的连接地址写为mysql是后面使用docker-compose搭建环境的mysql的服务名
      url: jdbc:mysql://mysql:3306/bkdb?useUnicode=true&zeroDateTimeBehavior=convertToNull&characterEncoding=UTF-8&useSSL=false
      username: root
      password: 123456
  main:
    banner-mode: off
  mvc:
    static-path-pattern: /static/**
  web:
    resources:
      static-locations: classpath:/static/
# 服务器端口号
server:
  port: 8081

#mybatis映射文件与别名
mybatis:
  mapper-locations: classpath:com/xuhuan/mapper/*.xml
  type-aliases-package: com.xuhuan.pojo
# MP全局配置
mybatis-plus:
  global-config:
    db-config:
      # 主键自增长
      id-type: auto
  type-aliases-package: com.xuhuan.pojo

除了连接mysql的url有所不同外，其他的都是按照实际需求来配置

3.打包vue项目

npm run build

4.打包SpringBoot项目

install一下，target中的jar包就是目标文件了

二、开始部署

这里使用虚拟机（CentOS7）来演示吧

docker 和 docker-compose的安装就不演示，请自行搜索一番

1.准备Nginx和Mysql的镜像

docker pull Nginx   # 这里默认使用最新版（latest）

docker pull mysql:5.7.25   # mysql使用5.7.25版本的

2.创建对应的挂载目录

这里需要挂载的就是Nginx的配置文件，html文件夹，以及log文件夹

将其创建出

mkdir /tmp/nginx/conf/   # 创建conf目录
# cd 进去
cd /tmp/nginx/conf/
# 先创建一个nginx.conf，待会儿再编写配置内容
touch nginx.conf

# 创建用于挂载的html文件夹
mkdir /tmp/nginx/html

# 创建log文件夹
mkidr /tmp/nginx/log

编写nginx.conf配置文件


user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;
    server {
    #监听端口
    listen       80;
    
    #静态资源目录
    #root home/;
    location / {
        root       /usr/share/nginx/html;
        index index.html;
    }
    
    #vue项目中的请求地址前面都需要加上api
    #发起请求的代理配置，地址包含/api的会全部替换地址并转发到proxy_pass下的地址
    location /api/ {
        rewrite ^/b/(.*)$ /$1 break;
        proxy_pass http://192.168.187.131:8081/;
    }
}




    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

3.在任意地方创建一个文件夹，用于存放docker-compose.yml文件以及需要部署的jar包

目录结构类似于下方这样吧

编写dockerfile文件

# 指定基础镜像
FROM java:8

# 拷贝java项目的包
COPY ./books_system.jar /tmp/app.jar

# 暴露端口
EXPOSE 8081

# 入口，java项目的启动命令
ENTRYPOINT java -jar /tmp/app.jar

编写docker-compose.yml文件

version: "3"
services:
  # nginx服务
  nginx:
    image: nginx:latest
    ports:
      - 80:80
    # 挂载目录，这里对应刚才创建的配置文件和牡蛎
    volumes:
      - /tmp/nginx/html:/usr/share/nginx/html
      - /tmp/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /tmp/nginx/log:/var/log/nginx
    privileged: true
  # mysql服务
  mysql:
    image: mysql:5.7.25
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=123456
  # SpringBoot项目，这里服务名就可以随意写了
  book_system:
    # 镜像名这样填即可，build完成后会生成这样的镜像
    image: book_system:latest
    # 表示运行当前目录下book文件夹下的dockerfile来构建镜像
    build: ./book
    # 端口
    ports:
      - 8081:8081
    # 依赖于mysql等待mysql启动完成后再启动这个服务
    depends_on:
      - mysql