待办事项管理系统 - 个人服务器部署指南

作者：MiniMax Agent
日期：2025-08-17

系统架构概述

本系统采用前后端分离架构：

  • 前端：React + TypeScript + Tailwind CSS
  • 后端：Supabase (数据库 + 认证 + API + Edge Functions)
  • 部署方式：静态文件部署 + Supabase 云服务

部署方案选择

方案一：完全云端部署（推荐）

优势：

  • 部署简单，维护成本低
  • 自动扩容，高可用性
  • 无需管理服务器

架构：

用户浏览器 → CDN/静态托管服务 → Supabase Cloud

方案二：混合部署

架构：

用户浏览器 → 个人服务器（前端） → Supabase Cloud（后端）

方案三：完全自托管（高级）

架构：

用户浏览器 → 个人服务器（前端 + 自建后端）

详细部署步骤

方案一：完全云端部署

1. Supabase 项目设置

  1. 访问 Supabase 创建账户

  2. 创建新项目，记录以下信息：

    • Project URL
    • Project API Key (anon)
    • Service Role Key
  3. 在 Supabase Dashboard 中导入数据库架构和Edge Functions

2. 前端部署到 Vercel（推荐）

# 1. 安装 Vercel CLI
npm i -g vercel

# 2. 在项目根目录运行
vercel

# 3. 配置环境变量
vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY

3. 其他静态托管选项

Netlify 部署：

# 1. 构建项目
npm run build

# 2. 安装 Netlify CLI
npm install -g netlify-cli

# 3. 部署
netlify deploy --prod --dir=dist

GitHub Pages 部署：

# 1. 安装 gh-pages
npm install --save-dev gh-pages

# 2. 在 package.json 添加脚本
"scripts": {
  "deploy": "gh-pages -d dist"
}

# 3. 部署
npm run build
npm run deploy

方案二：个人服务器前端 + Supabase 后端

1. 服务器环境要求

  • 操作系统：Ubuntu 20.04+ / CentOS 7+ / Debian 10+
  • 内存：至少 1GB RAM
  • 存储：至少 10GB 可用空间
  • 网络：公网 IP 或域名

2. 安装 Node.js 和 Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm nginx

# CentOS/RHEL
sudo yum install nodejs npm nginx

3. 项目部署

# 1. 克隆项目到服务器
git clone <your-project-repo>
cd todo-management-system

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp .env.example .env
# 编辑 .env 文件，填入 Supabase 配置

# 4. 构建项目
npm run build

# 5. 移动构建文件到 Nginx 目录
sudo cp -r dist/* /var/www/html/

4. Nginx 配置

创建配置文件 /etc/nginx/sites-available/todo-app：

server {
    listen 80;
    server_name your-domain.com;  # 替换为您的域名或IP
    
    root /var/www/html;
    index index.html;
    
    # 支持 React Router
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # 安全头
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
}

启用配置：

# 创建软链接
sudo ln -s /etc/nginx/sites-available/todo-app /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx

5. SSL 证书配置（可选但推荐）

使用 Let's Encrypt：

# 安装 Certbot
sudo apt install certbot python3-certbot-nginx

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

方案三：完全自托管

1. 替换 Supabase 后端

如果您不想使用 Supabase 云服务，需要自建后端：

数据库选择：

  • PostgreSQL（推荐，与 Supabase 兼容）
  • MySQL
  • SQLite（小型项目）

后端框架选择：

  • Node.js + Express + PostgreSQL
  • Python + FastAPI + PostgreSQL
  • Go + Gin + PostgreSQL

2. 数据库安装（PostgreSQL）

# Ubuntu/Debian
sudo apt install postgresql postgresql-contrib

# CentOS/RHEL
sudo yum install postgresql-server postgresql-contrib
sudo postgresql-setup initdb

# 启动服务
sudo systemctl start postgresql
sudo systemctl enable postgresql

3. 创建数据库和用户

-- 连接到 PostgreSQL
sudo -u postgres psql

-- 创建数据库
CREATE DATABASE todo_management;

-- 创建用户
CREATE USER todo_user WITH PASSWORD 'secure_password';

-- 授权
GRANT ALL PRIVILEGES ON DATABASE todo_management TO todo_user;

环境变量配置

创建 .env 文件：

# Supabase 配置（方案一、二）
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

# 自建后端配置（方案三）
VITE_API_BASE_URL=https://your-api-domain.com
VITE_DATABASE_URL=postgresql://todo_user:password@localhost:5432/todo_management

# SendGrid 邮件服务
SENDGRID_API_KEY=your-sendgrid-api-key
SENDGRID_FROM_EMAIL=your-sender@domain.com

# 其他配置
VITE_APP_NAME=待办事项管理系统
VITE_APP_VERSION=1.0.0

部署检查清单

部署前检查

  • [ ] 确认服务器环境满足要求
  • [ ] 准备域名（可选）
  • [ ] 准备 SSL 证书（推荐）
  • [ ] 配置环境变量
  • [ ] 测试 Supabase 连接

部署后检查

  • [ ] 访问网站首页正常
  • [ ] 用户注册登录功能正常
  • [ ] 待办事项 CRUD 功能正常
  • [ ] 管理员后台功能正常
  • [ ] 邮件发送功能正常
  • [ ] 数据统计功能正常
  • [ ] 移动端响应式正常

监控和维护

1. 日志监控

# Nginx 日志
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

# 系统资源监控
htop
df -h
free -m

2. 自动备份（推荐）

# 创建备份脚本
#!/bin/bash
# backup.sh

DATE=$(date +"%Y%m%d_%H%M%S")
BACKUP_DIR="/backup/todo-app"

# 创建备份目录
mkdir -p $BACKUP_DIR

# 备份数据库（如果使用自建数据库）
pg_dump -h localhost -U todo_user todo_management > $BACKUP_DIR/db_$DATE.sql

# 备份应用文件
tar -czf $BACKUP_DIR/app_$DATE.tar.gz /var/www/html

# 清理旧备份（保留7天）
find $BACKUP_DIR -name "*.sql" -mtime +7 -delete
find $BACKUP_DIR -name "*.tar.gz" -mtime +7 -delete

添加到 crontab：

# 每天凌晨2点自动备份
crontab -e
0 2 * * * /path/to/backup.sh

3. 性能优化

前端优化：

  • 启用 Gzip 压缩
  • 配置静态资源缓存
  • 使用 CDN（可选）

Nginx 优化配置：

# 启用 Gzip
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml+rss;

常见问题解决

1. 部署后无法访问

  • 检查防火墙设置：sudo ufw allow 80,443/tcp
  • 检查 Nginx 状态：sudo systemctl status nginx
  • 检查域名解析：nslookup your-domain.com

2. API 请求失败

  • 检查 Supabase 配置是否正确
  • 检查网络连接
  • 查看浏览器控制台错误信息

3. 邮件发送失败

  • 验证 SendGrid API Key 是否有效
  • 检查发件人邮箱是否已验证
  • 查看 Supabase Edge Functions 日志

安全建议

  1. 定期更新：保持系统和依赖包最新
  2. 强密码：使用复杂的数据库密码
  3. HTTPS：始终使用 SSL 证书
  4. 防火墙：只开放必要端口
  5. 备份：定期备份数据
  6. 监控：设置异常告警

扩容建议

当用户量增长时，可以考虑：

  1. 水平扩容：使用负载均衡器
  2. CDN：加速静态资源访问
  3. 数据库优化：读写分离、索引优化
  4. 缓存：Redis 缓存热点数据

注意：本指南提供了多种部署方案，请根据您的实际需求和技术水平选择合适的方案。建议从方案一开始，逐步过渡到更复杂的自托管方案。

Last modification：August 17, 2025
© Allow specification reprint
分享是对我最大的赞赏