237 lines
6.0 KiB
Markdown
237 lines
6.0 KiB
Markdown
# 成长星球项目部署步骤
|
||
|
||
## 项目概述
|
||
|
||
成长星球是一个儿童成长规划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. 遵循安全最佳实践，保护用户数据
|
||
|
||
---
|
||
|
||
**部署完成后，您的成长星球应用将可以在互联网上访问，为孩子们提供一个有趣、安全的学习环境。** |