Go + React 前后端一体化单文件部署方案
本文将介绍如何从零构建一个 Go 后端（Gin）+ 前端（Vite + React） 的单文件 Web 应用模板。最终构建产物为单一可执行文件，适用于工具型应用、私有化部署系统或需统一交付的 Web 项目。
技术栈
| 层级 | 技术选型 |
|---|---|
| 后端语言 | Go 1.24+ |
| 后端框架 | Gin |
| 前端框架 | React 19.x |
| 前端构建 | Vite 7.x |
| 前端语言 | TypeScript 5.x |
| 样式方案 | Tailwind CSS 4.x |
环境准备
确保你的开发环境已安装以下工具：
- Go 1.20 或更高版本（推荐 1.24）
- Node.js 18 或更高版本
- npm（随 Node.js 安装）
验证安装情况：
go version
node --version
npm --version
初始化 Go 项目
首先创建项目目录并初始化模块：
mkdir -p gin-frontend-template
cd gin-frontend-template
mkdir backend
go mod init yourmodule
go get github.com/gin-gonic/[email protected]
后端路由设计
创建一个 backend/router.go 文件来注册 API 接口。这里我们只负责注册，不创建 Engine，方便复用。
package backend
import (
"net/http"
"github.com/gin-gonic/gin"
)
// Register 只负责注册 API
func Register(r *gin.Engine) {
api := r.Group("/api")
{
api.GET("/ping", ping)
api.POST("/echo", echo)
}
}
func ping(c *gin.Context) {
c.JSON(http.StatusOK, gin.H{
"message": ,
})
}
{
body []any
err := c.ShouldBindJSON(&body); err != {
c.JSON(http.StatusBadRequest, gin.H{
: err.Error(),
})
}
c.JSON(http.StatusOK, gin.H{
: body,
})
}
