docker 部署spring boot + vue-element-template项目

一、 环境

vmware + ubuntu 20.4

二、部署步骤

1. 后端spring boot 部署

   通过docker maven plugin生成镜像，再通过docker-compose up -d 生成container，plugin配置如下：

 
                com.spotify
                docker-maven-plugin
                0.4.11
                
                    http://{服务器ip}:2375
                    farvision/${project.artifactId}
                    true
                    
                        v0.0.1
                    
                    ${project.basedir}/src/main/docker
                    
                        
                            /
                            ${project.build.directory}
                            ${project.build.finalName}.jar
                        
                    
                    true
                
            

docker-compose.yml

version: '3'
services:
  postgresql:
    image: postgres:14.1
    container_name: postgresql
    ports:
      - 5432:5432
    volumes:
      - postgresql-data:/var/lib/postgresql/data:rw
      - ./init_db.sh:/docker-entrypoint-initdb.d/init_db.sh
    environment:
#      POSTGRES_DB: mes
      POSTGRES_PASSWORD: password
      POSTGRES_USER: postgres
    restart: always
  redis:
    image: redis:6.2.1
    container_name: redis
    ports:
      - 6379:6379
    volumes:
      - redis_data:/data
    restart: always
  backend:
    image: farvision/mes-web:latest
    container_name: aps-backend
    ports:
      - 8081:8081
    depends_on:
      - redis
      - postgresql
    restart: always
  frontend:
    image: nginx 
    container_name: aps-frontend
    ports:
      - 80:80
      - 443:443
    volumes:
      - nginx-data:/etc/nginx/:rw
      - ./dist:/usr/share/nginx/html
    privileged: true
    depends_on:
      - backend
    restart: always

volumes:
   postgresql-data:
   redis_data:
   nginx-data:

 通过上传docker-compose.yml 到ubuntu 20.4 /root/aps/目录下，执行

docker-compose up -d

既可以启动aps-backend

2.前端部署（重点）

前端项目是在vue-element-template基础上定制。

代码修改：

.  打开vue-config.js，更改

module.exports = {
  
  publicPath: '/',

为

module.exports = {
  
  publicPath: './',

. 打开.env.production

修改后端api 地址为自己的api

# base api
VUE_APP_base_API = '/mes'

在终端执行 npm run build:prod进行打包生成 dist目录并通过xftp上传到/root/aps/目录下（和docker-compose.yml）处于同一目录

. 修改nginx的default.conf文件我的在

 /var/lib/docker/volumes/aps_nginx-data/_data/conf.d (通过volumes进行映射得到）

docker restart aps-frontend重启前端容器

三、访问前端并登录系统

 到此结束。在vue-element template,有几个地方很容易混。

1. .env.production  VUE_APP_base_API

2. vue-config.js中的 proxy

    // proxy:

    // {

    //     '/mes':{

    //         target: 'http://ip:8081/',

    //         changeOrigin: true,

    //         pathRewrite:

    //         {

    //             //'^/dev-api':'/'

    //         }

    //     }

    // }

3.nginx的反向代理

4. java的跨域，如果设置了spring boot 的跨域，则nginx的反向代理可以不需要设置。