- 一、基础环境
- 二、仓库地址
- 三、需要镜像
- 四、安装第三方服务
- 1.docker-compose部署
- 2.创建网络
- 3.mysql 和 redis docker启动
- 五、部署后台服务
- 1、server/docker-compose.yml
- 2、编写配置文件
- 3、编写Makefile
- 4、打包镜像
- 5、创建网络
- 6、启动项目
- 7、升级后台服务
- 8、测试后台接口
- 9、目录结构
- 六、前端部署
- 1、打包
dist
文件 - 2、编写 nginx 配置文件
- 3、编写 Dockerfile 文件
- 4、编写 docker-compose 文件
- 5、编写 Makefile 文件
- 6、编写 docker-run.sh 文件
- 7、编写 docker-top.sh 文件
- 8、打包镜像
- 9、创建网络
- 10、启动项目
- 11、访问页面
- 12、升级服务
- 七、查看启动的服务
一、基础环境
- 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-12-22 19:32