aipage.top是一个轻量级的HTML分享预览工具,允许用户轻松粘贴HTML代码进行预览,并将预览的网站分享给朋友。用户可以创建、编辑和管理自己的HTML项目,生成独立的预览链接,完全像是一个独立的网站,可以交互操作。
- 实时HTML预览
- 代码高亮显示
- 项目保存和管理
- 一键生成分享链接
- 独立预览页面,支持JavaScript交互
- Firebase代理层,解决跨区域访问问题
- 前端: Next.js 14, React, TypeScript, TailwindCSS
- 状态管理: React Hooks
- 动画: Framer Motion
- 数据存储: Firebase Firestore
- 代理层: Next.js API Routes + Firebase Admin SDK
- 部署: Vercel
项目采用了前后端分离的架构:
- 前端: 基于Next.js 14的React应用,使用App Router
- 数据存储: Firebase Firestore
- 代理层: 使用Next.js API Routes和Firebase Admin SDK实现的代理层
- 部署: Vercel
为了解决某些地区访问Firebase的问题,项目实现了一个服务器端代理层:
客户端 → Next.js API Routes(代理层) → Firebase Firestore
代理层的主要组件:
- Firebase Admin初始化 (
lib/firebase-admin.ts) - API Routes处理请求 (
app/api/firebase/...) - 前端API客户端 (
lib/api-client.ts)
- Node.js 18+
- npm 或 yarn
- Firebase 账号和项目
- 克隆仓库
git clone https://github.com/yourusername/html-share.git
cd html-share- 安装依赖
npm install- 配置环境变量
创建一个.env.local文件,并填写以下内容:
# Firebase 客户端配置
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id
# Firebase Admin SDK 配置 (用于服务器端API代理)
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_PRIVATE_KEY=your_private_key_with_newlines
FIREBASE_CLIENT_EMAIL=your_client_email
FIREBASE_DATABASE_URL=your_database_url
注意: FIREBASE_PRIVATE_KEY需要包含完整的换行符,例如:
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvgIBA...etc\n-----END PRIVATE KEY-----\n"
- 在Firebase中设置Firestore数据库
登录Firebase控制台,创建一个新项目,然后设置Firestore数据库,创建一个名为html_projects的集合。
- 启动开发服务器
npm run dev- 打开浏览器并访问 http://localhost:3000
项目提供以下API路由:
GET /api/firebase/projects- 获取所有项目GET /api/firebase/project/:id- 获取单个项目POST /api/firebase/project/create- 创建新项目POST /api/firebase/project/:id/update- 更新项目DELETE /api/firebase/project/:id/delete- 删除项目GET /api/firebase/projects/public- 获取公开项目
- 在Vercel上创建一个新项目
- 导入GitHub仓库
- 设置环境变量(与
.env.local相同) - 部署
在Vercel部署时,确保设置所有环境变量,特别注意FIREBASE_PRIVATE_KEY的格式。
Vercel环境变量中应该直接粘贴完整的私钥,包括换行符(\n)。
欢迎提交Pull Request和Issue!
MIT