docker 部署 aps 前后端

一、 环境

腾讯云服务器centos

二、部署步骤

1. 后端spring boot 部署

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

<!-- 构建和推动Docker镜像 -->
<plugin>
    <groupId>com.spotify</groupId>
    <artifactId>dockerfile-maven-plugin</artifactId>
    <version>${docker.maven.plugin.version}</version>
    <executions>
        <execution>
            <id>default</id>
            <goals>
                <!--如果package时不想用docker打包,就注释掉这个goal-->
                <goal>build</goal>
                <goal>push</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <contextDirectory>${project.basedir}</contextDirectory>
        <repository>${docker.repository.url}/${docker.registry.name}/${project.artifactId}</repository>
        <useMavenSettingsForAuth>true</useMavenSettingsForAuth>
        <tag>${project.version}</tag>
        <goal>push</goal>
        <buildArgs>
            <JAR_FILE>target/${project.build.finalName}.jar</JAR_FILE>
        </buildArgs>
        <skip>true</skip>
    </configuration>
</plugin>

<docker.repository.url>和docker.registry.name可改成自己私服的地址和仓库名称如阿里云,详情见代码库

具体步骤：

a. 增加系统环境变量DOCKER_HOST=http://yourserverip:2375

b. 进入aps-backend项目根目录执行,然后可在服务器上查看生成镜像

  mvn clean package -DskipTests

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
      - ./mes.sql:/docker-entrypoint-initdb.d/mes.sql
    environment:
#      POSTGRES_DB: mes
      POSTGRES_PASSWORD: postgres 
      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
    image: your-image-name:your-image-version
    container_name: aps-backend
    ports:
      - 8081:8081
    depends_on:
      - redis
      - postgresql
    restart: always
  frontend:
    image: nginx 
    container_name: aps-frontend
    ports:
      - 83:83
      - 443:443
    volumes:
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf
      - ./dist:/usr/share/nginx/html
    #privileged: true
    depends_on:
      - backend
    restart: always

volumes:
   postgresql-data:
   redis_data:

 通过上传docker-compose.yml、前端的dist文件、sql文件目录下的mes.sql拷贝到服务器 /root/aps/目录下，在/root/aps下创建conf目录,把项目中的default.conf拷贝到/root/aps/conf/目录下。

更改docker-compose.yml中的aps-backend的镜像名称为自己的镜像名称然后保存。 然后执行即可启动所有容器

   docker-compose up -d

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）处于同一目录

    server {
    listen       83;
    listen  \[::]:83;
    server\_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ location @router;
    }
    location @router {
          rewrite ^.*$ /index.html last;
    }

    location /mes {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass  http://aps-backend:8081/mes/;
    }

docker restart aps-frontend重启前端容器，云服务器记得防火墙放行83端口

三、访问前端并登录系统

 到此就完成了aps基础班的部署。