0 成本上线 Android App：React + 免费 MySQL + Render + 蓝奏云 + 纯前端发布工具

以《沙塘圩日历 / Shtang Market Calendar》为例
不买服务器、不买域名、不做管理后台
一个 HTML 文件，完成 App 版本发布全流程
结尾附开源地址

---

📖 目录

• 一、项目背景
• 二、整体架构（0 成本）
• 三、后端：Render 免费托管（无域名）
• 四、数据库：免费 MySQL（已实战）
• 五、App 内检查更新（100% 免费）
• 六、重点：发布新版本 = 一个 HTML 文件
  • 6.1 它不是后端，也不是管理系统
  • 6.2 发布页做了什么？
  • 6.3 核心代码（前端）
  • 6.4 实际发布流程（真实在用）
• 七、为什么这种设计很适合小项目？
• 八、技术栈总结
• 九、总结一句话
• 🔗 开源地址

---

以《沙塘圩日历 / Shtang Market Calendar》为例
不买服务器、不买域名、不做管理后台
一个 HTML 文件，完成 App 版本发布全流程
结尾附开源地址

---

一、项目背景

很多同学做完前端，卡在三个地方：

1. 后端和数据库要钱
2. App 更新要上架商店
3. 发布后台又要单独做一套系统

我最近做了一个真实上线的工具型项目：
👉 《沙塘圩日历》，面向乡镇集市（沙塘圩）经营者。

功能包括：

• 📅 圩日日历
• 💸 收支记账（云端同步）
• 📈 收益分析
• 🔐 账号系统（JWT）
• 📱 Android App（Capacitor 打包）
• 🆕 App 内检查更新（完全免费）

而整个系统：

• ✅ 后端：Render 免费 Web Service
• ✅ 数据库：免费 MySQL
• ✅ APK / 文件：蓝奏云
• ✅ 发布工具：一个纯 HTML 文件

---

二、整体架构（0 成本）

┌──────────────────────────┐
│ Android App（APK）       │
│ Capacitor + React        │
└───────────┬──────────────┘
            │ HTTPS
            ▼
┌────────────────────────────────────┐
│ Render Free Web Service            │
│ Express + MySQL API                │
└───────────┬────────────────────────┘
            │
┌───────────▼────────────┐
│ 免费 MySQL（sqlpub）    │
│ shatang_userdata       │
└───────────┬────────────┘
            │
┌───────────▼────────────┐
│ 蓝奏云（APK 直链）     │
└────────────────────────┘

【发布工具】
┌──────────────────────┐
│ publish.html         │
│ 纯前端，无后端       │
│ fetch → Render API   │
└──────────────────────┘

---

三、后端：Render 免费托管（无域名）

Render 会直接给你一个公网地址：

https://shtang-calendar.onrender.com

后端只用做一件事：
提供 API，不托管任何管理页面。

核心接口之一：

POST /api/version/add

用于写入新版本信息。

---

四、数据库：免费 MySQL（已实战）

使用 sqlpub 提供的免费 MySQL：

database: {
  host: 'mysql6.sqlpub.com',
  port: 3311,
  user: 'xiaott',
  password: '********',
  database: 'shatang_userdata'
}

表结构（简化）：

CREATE TABLE app_version (
  id INT AUTO_INCREMENT PRIMARY KEY,
  version VARCHAR(32),
  release_note VARCHAR(512),
  download_url VARCHAR(512),
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

---

五、App 内检查更新（100% 免费）

App 启动时请求：

GET /api/version/latest

对比本地 versionCode：

if (latest.versionCode > localVersion) {
  // 弹窗提示更新
  // 跳转到蓝奏云 APK 直链
}

✅ 不依赖应用商店
✅ 不买推送服务
✅ 不搭 CDN

---

六、重点：发布新版本 = 一个 HTML 文件

6.1 它不是后端，也不是管理系统

👉 就是一个静态 HTML 页面
👉 放在哪里都可以：

• Render 的 dist/
• GitHub Pages
• 本地双击打开

它只做一件事：

通过 fetch 调用 Render 后端接口

---

6.2 发布页做了什么？

功能	说明
版本号	写入 app_version.version
更新说明	写入 release_note
APK 下载链接	蓝奏云直链
发布秘钥	后端校验，防止乱发

---

6.3 核心代码（前端）

const API_BASE = 'https://shtang-calendar.onrender.com';

await fetch(API_BASE + '/api/version/add', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    version: '1.0.6',
    releaseNote: '优化记账体验',
    downloadUrl: 'https://wwi.lanzoup.com/xxx',
    secret: 'shtang'
  })
});

后端校验秘钥：

if (secret !== config.PUBLISH_SECRET) {
  return res.status(403).json({ error: '发布秘钥错误' });
}

---

6.4 实际发布流程（真实在用）

1. 🏗️ 本地打包 APK
2. ☁️ 上传 APK → 蓝奏云
3. 🔗 复制蓝奏云直链
4. 🌐 打开 publish.html
5. ✍️ 填版本信息 + 秘钥
6. ✅ 点击发布
7. 📱 App 立即检测到更新

全程：

• ❌ 不需要服务器
• ❌ 不需要后台系统
• ❌ 不需要重新上架

---

七、为什么这种设计很适合小项目？

传统做法	本方案
管理后台（Node / Java）	一个 HTML
登录系统	发布秘钥
服务器维护	无
成本高	0 成本

✅ 极简
✅ 易维护
✅ 非常适合：

• 毕设
• 小工具
• 乡镇 / 线下 App
• 个人项目

---

八、技术栈总结

• React 18 + TypeScript
• Vite
• Tailwind CSS
• Zustand
• Capacitor（Android）
• Express + MySQL
• Render（免费）
• 蓝奏云（APK 存储）
• 纯前端发布工具（HTML + fetch）

---

九、总结一句话

沙塘圩日历不是一个 Demo，而是一个“能发布、能更新、能长期使用”的真实产品。
后端跑在 Render，数据库免费，APK 放蓝奏云，
再用一个 HTML 文件完成版本发布，全程 0 成本。

如果你也在做小工具型 App，这套方案可以直接复用。

---

十、参考资料

• Render 官网：https://render.com
• SQLPub 免费 MySQL：https://sqlpub.com
• 蓝奏云：https://www.lanzou.com
• Capacitor 官网：https://capacitorjs.com

🔗 开源地址

📦 GitHub：
https://github.com/XiaoZhi1487/shtang-calendar
📦 即刻体验：
沙塘圩日历网页

---

关键词（CSDN SEO）

React Capacitor Render免费部署 免费MySQL 蓝奏云 Android应用内检查更新 纯前端发布工具 0成本全栈 毕业设计 小工具App