fundplatform/scripts/deploy-frontend-nginx.sh

#!/bin/bash

# ============================================
# 前端Nginx部署脚本
# 用法: ./deploy-frontend-nginx.sh [项目名] [网关地址]
# 示例: 
#   ./deploy-frontend-nginx.sh                    # 部署所有前端项目
#   ./deploy-frontend-nginx.sh admin              # 只部署fund-admin
#   ./deploy-frontend-nginx.sh mobile             # 只部署fund-mobile
#   ./deploy-frontend-nginx.sh admin 192.168.1.100:8000  # 指定网关地址
# ============================================

set -e

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

# 项目根目录
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(cd "${SCRIPT_DIR}/.." && pwd)"
DEPLOY_DIR="${PROJECT_ROOT}/deploy"

# 默认网关地址
GATEWAY_HOST="${2:-localhost:8000}"

# 前端项目配置
declare -A FRONTEND_PROJECTS=(
    ["admin"]="fund-admin"
    ["mobile"]="fund-mobile"
)

# 创建deploy目录
mkdir -p "${DEPLOY_DIR}"

# 打印帮助信息
print_help() {
    echo "用法: $0 [项目名] [网关地址]"
    echo ""
    echo "可用项目:"
    echo "  admin    - 管理后台 (fund-admin)"
    echo "  mobile   - 移动端 (fund-mobile)"
    echo "  all      - 部署所有前端项目 (默认)"
    echo ""
    echo "参数:"
    echo "  网关地址  - API网关地址，默认为 localhost:8000"
    echo ""
    echo "示例:"
    echo "  $0                              # 部署所有前端项目"
    echo "  $0 admin                        # 只部署管理后台"
    echo "  $0 admin 192.168.1.100:8000     # 指定网关地址"
}

# 检查Node.js环境
check_node() {
    if ! command -v node &> /dev/null; then
        echo -e "${RED}错误: 未安装Node.js，请先安装Node.js${NC}"
        exit 1
    fi
    
    NODE_VERSION=$(node -v)
    echo -e "${GREEN}Node.js版本: ${NODE_VERSION}${NC}"
}

# 生成部署用的nginx配置
generate_nginx_conf() {
    local project_name=$1
    local gateway_host=$2
    local output_file=$3
    
    cat > "${output_file}" << EOF
# ${project_name} Nginx配置
# 生成时间: $(date '+%Y-%m-%d %H:%M:%S')
# 网关地址: ${gateway_host}

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip压缩
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

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

    # API代理到网关（/fund前缀）
    location /fund/ {
        proxy_pass http://${gateway_host}/fund/;
        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;
        
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # 文件上传大小限制
        client_max_body_size 100m;
    }
    
    # 兼容旧版/api代理（可选，逐步迁移后可删除）
    location /api/ {
        proxy_pass http://${gateway_host}/;
        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;
        
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # 文件上传大小限制
        client_max_body_size 100m;
    }

    # Vue Router History模式支持
    location / {
        try_files \$uri \$uri/ /index.html;
    }

    # 安全头
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # 错误页面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
EOF
}

# 生成部署说明
generate_deploy_readme() {
    local project_name=$1
    local output_file=$2
    
    cat > "${output_file}" << 'EOF'
# Nginx部署说明

## 1. 目录结构
```
/usr/share/nginx/html/
├── index.html
├── assets/
│   ├── *.js
│   ├── *.css
│   └── ...
└── vite.svg
```

## 2. Nginx配置
将 nginx.conf 复制到 Nginx 配置目录：
```bash
# CentOS/RHEL
sudo cp nginx.conf /etc/nginx/conf.d/${project_name}.conf

# Ubuntu/Debian
sudo cp nginx.conf /etc/nginx/sites-available/${project_name}
sudo ln -s /etc/nginx/sites-available/${project_name} /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重载配置
sudo nginx -s reload
```

## 3. 部署文件
```bash
# 解压到Nginx目录
sudo unzip ${project_name}.zip -d /usr/share/nginx/html/
```

## 4. 修改网关地址
如果需要修改API网关地址，请编辑 nginx.conf 中的 proxy_pass 配置：
```nginx
location /api/ {
    proxy_pass http://YOUR_GATEWAY_HOST:PORT/;
    ...
}
```

## 5. 常用命令
```bash
# 检查Nginx状态
sudo systemctl status nginx

# 重启Nginx
sudo systemctl restart nginx

# 查看错误日志
sudo tail -f /var/log/nginx/error.log
```
EOF
    
    # 替换项目名
    sed -i "s/\${project_name}/${project_name}/g" "${output_file}"
}

# 部署单个前端项目
deploy_project() {
    local key=$1
    local project_name=${FRONTEND_PROJECTS[$key]}
    local project_dir="${PROJECT_ROOT}/${project_name}"
    local build_dir="${PROJECT_ROOT}/.build/${project_name}"
    local output_file="${DEPLOY_DIR}/${project_name}-nginx.zip"
    
    echo ""
    echo "=========================================="
    echo -e "${YELLOW}开始部署: ${project_name}${NC}"
    echo "=========================================="
    
    # 检查项目目录是否存在
    if [ ! -d "${project_dir}" ]; then
        echo -e "${RED}错误: 项目目录不存在 ${project_dir}${NC}"
        return 1
    fi
    
    # 清理并创建构建目录
    rm -rf "${build_dir}"
    mkdir -p "${build_dir}"
    
    cd "${project_dir}"
    
    # 安装依赖
    echo -e "${YELLOW}正在安装依赖...${NC}"
    npm install --silent
    
    # 执行构建
    echo -e "${YELLOW}正在编译项目...${NC}"
    npm run build:prod
    
    # 检查dist目录是否存在
    if [ ! -d "dist" ]; then
        echo -e "${RED}错误: 构建失败，未生成dist目录${NC}"
        return 1
    fi
    
    # 复制构建产物到构建目录
    echo -e "${YELLOW}正在准备部署文件...${NC}"
    cp -r dist/* "${build_dir}/"
    
    # 生成nginx配置
    generate_nginx_conf "${project_name}" "${GATEWAY_HOST}" "${build_dir}/nginx.conf"
    
    # 生成部署说明
    generate_deploy_readme "${project_name}" "${build_dir}/README.txt"
    
    # 删除旧的zip文件
    if [ -f "${output_file}" ]; then
        rm -f "${output_file}"
    fi
    
    # 打包
    echo -e "${YELLOW}正在打包...${NC}"
    cd "${build_dir}"
    zip -r "${output_file}" . -x "*.DS_Store" -x "__MACOSX/*"
    
    # 获取文件大小
    local file_size=$(du -h "${output_file}" | cut -f1)
    
    # 清理构建目录
    rm -rf "${build_dir}"
    
    echo -e "${GREEN}部署完成: ${output_file} (${file_size})${NC}"
    echo -e "${BLUE}网关地址: ${GATEWAY_HOST}${NC}"
    
    # 返回项目根目录
    cd "${PROJECT_ROOT}"
}

# 主函数
main() {
    local target=${1:-"all"}
    
    echo "=========================================="
    echo "  前端Nginx部署脚本"
    echo "=========================================="
    echo "项目根目录: ${PROJECT_ROOT}"
    echo "输出目录: ${DEPLOY_DIR}"
    echo "目标项目: ${target}"
    echo "网关地址: ${GATEWAY_HOST}"
    echo ""
    
    # 环境检查
    check_node
    
    # 创建deploy目录
    mkdir -p "${DEPLOY_DIR}"
    
    local start_time=$(date +%s)
    
    case "${target}" in
        admin|mobile)
            deploy_project "${target}"
            ;;
        all)
            for key in "${!FRONTEND_PROJECTS[@]}"; do
                deploy_project "${key}"
            done
            ;;
        -h|--help|help)
            print_help
            exit 0
            ;;
        *)
            echo -e "${RED}错误: 未知项目 '${target}'${NC}"
            print_help
            exit 1
            ;;
    esac
    
    local end_time=$(date +%s)
    local duration=$((end_time - start_time))
    
    echo ""
    echo "=========================================="
    echo -e "${GREEN}所有部署任务完成！${NC}"
    echo "总耗时: ${duration}秒"
    echo "=========================================="
    echo ""
    echo "部署文件列表:"
    ls -lh "${DEPLOY_DIR}"/*-nginx.zip 2>/dev/null || echo "无部署文件"
    echo ""
    echo "部署步骤:"
    echo "1. 上传zip文件到服务器"
    echo "2. 解压到Nginx目录: unzip ${project_name}-nginx.zip -d /usr/share/nginx/html/"
    echo "3. 复制nginx配置: cp nginx.conf /etc/nginx/conf.d/"
    echo "4. 重载Nginx: nginx -s reload"
}

main "$@"