前置准备
创建目录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.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
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
}
)
test.vue
<template>
<button @click = "getData">send request</button>
<select v-model="method">
<option value="get">get</option>
<option value="post">post</option>
</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>
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/;
}
}
}
2.4 编辑Dockerfile-vue
FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist /dist
CMD nginx
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
3 构建镜像并启动服务
上述步骤结束后,目录结构如下
执行docker-compose up -d --build
查看日志: