docker-compose采用前后端分离部署vue和springboot项目

前置准备

创建目录java-vue，一切操作都是在java-vue目录下执行

1 构建springboot后端镜像

1.1 打包上传到服务器

搭建一个springboot项目、配置好跨域、写一个测试controller、打包上传至服务器

1.2 编辑Dockerfile-java

FROM openjdk:8-jdk-alpine
WORKDIR /app
COPY base-auth-0.0.1-SNAPSHOT.jar base-auth-0.0.1-SNAPSHOT.jar
CMD ["java","-jar","base-auth-0.0.1-SNAPSHOT.jar"]
1
2
3
4

1.3 编辑docker-compose.yaml文件

version: '3.1'
services:
  base-auth:
    restart: always
    build:
      context: .
      dockerfile: Dockerfile-java
    ports:
      - 8088:8080
    environment:
      logging.file.path: /log/
      server.port: 8080
      TZ: Asia/Shanghai
1
2
3
4
5
6
7
8
9
10
11
12
13

2 构建vue镜像

2.1 使用axios请求接口

request.js

import axios from 'axios'

// const url = 'http://localhost:8088'
// 121.4.119.16:8091 为nginx配置的反向代理的地址
const url = 'http://121.4.119.16:8091/api'
export const service = axios.create({
        // eslint-disable-next-line no-undef
        baseURL: url, // url = base url + request url
        // withCredentials: true, // send cookies when cross-domain requests
        timeout: 300000 // request timeout
    }
)

1
2
3
4
5
6
7
8
9
10
11
12
13

test.vue

<template>

<button @click = "getData">send requestbutton>
  <select v-model="method">
    <option value="get">getoption>
    <option value="post">postoption>
  select>
  <input v-model="param"/>
  <br>
  res:{{this.data}}

template>

<script>
import {service} from "@/utils/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test",

  data() {
    return {
      data: "",
      param:"",
      method:"get",
    }
  },

  methods:{
    getData(){
      if (this.method==="get"){
        service.get("/test/test1/?param="+this.param).then(res => {
          console.log(res.data)
          this.data = res.data;
        })
      }
      if (this.method==="post"){
        service.post("/test/test1",this.param).then(res => {
          console.log(res.data)
          this.data = res.data;
        })
      }

    }
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2.2 打包上传至服务器

npm run build生成dist，打包上传至服务器

2.3 准备nginx配置文件nginx.conf

user root;
worker_processes auto;
error_log /var/log/nginx/error.log info;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
daemon off;


events {
    use epoll;
    worker_connections 256;
}

http {
    log_format main escape=json '$remote_addr - $remote_user [$time_local] "$request" '
                                '$status $body_bytes_sent "$http_referer" '
                                '"$http_user_agent" "$http_x_forwarded_for" $request_body';

    access_log  /var/log/nginx/access.log  main;
   
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    include             /etc/nginx/conf.d/*.conf;
    sendfile            on;
    keepalive_timeout   65;
    tcp_nopush          on;
    tcp_nodelay         on;
    types_hash_max_size 2048;

    server {
        listen      80 default_server;
        listen      [::]:80 default_server;
        charset     utf-8;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods *;
        
        # dist为vue打包后的h5文件夹
        location / {
          root /dist;
        }

        # 反向代理，转发到java服务
        # ex：http:127.0.0.1:80/api/test/test1 -> http:base-auth:8080/test/test1
        # 将'/api/'后面的路径直接拼接到http://base-auth:8080/后面
        location /api/ {
          proxy_pass http://base-auth:8080/;
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

2.4 编辑Dockerfile-vue

FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist /dist
CMD nginx
1
2
3
4

2.5 编辑docker-compose.yaml文件

version: '3.1'
services:
  base-auth:
    restart: always
    build:
      context: .
      dockerfile: Dockerfile-java
    ports:
      - 8088:8080
    environment:
      logging.file.path: /log/
      server.port: 8080
      TZ: Asia/Shanghai
  vue:
    restart: always
    build:
      context: .
      dockerfile: Dockerfile-vue
    ports:
      - "8091:80"
    environment:
      TZ: Asia/Shanghai
    volumes:
      # 映射nginx日志
      - ./nginx-log:/var/log/nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3 构建镜像并启动服务

上述步骤结束后，目录结构如下

执行docker-compose up -d --build

查看日志：

4 测试服务