Cloud Functions on EdgeOne Pages - Express

一个基于 Next.js + Tailwind CSS 的函数请求演示网站，展示如何在 EdgeOne Pages 上使用 Cloud Functions 部署 Express 应用。

• 现代化 UI 设计：采用黑底白字主题，使用 #1c66e5 作为点缀色
• 响应式布局：支持桌面端和移动端，提供最佳用户体验
• 实时 API 演示：集成 Express 后端，支持实时函数调用测试
• 组件化架构：使用 shadcn/ui 风格的组件系统
• TypeScript 支持：完整的类型定义和类型安全

• Next.js 15 - React 全栈框架
• React 19 - 用户界面库
• TypeScript - 类型安全的 JavaScript
• Tailwind CSS 4 - 实用优先的 CSS 框架

• shadcn/ui - 高质量 React 组件
• Lucide React - 精美的图标库
• class-variance-authority - 组件样式变体管理
• clsx & tailwind-merge - CSS 类名合并工具

• Express.js - Node.js Web 应用框架
• Cloud Functions - EdgeOne Pages 无服务器函数

express-template/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── globals.css     # 全局样式
│   │   ├── layout.tsx      # 根布局
│   │   └── page.tsx        # 主页面
│   ├── components/         # React 组件
│   │   └── ui/            # UI 基础组件
│   │       ├── button.tsx  # 按钮组件
│   │       └── card.tsx    # 卡片组件
│   └── lib/               # 工具函数
│       └── utils.ts       # 通用工具
├── public/                # 静态资源
├── package.json           # 项目配置
└── README.md             # 项目文档

• Node.js 18+
• npm 或 yarn

npm install
# 或
yarn install

edgeone pages dev

访问 http://localhost:8088 查看应用。

edgeone pages build

• 项目标题和描述
• 一键部署和查看文档按钮
• Express 代码示例展示

• 实时函数调用测试
• 加载状态显示
• 结果展示

• 移动端友好的布局
• 自适应组件尺寸
• 触摸友好的交互

项目使用 Tailwind CSS 4，支持自定义颜色变量：

:root {
  --primary: #1c66e5;        /* 主色调 */
  --background: #000000;     /* 背景色 */
  --foreground: #ffffff;     /* 前景色 */
}

使用 class-variance-authority 管理组件样式变体，支持多种预设样式。

• EdgeOne Pages 官方文档：https://pages.edgeone.ai/document/node-functions
• Next.js 文档：https://nextjs.org/docs
• Tailwind CSS 文档：https://tailwindcss.com/docs
• Express.js 文档：https://expressjs.com

1. 将代码推送到 GitHub 仓库
2. 在 EdgeOne Pages 控制台创建新项目
3. 选择 GitHub 仓库作为源
4. 配置构建命令：npm run build
5. 配置输出目录：.next
6. 部署项目

在项目根目录创建 cloud-functions/ 文件夹，添加 Express 应用：

// cloud-functions/express/[[default]].js
import express from "express";
const app = express();

app.get("/", (req, res) => {
  res.json({ message: "Hello from Express on Cloud Functions!" });
});

export default app;

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。