前端 + 后端 + 数据库 + Nginx + 服务器部署一条龙实战新手也能跟着做完的真实全栈项目

前端效果：

server日志：

目录导航

一、项目概览

这是一个完整的前后端分离用户管理系统，代码由AI生成、无冗余框架、无黑盒依赖，是入门全栈的练手项目。
建议去阿里云申请服务器，有免费的试用期；

后端（Go + Gin）

• 框架： Gin v1.12.0 + GORM v1.30.0 + MySQL
• 认证： JWT（HS256，24h 有效期）+ Argon2id 密码哈希

前端（Vue 3）

• 技术栈： Vue 3 + Vite 5 + Pinia + Vue Router + Axios + ECharts
• 开发端口： 5173，代理 /api 到后端 8080
• 5个页面： 登录、注册、首页（ECharts 数据看板）、个人信息、编辑信息
• UI： 自定义 CSS，深色侧边栏 + 蓝色主题，中文界面

真正做到：前端能看、后端能跑、数据库能存、服务器能上！

二、项目架构设计

用户 → 80 端口 Nginx 
      ├─ / → 前端页面（Vue dist） 
      └─ /api/* → 转发 Go 后端 8080 端口 Go 后端 → 操作 MySQL 

80 端口 = 网页

8080 端口 = API 接口

四、后端（Go）功能说明

整个后端**仅一个 main.go ** ，结构清晰、逻辑简单，非常适合新手学习。

API 接口列表

表格

方法	路径	功能	认证
POST	/api/user/register	用户注册	否
POST	/api/user/login	用户登录	否
GET	/api/user/info	获取当前用户信息	是
PUT	/api/user/update	更新用户信息	是
GET	/api/user/stats	注册 / 登录趋势统计	是

数据库
库名：testdb表：

• users 用户表
• user_logins 登录记录表

附带 seed.sql 种子数据，可直接导入演示。

五、前端（Vue3）功能说明

• 登录页面
• 注册页面
• 首页数据看板（ECharts）
• 个人信息页面
• 信息编辑页面

开发端口：5173
API 自动代理：/api → 后端 8080

六、项目文件结构

go-api/
├── main.go          # Go 后端核心（522行）
├── go.mod
├── go.sum
├── seed.sql         # 数据库种子数据
├── go-api           # 编译文件
└── frontend/        # Vue 3 前端
    ├── src/
    │   ├── views/   # 5 个页面
    │   ├── stores/  # Pinia 状态
    │   └── router/  # 路由
    └── vite.config.js

七、阿里云服务器三大天坑

坑 1：安全组没开 80 / 8080 → 外网永远访问不了

阿里云默认关闭所有端口！必须手动开放：

• 80
• 8080

坑 2：Linux 防火墙拦截端口

放开网页、server的端口；

ufw allow 80
ufw allow 8080
ufw reload

坑 3：低配服务器（1 核 1G）编译 Go 直接卡死

这个坑 99% 新手都会踩！ 阿里云免费版本资源少，使用go run main.go编译会卡死。 应该先编译再运行！

GOMEMLIMIT=512MiB go build -gcflags=all=-l -o server main.go

八、Nginx 最终正确配置（解决所有 405 / 500）

前端、server、mysql部署在同一台机器。

server { 
    listen 80; 
    root /var/www/dist;
    index index.html; 
    
    location / { 
        try_files $uri $uri/ /index.html;
    } 
    
    location /api/ { 
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
    }
}

九、最终效果

线上地址

http://121.199.59.229

功能全部正常：

• 注册 ✅
• 登录 ✅
• 个人信息 ✅
• 数据统计 ✅
• 修改信息 ✅

十、收获与总结

半天时间，搭建demo熟悉了后端流程及使用的中间件：前端 → 后端 → 数据库 → Nginx → 阿里云部署 → 问题排查 → 上线成功

AI工具：豆包、Cipilot

希望这篇文章能帮助每一个正在入门全栈的你。