lingyue-zhibao/deploy-frontend.sh

#!/bin/bash

# ============================================
# 灵越智报 - 前端部署到 sygpudev 服务器
# 本地构建 → 上传 dist → 配置 Nginx
# ============================================

# 颜色定义
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m'

# ========== 配置区域 ==========
SERVER_USER="root"
SERVER_HOST="sygpudev"
SERVER_PORT="${SERVER_PORT:-28529}"

# 路径配置
LOCAL_PROJECT_DIR="/home/hws/workspace/GitLab/ay/lingyue-zhibao"
LOCAL_FRONTEND_DIR="${LOCAL_PROJECT_DIR}/frontend/vue-demo"
LOCAL_DIST_DIR="${LOCAL_FRONTEND_DIR}/dist"

REMOTE_APP_DIR="/data/application/lingyue-zhibao"
REMOTE_FRONTEND_DIR="/data/web/lingyue-zhibao"
REMOTE_NGINX_CONF="/etc/nginx/conf.d/lingyue-frontend.conf"

# 后端 API 地址（前端请求代理目标）
BACKEND_API="http://127.0.0.1:8001"
# 前端监听端口
FRONTEND_PORT=28082
# ==============================

log_info()  { echo -e "${GREEN}[INFO]${NC} $1"; }
log_warn()  { echo -e "${YELLOW}[WARN]${NC} $1"; }
log_error() { echo -e "${RED}[ERROR]${NC} $1"; }
log_title() { echo -e "\n${BLUE}========== $1 ==========${NC}\n"; }

ssh_cmd() {
    ssh -p ${SERVER_PORT} ${SERVER_USER}@${SERVER_HOST} "$@"
}

# 检查服务器连接
check_connection() {
    log_title "检查服务器连接"

    if ssh_cmd "echo 'OK'" > /dev/null 2>&1; then
        log_info "服务器连接成功: ${SERVER_USER}@${SERVER_HOST}"
    else
        log_error "无法连接服务器: ${SERVER_USER}@${SERVER_HOST}"
        log_warn "请检查："
        log_warn "  1. 服务器地址是否正确"
        log_warn "  2. SSH 密钥是否配置"
        exit 1
    fi
}

# 安装依赖
install_deps() {
    log_title "安装前端依赖"

    cd ${LOCAL_FRONTEND_DIR}

    if [ ! -d "node_modules" ]; then
        log_info "安装 npm 依赖..."
        yarn install || npm install
    else
        log_info "依赖已存在，跳过安装"
    fi
}

# 本地构建
build_local() {
    log_title "本地构建前端"

    cd ${LOCAL_FRONTEND_DIR}

    # 清理旧构建
    rm -rf dist

    log_info "执行 yarn build..."
    yarn build || npm run build

    if [ ! -d "${LOCAL_DIST_DIR}" ]; then
        log_error "构建失败: dist 目录不存在"
        exit 1
    fi

    local dist_size=$(du -sh "${LOCAL_DIST_DIR}" | awk '{print $1}')
    log_info "构建完成，dist 大小: ${dist_size}"
}

# 上传 dist
upload_dist() {
    log_title "上传前端文件到服务器"

    # 创建远程目录
    ssh_cmd "mkdir -p ${REMOTE_FRONTEND_DIR}"

    # 备份旧版本
    ssh_cmd "cd ${REMOTE_APP_DIR} && \
             [ -d frontend ] && mv frontend frontend.bak.$(date +%Y%m%d%H%M%S) || true"

    # 上传新版本
    log_info "正在上传 dist 目录..."
    scp -P ${SERVER_PORT} -r "${LOCAL_DIST_DIR}" "${SERVER_USER}@${SERVER_HOST}:${REMOTE_FRONTEND_DIR}"

    # 移动文件到正确位置
    ssh_cmd "cd ${REMOTE_FRONTEND_DIR} && mv dist/* . && rmdir dist"

    local remote_size=$(ssh_cmd "du -sh ${REMOTE_FRONTEND_DIR}" | awk '{print $1}')
    log_info "上传完成，远程目录大小: ${remote_size}"
}

# 配置 Nginx
setup_nginx() {
    log_title "配置 Nginx"

    # 检查 Nginx 是否安装
    if ! ssh_cmd "which nginx" > /dev/null 2>&1; then
        log_warn "Nginx 未安装，正在安装..."
        ssh_cmd "apt update && apt install -y nginx"
    fi

    # 生成 Nginx 配置
    local nginx_conf="server {
    listen ${FRONTEND_PORT};
    server_name _;

    root ${REMOTE_FRONTEND_DIR};
    index index.html;

    # Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

    # 静态资源缓存
    location ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)\$ {
        expires 1y;
        add_header Cache-Control \"public, immutable\";
    }

    # API 代理到后端
    location /api {
        proxy_pass ${BACKEND_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;

        # WebSocket 支持
        proxy_http_version 1.1;
        proxy_set_header Upgrade \\\$http_upgrade;
        proxy_set_header Connection \"upgrade\";

        # 超时设置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # SPA 路由支持
    location / {
        try_files \\\$uri \\\$uri/ /index.html;
    }

    # 文件上传大小限制
    client_max_body_size 100M;
}"

    # 写入配置文件
    echo "${nginx_conf}" | ssh_cmd "cat > ${REMOTE_NGINX_CONF}"

    # 测试配置
    if ssh_cmd "nginx -t" 2>&1 | grep -q "successful"; then
        log_info "Nginx 配置测试通过"
    else
        log_error "Nginx 配置有误"
        ssh_cmd "nginx -t"
        exit 1
    fi

    # 重载 Nginx
    ssh_cmd "systemctl reload nginx"
    log_info "Nginx 已重载"
}

# 健康检查
health_check() {
    log_title "健康检查"

    local max_attempts=6
    local attempt=1

    while [ $attempt -le $max_attempts ]; do
        log_info "尝试 ${attempt}/${max_attempts}..."

        local response=$(ssh_cmd "curl -s -o /dev/null -w '%{http_code}' http://localhost:${FRONTEND_PORT}/ 2>/dev/null" || echo "000")

        if [ "$response" = "200" ]; then
            log_info "前端服务正常 ✓ (HTTP ${response})"
            return 0
        fi

        sleep 2
        attempt=$((attempt + 1))
    done

    log_warn "健康检查未通过，请手动检查"
}

# 完整部署
full_deploy() {
    check_connection
    install_deps
    build_local
    upload_dist
    setup_nginx
    health_check

    log_title "前端部署完成 🎉"
    
    # 获取服务器 IP
    local server_ip=$(ssh_cmd "hostname -I | awk '{print \$1}'" 2>/dev/null || echo "${SERVER_HOST}")
    
    echo -e "${GREEN}访问地址: http://${server_ip}:${FRONTEND_PORT}${NC}"
    echo ""
}

# 快速部署（跳过依赖安装）
quick_deploy() {
    if [ ! -d "${LOCAL_DIST_DIR}" ]; then
        log_error "本地 dist 不存在，请先构建或使用 deploy 命令"
        exit 1
    fi

    check_connection
    upload_dist
    setup_nginx
    health_check

    log_title "快速部署完成 🎉"
}

# 仅构建
build_only() {
    install_deps
    build_local
    log_info "构建完成，dist 目录: ${LOCAL_DIST_DIR}"
}

# 查看状态
show_status() {
    log_title "前端服务状态"

    check_connection

    if ssh_cmd "curl -s -o /dev/null -w '%{http_code}' http://localhost:${FRONTEND_PORT}/" 2>/dev/null | grep -q "200"; then
        log_info "前端服务运行中 ✓"
    else
        log_warn "前端服务未响应"
    fi

    log_info "Nginx 状态:"
    ssh_cmd "systemctl status nginx --no-pager -l" 2>/dev/null | head -10
}

# 帮助
show_help() {
    cat <<EOF
灵越智报 - 前端部署到 sygpudev 服务器

用法: ./deploy-frontend.sh [命令]

命令:
    deploy          完整部署（安装依赖 + 构建 + 上传 + 配置 Nginx）
    quick           快速部署（上传已构建的 dist + 配置 Nginx）
    build           仅本地构建
    upload          仅上传 dist（不配置 Nginx）
    nginx           仅配置 Nginx
    status          查看服务状态
    help            显示此帮助

示例:
    ./deploy-frontend.sh deploy       # 完整部署
    ./deploy-frontend.sh quick        # 快速部署（已构建过）
    ./deploy-frontend.sh build        # 仅构建

配置:
    服务器: ${SERVER_USER}@${SERVER_HOST}:${SERVER_PORT}
    前端端口: ${FRONTEND_PORT}
    后端 API: ${BACKEND_API}

EOF
}

# 主函数
main() {
    case "${1:-deploy}" in
        deploy)
            full_deploy
            ;;
        quick)
            quick_deploy
            ;;
        build)
            build_only
            ;;
        upload)
            check_connection
            upload_dist
            log_info "上传完成（未配置 Nginx）"
            ;;
        nginx)
            check_connection
            setup_nginx
            health_check
            ;;
        status)
            show_status
            ;;
        help|--help|-h)
            show_help
            ;;
        *)
            log_error "未知命令: $1"
            show_help
            exit 1
            ;;
    esac
}

main "$@"