Tolan/scripts/frontend-build-prod.sh

#!/bin/bash

# Tolan前端生产环境打包脚本
# 用于将React项目打包成生产环境的静态文件

set -e  # 遇到错误时退出

echo "=========================================="
echo "📦 Tolan前端生产环境打包"
echo "=========================================="

# 项目根目录
PROJECT_ROOT=$(dirname "$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)")
FRONTEND_DIR="$PROJECT_ROOT/frontend"

echo "📁 项目根目录: $PROJECT_ROOT"
echo "🎨 前端目录: $FRONTEND_DIR"

# 检查前端目录
if [ ! -d "$FRONTEND_DIR" ]; then
    echo "❌ 前端目录不存在: $FRONTEND_DIR"
    exit 1
fi

# 进入前端目录
cd "$FRONTEND_DIR"
echo "📂 当前目录: $(pwd)"

# 检查package.json
if [ ! -f "package.json" ]; then
    echo "❌ package.json不存在，请确认是否为有效的前端项目"
    exit 1
fi

echo "✅ 发现package.json，开始打包流程..."

# 检查Node.js和npm
echo "🔍 检查环境..."
if ! command -v node &> /dev/null; then
    echo "❌ 未找到Node.js，请先安装"
    exit 1
fi

if ! command -v npm &> /dev/null; then
    echo "❌ 未找到npm，请先安装"
    exit 1
fi

NODE_VERSION=$(node --version)
NPM_VERSION=$(npm --version)
echo "✅ Node.js版本: $NODE_VERSION"
echo "✅ npm版本: $NPM_VERSION"

# 检查环境配置文件
echo "🔧 检查环境配置..."

# 使用production.env作为生产环境配置
if [ -f "production.env" ]; then
    echo "✅ 发现生产环境配置文件: production.env"
    # 复制为标准的.env.production文件名
    cp production.env .env.production
    echo "📋 已复制为.env.production"
else
    echo "⚠️  未找到production.env，将使用默认配置"
fi

# 清理之前的构建文件
echo "🧹 清理之前的构建文件..."
if [ -d "build" ]; then
    rm -rf build
    echo "✅ 已清理build目录"
fi

# 安装依赖
echo "📦 安装依赖包..."
npm ci --only=production || npm install

# 设置构建时间戳
export REACT_APP_BUILD_TIME=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
echo "⏰ 构建时间: $REACT_APP_BUILD_TIME"

# 开始构建
echo "🏗️  开始生产环境构建..."
echo "----------------------------------------"

# 设置生产环境变量
export NODE_ENV=production
export GENERATE_SOURCEMAP=false
export INLINE_RUNTIME_CHUNK=false

# 执行构建
npm run build

echo "----------------------------------------"

# 检查构建结果
if [ -d "build" ]; then
    BUILD_SIZE=$(du -sh build | cut -f1)
    FILE_COUNT=$(find build -type f | wc -l)
    echo "✅ 构建成功完成！"
    echo "📊 构建结果:"
    echo "   - 构建目录: build/"
    echo "   - 总大小: $BUILD_SIZE"
    echo "   - 文件数量: $FILE_COUNT"
    echo ""
    
    # 显示主要文件
    echo "📋 主要构建文件:"
    if [ -f "build/index.html" ]; then
        echo "   ✅ index.html"
    fi
    
    if [ -d "build/static/js" ]; then
        JS_FILES=$(find build/static/js -name "*.js" | wc -l)
        echo "   ✅ JavaScript文件: $JS_FILES 个"
    fi
    
    if [ -d "build/static/css" ]; then
        CSS_FILES=$(find build/static/css -name "*.css" | wc -l)
        echo "   ✅ CSS文件: $CSS_FILES 个"
    fi
    
else
    echo "❌ 构建失败，未找到build目录"
    exit 1
fi

echo ""
echo "=========================================="
echo "🎉 前端打包完成！"
echo "📁 构建目录: $FRONTEND_DIR/build"
echo "🚀 可用于生产环境部署"
echo "=========================================="
echo ""
echo "📋 后续步骤:"
echo "1. 将build目录内容部署到Web服务器"
echo "2. 配置Web服务器处理单页应用路由"
echo "3. 确保WebSocket连接地址正确"
echo ""
echo "💡 本地预览构建结果:"
echo "   cd $FRONTEND_DIR && npm run serve"