一、基础环境

  • doocker 25.0.3
  • docker-compose v2.20.2

二、仓库地址

https://github.com/haimait/docker-compose-deploy-vue

三、需要镜像

docker pull nginx:latest
docker pull golang:alpine
docker pull mysql/mysql-server:8.0.28
docker pull redis:6.2.5

四、安装第三方服务

1.docker-compose部署

cd /data/docker/env
vim docker-comopse-env.yml

version: '3'

######## 项目依赖的环境，启动项目之前要先启动此环境 #######
######## The environment that the project depends on, starting this environment before starting the project #######

services:

  #redis容器 - Redis container
  redis:
    image: redis:6.2.5
    container_name: myredis
    ports:
      - 36379:6379
    environment:
      # 时区上海 - Time zone Shanghai (Change if needed)
      TZ: Asia/Shanghai
    volumes:
      # 数据文件 - data files
      - ./data/redis/data:/data:rw
    command: "redis-server --requirepass G62m50oigInC30sf  --appendonly yes"
    privileged: true
    restart: always
    networks:
      - gva_net

# 进入mysql服务
# docker exec -it mysql mysql -uroot -pPXDN93VRKUm8TeE7
# 进后mysql服务后创建gva库
# create database gva DEFAULT CHARSET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;
# DROP DATABASE gva;
# 导出数据库
# docker exec -i mysql mysqldump -h127.0.0.1 -uroot -pPXDN93VRKUm8TeE7 gva > /data/backupfile.sql
# 导入数据库
# docker exec -i mysql mysql -uroot -pPXDN93VRKUm8TeE7 gva < /data/backupfile.sql
  mysql:
    image: mysql/mysql-server:8.0.28
    container_name: mysql
    environment:
      # 时区上海 - Time zone Shanghai (Change if needed)
      TZ: Asia/Shanghai
      # root 密码 - root password
      MYSQL_ROOT_PASSWORD: PXDN93VRKUm8TeE7
    ports:
      - 33069:3306
    volumes:
      # 数据挂载 - Data mounting
      - ./data/mysql/data:/var/lib/mysql
      # 日志
    command:
      # 将mysql8.0默认密码策略 修改为 原先 策略 (mysql8.0对其默认策略做了更改 会导致密码无法匹配) 
      # Modify the Mysql 8.0 default password strategy to the original strategy (MySQL8.0 to change its default strategy will cause the password to be unable to match)
      --default-authentication-plugin=mysql_native_password
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_general_ci
      --explicit_defaults_for_timestamp=true
      --lower_case_table_names=1
    privileged: true
    restart: always
    networks:
      - gva_net

networks:
  gva_net:
    driver: bridge
    external: true

2.创建网络

docker network ls
docker network prune # 删除没有使用的网桥
docker network create gva_net # 创建网桥 只需要创建一次

3.mysql 和 redis docker启动

启动：
docker-comopse -f docker-comopse-env.yml up -d
停止：
docker-stop.sh -f docker-comopse-env.yml down

mysql 外网端口：33069 容器内端口：3306
root PXDN93VRKUm8TeE7
redis 外网端口：36379 容器内端口：6379
密码 G62m50oigInC30sf

五、部署后台服务

go env -w GOOS=linux
cd server
go build -o gvaServer main.go

上传到服务器中
/data/code/cyds/server # 后台服务代码目录

1、server/docker-compose.yml

version: '3.8'
services:
  gvaServer-api:
    container_name: gvaServer
    image: gvaserver:main-V1.0.1
    privileged: true
    restart: always
    ports:
      - 8888:8888
    volumes:
      - ./gvaServer:/app/gvaServer
      - ./config.docker.yaml/:/app/config.docker.yaml
      - ./resource/:/app/resource/
      - ./uploads/:/app/uploads/
      - ./log/:/app/log/
#   network_mode: host
    networks:
      - gva_net
networks:
  gva_net:
    driver: bridge
    external: true

2、编写配置文件

server/config.docker.yaml

# github.com/flipped-aurora/gin-vue-admin/server Global Configuration

# jwt configuration
jwt:
  signing-key: qmPlus
  expires-time: 7d
  buffer-time: 1d
  issuer: qmPlus
# zap logger configuration
zap:
  level: info
  format: console
  prefix: "[github.com/flipped-aurora/gin-vue-admin/server]"
  director: log
  show-line: true
  encode-level: LowercaseColorLevelEncoder
  stacktrace-key: stacktrace
  log-in-console: true

# redis configuration
redis:
  db: 0
  addr: myredis:6379 # 这里写容器内的端口
  password: "G62m50oigInC30sf"

# system configuration
system:
  env: public  # Change to "develop" to skip authentication for development mode
  addr: 8888
  db-type: mysql
  oss-type: local    # 控制oss选择走本地还是 七牛等其他仓 自行增加其他oss仓可以在 server/utils/upload/upload.go 中 NewOss函数配置
  use-redis: true     # 使用redis
  use-mongo: false     # 使用mongo
  use-multipoint: false
  # IP限制次数 一个小时15000次
  iplimit-count: 15000
  #  IP限制一个小时
  iplimit-time: 3600

# captcha configuration
captcha:
  key-long: 6
  img-width: 240
  img-height: 80
  open-captcha: 0 # 0代表一直开启，大于0代表限制次数
  open-captcha-timeout: 3600 # open-captcha大于0时才生效
  open-verify: true #前端用户是否验证验证码

# mysql connect configuration
# 未初始化之前请勿手动修改数据库信息！！！如果一定要手动初始化请看（https://gin-vue-admin.com/docs/first_master）
mysql:
  prefix: ""
  port: "3306" # 这里写容器内的端口
  config: charset=utf8mb4&parseTime=True&loc=Local
  db-name: gva
  username: root
  password: "PXDN93VRKUm8TeE7"
  path: mysql
  engine: ""
  log-mode: info
  max-idle-conns: 10
  max-open-conns: 100
  singular: false
  log-zap: false

# 跨域配置
# 需要配合 server/initialize/router.go -> `Router.Use(middleware.CorsByRules())` 使用
cors:
  mode: allow-all # 放行模式: allow-all, 放行全部; whitelist, 白名单模式, 来自白名单内域名的请求添加 cors 头; strict-whitelist 严格白名单模式, 白名单外的请求一律拒绝
  whitelist:
    - allow-origin: example1.com
      allow-headers: content-type
      allow-methods: GET, POST
      expose-headers: Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type
      allow-credentials: true # 布尔值
    - allow-origin: example2.com
      allow-headers: content-type
      allow-methods: GET, POST
      expose-headers: Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type
      allow-credentials: true # 布尔值

3、编写Makefile

.PHONY: build run deploy check

check:
    @revive ./...

build:
    @docker build -t gvaserver:main-V1.0.1 .
    @docker image prune -f
    @echo "gvaserver image build successful"

run:
#    @if [ $(shell docker ps -aq --filter name=gvaadmin --filter publish=8081) ]; then docker rm -f gvaadmin; fi
#    @docker run --name=gvaadmin -p 8081:8081 -v /root/go/src/gvaadmin/temp/logs:/gvaadmin/temp/logs  -v /root/go/src/gvaadmin/static:/gvaadmin/static  -v /root/go/src/gvaadmin/config:/gvaadmin/config -d --restart=always 10.10.11.1:8082/gvaadmin/gvaadmin:v1
#    @docker image prune -f
#    @echo "512cert_admin_api api service is running..."

deploy:
    @git checkout gvaServer
    @git pull origin gvaServer
    make build
    make run

4、打包镜像

打包镜像
make build

make build 打包镜像，第一次运行时打包，后面升级时不用再打包镜像了，已经把二进制程序和配置文件挂载出来了

查看已打镜像
docker images

5、创建网络

docker network ls
docker network prune # 删除没有使用的网桥
docker network create gva_net # 创建网桥 只需要创建一次

6、启动项目

启动命令
sh docker-run.sh

停止命令
sh docker-top.sh

docker-compose部署
启动：
docker-run.sh
停止：
docker-stop.sh

7、升级后台服务

升级只需要替换 /data/code/cyds/server/gvaServer
配置文件使用的是config.docker.yaml

8、测试后台接口

curl -XPOST 127.0.0.1:8888/base/captcha
curl -XPOST gvaServer:8888/base/captcha

9、目录结构

[root@localhost server]# tree
.
├── access.log
├── config.docker.yaml
├── config.online.yaml
├── docker-compose.yml
├── Dockerfile
├── docker-run.sh
├── docker-stop.sh
├── gvaServer
├── log # 运行会项目后自动创建
│   └── 2024-02-17
│       ├── error.log
│       └── info.log
├── Makefile
├── resource
│   ├── autocode_template
│   │   ├── readme.txt.tpl
│   │   ├── server
│   │   │   ├── api.go.tpl
│   │   │   ├── model.go.tpl
│   │   │   ├── request.go.tpl
│   │   │   ├── router.go.tpl
│   │   │   └── service.go.tpl
│   │   ├── subcontract
│   │   │   ├── api_enter.go.tpl
│   │   │   ├── data.go
│   │   │   ├── router_enter.go.tpl
│   │   │   └── service_enter.go.tpl
│   │   └── web
│   │       ├── api.js.tpl
│   │       ├── form.vue.tpl
│   │       └── table.vue.tpl
│   ├── page
│   │   ├── css
│   │   │   ├── app.7832f89c.css
│   │   │   └── chunk-vendors.a16c4353.css
│   │   ├── fonts
│   │   │   ├── element-icons.535877f5.woff
│   │   │   └── element-icons.732389de.ttf
│   │   ├── index.html
│   │   ├── js
│   │   │   ├── app.9fe02340.js
│   │   │   └── chunk-vendors.2e7c88f1.js
│   │   └── report.html
│   └── plug_template
│       ├── api
│       │   ├── api.go.tpl
│       │   └── enter.go.tpl
│       ├── config
│       │   └── config.go.tpl
│       ├── global
│       │   └── global.go.tpl
│       ├── main.go.tpl
│       ├── model
│       │   └── model.go.tpl
│       ├── router
│       │   ├── enter.go.tpl
│       │   └── router.go.tpl
│       └── service
│           ├── enter.go.tpl
│           └── service.go.tpl
└── uploads # 运行会项目后自动创建
    └── file
        ├── 551b0a16137f607c357e9b305d72e13a_20240213144558.mp4    
        └── 9cbd9a9f8a902dea8c445933f5b71ce0_20240216215313.jpg

六、前端部署

项目目录
场景：
有两个vue项目，web前端和后台管理系统的vue前端
需要nginx部署web前端和后台系统的前端静态页面（vue打包出来的dist文件）两个页面。

/data/code/cyds/view/nginx/html # 前端项目 目录已经挂载出来，升级时把dist文件里的内容直接解压到这里，不用重复打包镜像了

/data/code/cyds/view/nginx/html/admin # gva前端项目 目录已经挂载出来，升级时把dist文件里的内容直接解压到这里，不用重复打包镜像了

1、打包 dist 文件

1.打包后台系统的vue项目

修改配置文件中的接口地址
gin-vue-admin\web.env.production

#下方修改为你的线上ip
VITE_BASE_PATH = http://abc.com

npm build prod

2.打包web的vue项目

同样接口地址写 VITE_BASE_PATH = http://abc.com

npm build prod

2、编写 nginx 配置文件

scripts\nginx\api_proxy.conf

server {
  listen 80;
  server_name abc.com;
  client_max_body_size 20m;
  # 配置前端静态文件目录
  location / {
    index index.html index.htm;
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_set_header Host $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    rewrite ^/api/(.*)$ /$1 break;  #重写
    #proxy_pass http://122.114.158.1:8888; # 设置代理服务器的协议和地址
    proxy_pass http://gvaServer:8888; # 设置代理服务器的协议和地址 这里写后台容器的服务名称
  }

  location /api/swagger/index.html {
    proxy_pass http://gvaServer:8888/swagger/index.html;
  }
}

3、编写 Dockerfile 文件

Dockerfile

# production stage
FROM nginx
COPY scripts/nginx/api_proxy.conf /etc/nginx/conf.d/api_proxy.conf
COPY dist  /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4、编写 docker-compose 文件

docker-compose.yml

version: '3.8'
services:
  go-admin-api:
    container_name: gvanginx
    image: gvanginx:main-V1.0.1
    privileged: true
    restart: always
    ports:
      - 80:80
    volumes:
      - ./scripts/nginx/api_proxy.conf:/etc/nginx/conf.d/api_proxy.conf
    networks:
      - gva_net
networks:
  gva_net:
    driver: bridge
    external: true

5、编写 Makefile 文件

Makefile

.PHONY: build run deploy check

check:
    @revive ./...

build:
    @docker build -t gvanginx:main-V1.0.1 .
    @docker image prune -f
    @echo "gvanginx image build successful"

run:
#    @if [ $(shell docker ps -aq --filter name=gvaadmin --filter publish=8081) ]; then docker rm -f gvaadmin; fi
#    @docker run --name=gvaadmin -p 8081:8081 -v /root/go/src/gvaadmin/temp/logs:/gvaadmin/temp/logs  -v /root/go/src/gvaadmin/static:/gvaadmin/static  -v /root/go/src/gvaadmin/config:/gvaadmin/config -d --restart=always 10.10.11.1:8082/gvaadmin/gvaadmin:v1
#    @docker image prune -f
#    @echo "512cert_admin_api api service is running..."

deploy:
    @git checkout gvanginx
    @git pull origin gvanginx
    make build
    make run

6、编写 docker-run.sh 文件

docker-run.sh

#!/bin/bash
docker-compose up -d

docker-stop.sh

7、编写 docker-top.sh 文件

#!/bin/bash
docker-compose down

目录结构

[root@localhost nginx]# tree
.
├── docker-compose.yml
├── Dockerfile
├── docker-run.sh
├── docker-stop.sh
├── html
│   ├── admin # 后台管理系统打包的dist文件目录
│   │   ├── assets # 后台管理系统打包的dist文件目录
│   │   │   ├── 087AC4D233B64EB0api2.js
│   │   │   ├── 087AC4D233B64EB0api.css
│   │   │   ├── ……………….js
│   │   │   └── 087AC4D233B64EB0warningBar-legacy.js
│   │   └── index.html # 后台管理系统打包的dist文件目录
│   ├── assets # 前端web打包的dist文件中的文件
│   │   ├── a1-1-_3SZ6DD0.gif
│   │   ├── a2-7U69QspD.gif
│   │   ├── …………………………
│   │   └── zpzb-TgsLD-vT.gif
│   ├── index.html # 前端web打包的dist文件中的文件
│   └── vite.svg # 前端web打包的dist文件中的文件
├── Makefile
├── readme.txt
└── scripts
    └── nginx
        └── api_proxy.conf

8、打包镜像

打包镜像
make build

查看已打镜像
docker images

9、创建网络

docker network ls
docker network prune # 删除没有使用的网桥
docker network create gva_net # 创建网桥 只需要创建一次

10、启动项目

启动命令
sh docker-run.sh

停止命令
sh docker-top.sh

11、访问页面

http://abc.com
http://abc.com/admin

12、升级服务

a.升级web代码
把打包出来的dist解压在服务器的 /data/code/cyds/view/nginx/html/ 下

b.升级admin代码
把打包出来的dist改名为admin，放在服务器的 /data/code/cyds/view/nginx/html/admin 下

七、查看启动的服务

查看启动的服务
[root@localhost server]# docker ps
CONTAINER ID   IMAGE                       COMMAND                   CREATED          STATUS                 PORTS                                                          NAMES
e578a078dcde   gvanginx:main-V1.0.1        "/docker-entrypoint.…"   8 minutes ago    Up 8 minutes           0.0.0.0:80->80/tcp, :::80->80/tcp                              gvanginx
6a3370f2a05b   9f4063c1be8a                "/bin/sh -c './gvaSe…"   26 minutes ago   Up 26 minutes          0.0.0.0:8888->8888/tcp, :::8888->8888/tcp                      gvaServer
9860896ae52c   redis:6.2.5                 "docker-entrypoint.s…"   2 hours ago      Up 2 hours             0.0.0.0:36379->6379/tcp, :::36379->6379/tcp                    myredis
b4a8e74a7abf   mysql/mysql-server:8.0.28   "/entrypoint.sh --de…"   2 hours ago      Up 2 hours (healthy)   33060-33061/tcp, 0.0.0.0:33069->3306/tcp, :::33069->3306/tcp   mysql
作者：海马  创建时间：2024-02-14 23:01
最后编辑：海马  更新时间：2024-05-10 15:32