Go Cloud Functions on EdgeOne Pages - Gin 框架

一个基于 Next.js + Tailwind CSS 前端和 Go Gin 后端的全栈演示应用，展示如何在 EdgeOne Pages 上使用 Gin 框架部署 Go 云函数，支持 RESTful API 路由。

🚀 特性

• Gin 框架集成：功能完备的 Go Web 框架，支持中间件、JSON 绑定和路由组
• 现代化 UI 设计：深色主题搭配 #1c66e5 点缀色，响应式布局配合交互元素
• 交互式 API 测试：内置 API 端点测试面板 — 点击 "Call" 实时测试每个 REST 端点
• RESTful API 设计：完整的 CRUD 操作，使用结构化路由组（/v1/users、/v1/posts）
• TypeScript 支持：前端完整的类型定义和类型安全

🛠️ 技术栈

前端

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

UI 组件

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

后端

• Go 1.21 - 云函数运行时
• Gin v1.10 - 高性能 Go HTTP Web 框架

📁 项目结构

go-gin-template/
├── cloud-functions/                # Go 云函数源码
│   ├── api.go                     # Gin 应用，包含所有 REST API 路由
│   ├── go.mod                     # Go 模块定义
│   └── go.sum                     # Go 依赖校验和
├── src/
│   ├── app/                       # Next.js App Router
│   │   ├── globals.css           # 全局样式（深色主题）
│   │   ├── layout.tsx            # 根布局
│   │   └── page.tsx              # 主页面（API 测试界面）
│   ├── components/               # React 组件
│   │   └── ui/                   # UI 基础组件
│   │       ├── button.tsx        # 按钮组件
│   │       └── card.tsx          # 卡片组件
│   └── lib/                      # 工具函数
│       └── utils.ts              # 通用工具（cn 辅助函数）
├── public/                        # 静态资源
│   ├── eo-logo-blue.svg          # EdgeOne 标志（蓝色）
│   └── eo-logo-white.svg         # EdgeOne 标志（白色）
├── package.json                   # 项目配置
└── README.md                     # 项目文档

🚀 快速开始

环境要求

• Node.js 18+
• pnpm（推荐）或 npm
• Go 1.21+（本地开发需要）

安装依赖

pnpm install
# 或
npm install

开发模式

edgeone pages dev

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

构建生产版本

edgeone pages build

🎯 核心功能

1. Gin REST API 路由

所有 API 端点定义在单个 cloud-functions/api.go 文件中，使用 Gin 的路由组：

方法	路由	说明
GET	/api/v1/hello	欢迎消息
GET	/api/v1/health	健康检查（包含 Go 运行时版本）
GET	/api/v1/users	获取用户列表
GET	/api/v1/users/:id	根据 ID 获取用户
POST	/api/v1/users	创建新用户（JSON Body 绑定）
GET	/api/v1/posts	获取文章列表
GET	/api/v1/posts/:id	根据 ID 获取文章

2. 交互式 API 测试面板

• 7 个预配置的 API 端点卡片，带 "Call" 按钮
• 实时 JSON 响应展示
• POST 请求支持预填充 JSON Body
• 加载状态和错误处理

3. Gin 框架约定

Go 后端使用 Gin 的标准模式 — 路由组、JSON 绑定和中间件：

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    r := gin.Default()

    v1 := r.Group("/v1")
    {
        v1.GET("/hello", func(c *gin.Context) {
            c.JSON(http.StatusOK, gin.H{
                "message": "Hello from Go Gin!",
            })
        })

        v1.GET("/users", getUsersHandler)
        v1.GET("/users/:id", getUserByIdHandler)
        v1.POST("/users", createUserHandler)
    }

    r.Run(":9000")
}

4. 数据模型

type User struct {
    ID    int    `json:"id"`
    Name  string `json:"name"`
    Email string `json:"email"`
}

type Post struct {
    ID    int    `json:"id"`
    Title string `json:"title"`
    Body  string `json:"body"`
}

🔧 配置说明

Tailwind CSS 配置

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

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

组件样式

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

📚 文档入口

• EdgeOne Pages 官方文档：https://pages.edgeone.ai/document/go
• Gin 框架文档：https://gin-gonic.com/zh-cn/docs
• Next.js 文档：https://nextjs.org/docs
• Tailwind CSS 文档：https://tailwindcss.com/docs

🚀 部署指南

EdgeOne Pages 部署

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

Go Gin 云函数配置

在项目根目录创建 cloud-functions/api.go，编写 Gin 应用：

package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    r := gin.Default()

    r.GET("/v1/hello", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "message": "Hello from Go Gin on EdgeOne Pages!",
        })
    })

    r.Run(":9000")
}

部署

📄 许可证

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