#!/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代理到网关 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 "$@"