# 成长星球项目部署步骤

## 项目概述

成长星球是一个儿童成长规划Web应用，使用Vue 3 + TypeScript + Vite + Pinia + Three.js + Element Plus技术栈开发。

## 部署前准备

### 1. 环境要求

- Node.js 16.x 或更高版本
- npm 7.x 或更高版本
- 服务器环境（推荐使用Nginx + PM2）
- 域名（可选）

### 2. 项目构建

1. **克隆项目**
   ```bash
   git clone <项目仓库地址>
   cd 儿童成长规划项目
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **构建生产版本**
   ```bash
   npm run build
   ```

   构建完成后，生成的静态文件将位于 `dist` 目录中。

## 服务器部署

### 1. 服务器准备

- **安装Node.js**
  ```bash
  # Ubuntu/Debian
  curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
  sudo apt-get install -y nodejs

  # CentOS/RHEL
  curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
  sudo yum install -y nodejs
  ```

- **安装Nginx**
  ```bash
  # Ubuntu/Debian
  sudo apt-get update
  sudo apt-get install -y nginx

  # CentOS/RHEL
  sudo yum install -y nginx
  ```

- **安装PM2（可选，用于管理Node.js应用）**
  ```bash
  npm install -g pm2
  ```

### 2. 部署静态文件

1. **复制构建文件到服务器**
   ```bash
   # 使用scp命令
   scp -r dist/* user@server_ip:/var/www/chengzhangxingqiu
   ```

2. **配置Nginx**
   
   创建Nginx配置文件：
   ```bash
   sudo nano /etc/nginx/sites-available/chengzhangxingqiu
   ```

   配置内容：
   ```nginx
   server {
       listen 80;
       server_name your-domain.com;

       root /var/www/chengzhangxingqiu;
       index index.html;

       location / {
           try_files $uri $uri/ /index.html;
       }

       # 静态文件缓存
       location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
           expires 30d;
           add_header Cache-Control "public, max-age=2592000";
       }
   }
   ```

3. **启用站点**
   ```bash
   sudo ln -s /etc/nginx/sites-available/chengzhangxingqiu /etc/nginx/sites-enabled/
   sudo nginx -t
   sudo systemctl restart nginx
   ```

### 3. HTTPS配置（可选）

使用Let's Encrypt获取免费SSL证书：

```bash
# 安装certbot
sudo apt-get install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d your-domain.com

# 自动更新证书
sudo systemctl enable certbot.timer
```

## 部署后检查

1. **访问应用**
   打开浏览器访问 `http://your-domain.com` 或 `https://your-domain.com`

2. **功能测试**
   - 测试用户登录功能
   - 测试各个模块的功能
   - 测试图片加载是否正常
   - 测试英语发音功能

3. **性能监控**
   - 监控服务器资源使用情况
   - 检查页面加载速度
   - 测试响应时间

## 维护与更新

### 1. 代码更新

```bash
# 拉取最新代码
git pull

# 安装新依赖
npm install

# 重新构建
npm run build

# 复制新文件到服务器
scp -r dist/* user@server_ip:/var/www/chengzhangxingqiu

# 重启Nginx（如果需要）
sudo systemctl restart nginx
```

### 2. 日志查看

```bash
# Nginx访问日志
sudo tail -f /var/log/nginx/access.log

# Nginx错误日志
sudo tail -f /var/log/nginx/error.log
```

### 3. 常见问题排查

- **页面空白**：检查Nginx配置和文件路径
- **图片不显示**：检查图片路径和文件权限
- **功能异常**：检查浏览器控制台错误信息
- **服务器错误**：检查Nginx错误日志

## 安全建议

1. **定期更新依赖**
   ```bash
   npm update
   ```

2. **设置文件权限**
   ```bash
   sudo chown -R www-data:www-data /var/www/chengzhangxingqiu
   sudo chmod -R 755 /var/www/chengzhangxingqiu
   ```

3. **启用防火墙**
   ```bash
   sudo ufw enable
   sudo ufw allow 80/tcp
   sudo ufw allow 443/tcp
   ```

4. **定期备份**
   ```bash
   # 备份静态文件
   tar -czf chengzhangxingqiu-backup-$(date +%Y%m%d).tar.gz /var/www/chengzhangxingqiu
   ```

## 部署流程图

```
┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  本地开发环境   │────>│   构建生产版本   │────>│   部署到服务器   │
└─────────────────┘     └─────────────────┘     └─────────────────┘
                              │                         │
                              ▼                         ▼
                     ┌─────────────────┐     ┌─────────────────┐
                     │  静态文件生成   │────>│   Nginx配置     │
                     └─────────────────┘     └─────────────────┘
                                                      │
                                                      ▼
                                             ┌─────────────────┐
                                             │   HTTPS配置     │
                                             └─────────────────┘
                                                      │
                                                      ▼
                                             ┌─────────────────┐
                                             │   功能测试      │
                                             └─────────────────┘
```

## 注意事项

1. 确保服务器有足够的磁盘空间和内存
2. 定期更新服务器系统和软件包
3. 监控服务器状态，及时处理异常
4. 备份重要数据，防止数据丢失
5. 遵循安全最佳实践，保护用户数据

---

**部署完成后，您的成长星球应用将可以在互联网上访问，为孩子们提供一个有趣、安全的学习环境。**