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

一、环境

vmware + ubuntu 20.4

二、部署步骤

1. 后端spring boot 部署

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

 <plugin>
                <groupId>com.spotify</groupId>
                <artifactId>docker-maven-plugin</artifactId>
                <version>0.4.11</version>
                <configuration>
                    <dockerHost>http://{服务器ip}:2375</dockerHost>
                    <imageName>farvision/${project.artifactId}</imageName>
                    <forceTags>true</forceTags>
                    <imageTags>
                        <imageTag>v0.0.1</imageTag>
                    </imageTags>
                    <dockerDirectory>${project.basedir}/src/main/docker</dockerDirectory>
                    <resources>
                        <resource>
                            <targetPath>/</targetPath>
                            <directory>${project.build.directory}</directory>
                            <include>${project.build.finalName}.jar</include>
                        </resource>
                    </resources>
                    <skipDockerBuild>true</skipDockerBuild>
                </configuration>
            </plugin>

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 = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',

为

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  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的反向代理可以不需要设置。