添加 Drone CI/CD 前端自动化部署配置
Some checks failed
continuous-integration/drone/push Build encountered an error
Some checks failed
continuous-integration/drone/push Build encountered an error
1. 新增 .drone.yml 配置文件 - 自动安装 npm 依赖 - 自动构建生产版本 - 构建 Docker 镜像 - 自动部署到生产服务器 - 健康检查验证部署成功 2. 新增 Dockerfile - 多阶段构建:Node 编译 + Nginx 运行 - 优化镜像体积,使用 alpine 基础镜像 - 配置静态资源缓存 - 添加健康检查 3. 新增 nginx.conf - 配置前端路由支持(Vue Router history 模式) - 代理 API 请求到后端服务 - 优化 Gzip 压缩和静态资源缓存 - 支持 BladeX 系统模块路径代理 现在推送代码后,前端会自动部署到生产环境! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
71
.drone.yml
Normal file
71
.drone.yml
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: 武术系统前端自动部署
|
||||||
|
|
||||||
|
# 只在 main 分支触发
|
||||||
|
trigger:
|
||||||
|
branch:
|
||||||
|
- main
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
|
||||||
|
steps:
|
||||||
|
# 步骤1:安装依赖
|
||||||
|
- name: 安装依赖
|
||||||
|
image: node:18-alpine
|
||||||
|
volumes:
|
||||||
|
- name: npm-cache
|
||||||
|
path: /root/.npm
|
||||||
|
commands:
|
||||||
|
- echo "开始安装 npm 依赖..."
|
||||||
|
- npm install --registry=https://registry.npmmirror.com
|
||||||
|
- echo "✅ 依赖安装完成"
|
||||||
|
|
||||||
|
# 步骤2:构建生产版本
|
||||||
|
- name: 构建前端项目
|
||||||
|
image: node:18-alpine
|
||||||
|
commands:
|
||||||
|
- echo "开始构建前端项目..."
|
||||||
|
- npm run build
|
||||||
|
- ls -lh dist/
|
||||||
|
- echo "✅ 前端构建完成"
|
||||||
|
|
||||||
|
# 步骤3:构建 Docker 镜像
|
||||||
|
- name: 构建Docker镜像
|
||||||
|
image: plugins/docker
|
||||||
|
settings:
|
||||||
|
repo: martial/frontend
|
||||||
|
tags:
|
||||||
|
- latest
|
||||||
|
- ${DRONE_COMMIT_SHA:0:8}
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
|
||||||
|
# 步骤4:部署到服务器
|
||||||
|
- name: 部署到生产环境
|
||||||
|
image: appleboy/drone-ssh
|
||||||
|
settings:
|
||||||
|
host: 154.30.6.21
|
||||||
|
username: root
|
||||||
|
key:
|
||||||
|
from_secret: ssh_key
|
||||||
|
port: 22
|
||||||
|
script:
|
||||||
|
- cd /app/martial
|
||||||
|
- docker-compose pull frontend
|
||||||
|
- docker-compose up -d frontend
|
||||||
|
- docker ps | grep martial-frontend
|
||||||
|
- echo "✅ 前端部署完成"
|
||||||
|
|
||||||
|
# 步骤5:健康检查
|
||||||
|
- name: 健康检查
|
||||||
|
image: curlimages/curl:latest
|
||||||
|
commands:
|
||||||
|
- sleep 5
|
||||||
|
- curl -f http://154.30.6.21:2888 || exit 1
|
||||||
|
- echo "✅ 前端访问正常"
|
||||||
|
|
||||||
|
# 挂载卷(缓存 npm 依赖)
|
||||||
|
volumes:
|
||||||
|
- name: npm-cache
|
||||||
|
host:
|
||||||
|
path: /data/drone-cache/npm
|
||||||
37
Dockerfile
Normal file
37
Dockerfile
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# 构建阶段
|
||||||
|
FROM node:18-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /build
|
||||||
|
|
||||||
|
# 复制 package 文件
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# 安装依赖(使用国内镜像加速)
|
||||||
|
RUN npm install --registry=https://registry.npmmirror.com
|
||||||
|
|
||||||
|
# 复制源码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# 运行阶段:使用 Nginx 服务静态文件
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
LABEL maintainer="JohnSion"
|
||||||
|
LABEL description="武术比赛管理系统前端"
|
||||||
|
|
||||||
|
# 复制构建产物到 Nginx 目录
|
||||||
|
COPY --from=builder /build/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# 复制 Nginx 配置
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# 健康检查
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s CMD wget -q --spider http://localhost/ || exit 1
|
||||||
|
|
||||||
|
# 启动 Nginx
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
47
nginx.conf
Normal file
47
nginx.conf
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
|
||||||
|
# 前端静态文件目录
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip 压缩
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||||
|
|
||||||
|
# 前端路由(Vue Router history 模式)
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# API 代理到后端
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://martial-backend:8123/api/;
|
||||||
|
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_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
# BladeX 系统模块代理
|
||||||
|
location /blade-auth/ {
|
||||||
|
proxy_pass http://martial-backend:8123/blade-auth/;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /blade-system/ {
|
||||||
|
proxy_pass http://martial-backend:8123/blade-system/;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 缓存静态资源
|
||||||
|
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg)$ {
|
||||||
|
expires 7d;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user