docker-compose部署Springboot+vue前后端分离项目实战以开源项目renren-fast为例，实战

环境准备

服务器环境：

安装并配置好以下环境：Docker、Docker-compose

代码样例：renren-fast

前端项目地址：https://gitee.com/renrenio/renren-fast-vue.git
后端项目地址：https://gitee.com/renrenio/renren-fast.git

注意:node-sass依赖的下载，`node Js`使用12以下版本
"node-sass": "4.14.1"

项目编译

renren-fast-vue：依次执行以下命令，生成dist目录

# 安装依赖
npm install
# 启动服务
npm run dev
# 构建生产环境
npm run build --prod

renren-fast: maven编译生成jar包

mvn clean package -Dmaven.test.skip=true

`Dockerfile`配置

renren-fast-vue

nginx配置：renren-fast-vue.conf

server {
    listen 80;
    server_name localhost;
    
    # 打包好的dist目录文件，放置到这个目录下
    root /data/;
          
    location /renren-fast {
       proxy_pass http://renren-fast:8080;
       #proxy_set_header Host $http_host;
       proxy_connect_timeout 15s;
       proxy_send_timeout 15s;
       proxy_read_timeout 15s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       client_max_body_size 2m;
    }
}

Dockerfile:

FROM nginx

MAINTAINER "scorpio<scorpio@qq.com>"

#设置时区
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone

COPY ./dist /data

RUN rm /etc/nginx/conf.d/default.conf

COPY renren-fast-vue.conf /etc/nginx/conf.d/

RUN /bin/bash -c 'echo vue UI init ok'

renren-fast

application-dev.yml:

spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        druid:
            driver-class-name: com.mysql.cj.jdbc.Driver
            url: jdbc:mysql://${MYSQL_SERVER:127.0.0.1:3306}/renren_fast?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
            username: ${MYSQL_USER:root}
            password: ${MYSQL_PASSWORD:123456}
            initial-size: 10
            max-active: 100
            min-idle: 10
            max-wait: 60000
            pool-prepared-statements: true
            max-pool-prepared-statement-per-connection-size: 20
            time-between-eviction-runs-millis: 60000
            min-evictable-idle-time-millis: 300000
            #Oracle需要打开注释
            #validation-query: SELECT 1 FROM DUAL
            test-while-idle: true
            test-on-borrow: false
            test-on-return: false
            stat-view-servlet:
                enabled: true
                url-pattern: /druid/*
                #login-username: admin
                #login-password: admin
            filter:
                stat:
                    log-slow-sql: true
                    slow-sql-millis: 1000
                    merge-sql: false
                wall:
                    config:
                        multi-statement-allow: true

Dockerfile:

FROM java:8
MAINTAINER "scorpio<scorpio@qq.com>"
#设置时区
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone
# 定义的持久化存储，SpringBoot应用内置的tomcat默认工作目录为/tmp
VOLUME /tmp
EXPOSE 8080
# 设置环境变量
ENV JAVA_OPTS="" \
    MYSQL_SERVER="" \
    MYSQL_USER="" \
    MYSQL_PASSWORD=""
COPY renren-fast.jar app.jar
CMD java $JAVA_OPTS -jar app.jar

docker-compose配置

docker构建本地镜像:

# 注：docker-compose启动的时候会自动构建镜像，此步骤可省略
# 构建前端镜像
docker build -t /home/scorpio/renren-fast/renren-fast-vue .
# 构建后台镜像
docker build -t /home/scorpio/renren-fast/renren-fast .

docker-compose.yml:

version: '3'
services:
  # 数据库
  renren-mysql:
    image: mysql:5.7
    container_name: renren-mysql
    restart: always
    ports:
      - "3306:3306"
    volumes:
      # mysql的数据文件
      - /home/docker/mysql/data:/var/lib/mysql
      # mysql的配置文件
      - /home/docker/mysql/config:/etc/mysql/conf.d
    environment:
      TZ: Asia/Shanghai
      # root用户密码
      MYSQL_ROOT_PASSWORD: avit123
  #后台服务
  renren-fast:
    build:
      context: ./renren-fast
    environment:
      MYSQL_SERVER: renren-mysql:3306
      MYSQL_USER: root
      MYSQL_PASSWORD: avit123
      JAVA_OPTS: "-server -XX:+UseG1GC -Xmx2g -XX:MaxGCPauseMillis=200 -XX:-OmitStackTraceInFastThrow -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=logs/java_heapdump.hprof -XX:-UseLargePages -Xloggc:logs/gc.log -verbose:gc -XX:+PrintGCDetails -XX:+PrintGCDateStamps -XX:+PrintGCTimeStamps -XX:+UseGCLogFileRotation -XX:NumberOfGCLogFiles=10 -XX:GCLogFileSize=100M"
    container_name: renren-fast
    image: renren-fast
    restart: always
    ports:
      - "8080:8080"
  # 前端UI
  renren-fast-vue:
    build:
      context: ./renren-fast-vue
    restart: always
    container_name: renren-fast-vue
    image: renren-fast-vue
    ports:
      - "8001:8001"

项目部署

#文件目录结构
[root@3 scorpio]# tree renren-fast/ -L 2
renren-fast/
├── docker-compose.yml
├── renren-fast
│   ├── Dockerfile
│   └── renren-fast.jar
└── renren-fast-vue
    ├── dist
    ├── Dockerfile
    └── renren-fast-vue.conf
# 启动数据库，导入sql
docker-compose up -d renren-mysql
# 启动项目
[root@3 scorpio]# docker-compose up -d

docker-compose部署Springboot+vue前后端分离项目实战

环境准备

项目编译

Dockerfile配置

docker-compose配置

项目部署

`Dockerfile`配置