从临时方案到永久部署：问卷系统的两种上线方式对比
写在前面： 这是「从零到上线：40 分钟打造企业级问卷系统」系列的第 0 篇（总览篇）。建议先读这篇了解整体架构，再决定是否继续深入阅读后续文章。
📋 项目背景
上周接到田老板的需求：
"公司刚做完大模型培训，需要收集学员反馈。做个问卷系统，要能统计分析，预算嘛...你懂的。"
需求拆解：
- 16 个问卷字段（基本信息 + 满意度 + 开放问题）
- 支持匿名/实名填写
- 数据要能导出分析
- 预算：0 元
- 上线时间：越快越好
我的第一反应： 用现成的问卷工具不就行了？
但仔细一想，事情没那么简单：
- 问卷星/腾讯问卷：免费版有广告，数据导出受限
- 飞书表单：功能简单，无法自定义样式
- 自己开发：时间成本高，部署麻烦
最终我选择了方案 C：GitHub Pages + Railway 自建系统
但不是直接上永久方案，我先用临时方案快速验证，确认需求后再迁移到永久部署。
这篇文章就来详细对比这两种方案，帮你理解整个项目的技术架构和决策过程。
🎯 两种上线方案
方案 A：Cloudflare Tunnel（临时方案）
核心思路： 在本地运行后端服务，用 Cloudflare Tunnel 暴露临时公网地址。
部署命令：
# 1. 启动本地服务
cd survey-backend
npm start
# 2. 一行命令暴露公网地址
cloudflared tunnel --url http://localhost:3000
# 3. 获得临时域名
https://background-handling-continental-quotes.trycloudflare.com
优点：
- ✅ 超快 - 5 分钟上线
- ✅ 免费 - 无需任何费用
- ✅ 简单 - 一行命令搞定
- ✅ 安全 - Cloudflare 提供 HTTPS
缺点：
- ❌ 临时 - 关闭终端就失效
- ❌ 不稳定 - 域名每次变
- ❌ 依赖本地 - 电脑不能关机
- ❌ 无法协作 - 代码在本地
适用场景：
- 快速演示给领导看
- 内部小范围测试
- 验证需求是否靠谱
实际使用情况： 我用这个方案快速搭了个 Demo，发给田老板和几个同事试用。收集了 20 多份反馈后，确认需求靠谱，值得投入时间做永久部署。
方案 B：GitHub Pages + Railway（永久方案）
核心思路： 前后端分离部署，前端用 GitHub Pages 托管静态页面，后端用 Railway 托管 Node.js 服务。
部署流程：
# 1. 推送代码到 GitHub
git add .
git commit -m "Deploy survey system"
git push origin main
# 2. GitHub Actions 自动部署前端
# 3. Railway 自动部署后端
# 4. 获得固定域名
前端：https://ruoan724996.github.io/survey-system/
后端：https://survey-system-production-4cc4.up.railway.app
优点：
- ✅ 永久 - 只要平台在，服务就在
- ✅ 稳定 - 固定域名，不会变
- ✅ 自动部署 - Git 推送自动上线
- ✅ 可协作 - 团队可用 Git 协作
- ✅ 免费 - 免费额度足够小项目
- ✅ 可扩展 - 随时添加新功能
缺点：
- ❌ 学习成本 - 需要了解 Git、GitHub、Railway
- ❌ 初期配置 - 第一次需要 40 分钟
适用场景：
- 生产环境长期使用
- 需要团队协作
- 可能持续迭代的项目
📊 详细对比表
| 维度 | 临时方案 (Cloudflare Tunnel) | 永久方案 (GitHub + Railway) |
|---|---|---|
| 部署时间 | 5 分钟 | 40 分钟 |
| 首次配置 | 无需配置 | 需要注册账号、配置 Token |
| 有效期 | 临时（会话结束失效） | 永久（只要平台在） |
| 域名 | 临时随机域名 | 固定域名 |
| 代码管理 | 本地文件 | Git 版本控制 |
| 部署方式 | 手动启动 | Git 推送自动部署 |
| 服务器 | 本地电脑 | 云端托管 |
| 可用性 | 电脑关机就挂 | 24/7 在线 |
| 成本 | 免费 + 电费 | 免费（$5 额度） |
| 团队协作 | 困难 | 容易 |
| 可扩展性 | 低 | 高 |
| 数据持久化 | 依赖本地 | 云端存储 |
| HTTPS | 自动提供 | 自动提供 |
| CDN 加速 | 有 | 有 |
| 维护成本 | 需手动重启 | 几乎零维护 |
🏗️ 技术架构详解
永久方案架构图
┌─────────────────────────────────────────────────────────┐
│ 用户访问 │
│ （手机/电脑浏览器） │
└─────────────────────────────────────────────────────────┘
│
│ https://ruoan724996.github.io/survey-system/
▼
┌─────────────────────────────────────────────────────────┐
│ GitHub Pages (前端静态托管) │
│ │
│ ┌───────────────────────────────────────────────────┐ │
│ │ index.html │ │
│ │ - HTML 结构 │ │
│ │ - CSS 样式（渐变色、响应式） │ │
│ │ - JavaScript 交互 │ │
│ │ - Fetch API 调用后端 │ │
│ └───────────────────────────────────────────────────┘ │
│ │
│ 特性： │
│ - 全球 CDN 加速 │
│ - 自动 HTTPS │
│ - 100GB/月 免费流量 │
└─────────────────────────────────────────────────────────┘
│
│ POST /api/submit
│ JSON 数据
▼
┌─────────────────────────────────────────────────────────┐
│ Railway (Node.js 后端服务) │
│ https://survey-system-production-4cc4.up.railway.app │
│ │
│ ┌───────────────────────────────────────────────────┐ │
│ │ server.js │ │
│ │ - Express 框架 │ │
│ │ - CORS 跨域配置 │ │
│ │ - 飞书 API 转发 │ │
│ │ - Token 自动缓存 │ │
│ │ - 错误处理 │ │
│ └───────────────────────────────────────────────────┘ │
│ │
│ 特性： │
│ - 自动扩缩容 │
│ - 日志查看 │
│ - 环境变量管理 │
│ - $5/月 免费额度 │
└─────────────────────────────────────────────────────────┘
│
│ HTTPS 请求
│ 飞书开放平台 API
▼
┌─────────────────────────────────────────────────────────┐
│ 飞书多维表格 (数据存储) │
│ https://baijiubg.feishu.cn/base/MMwsb70JkaDngbs8P5ecXGllnse
│ │
│ ┌───────────────────────────────────────────────────┐ │
│ │ 数据表结构 │ │
│ │ - 姓名、部门、培训日期 │ │
│ │ - 帮助程度、内容难度、整体满意度 │ │
│ │ - 开发经验、功能类型、关注方向 │ │
│ │ - 其他建议 │ │
│ └───────────────────────────────────────────────────┘ │
│ │
│ 特性： │
│ - 20,000 行免费额度 │
│ - 在线查看和编辑 │
│ - 支持数据导出（Excel/CSV） │
│ - 支持数据分析和图表 │
└─────────────────────────────────────────────────────────┘
数据流转过程
用户填写问卷的完整流程：
-
用户打开页面 浏览器 → GitHub Pages CDN → 加载 index.html
-
填写并提交表单
// 前端代码 const response = await fetch('https://survey-system-production-4cc4.up.railway.app/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); -
后端接收并处理
// Railway 后端代码 app.post('/api/submit', async (req, res) => { const fields = req.body; await submitToFeishu(fields); // 转发到飞书 res.json({ success: true }); }); -
飞书 API 存储数据
// 飞书 API 调用 POST https://open.feishu.cn/open-apis/bitable/v1/apps/{appToken}/tables/{tableId}/records Body: { fields: {...} } -
返回成功响应 飞书 API → Railway 后端 → GitHub Pages 前端 → 用户浏览器
整个过程耗时： 约 200-500ms
⏱️ 完整开发流程
时间线
Day 1: 需求分析 + 技术选型（4 小时）
├─ 确认需求（30 分钟）
├─ 方案调研（1 小时）
├─ 技术选型（1 小时）
└─ 环境准备（1.5 小时）
Day 2: 前端开发（4 小时）
├─ HTML 结构（1 小时）
├─ CSS 样式（1.5 小时）
└─ JavaScript 交互（1.5 小时）
Day 3: 后端开发（6 小时）
├─ Express 框架搭建（1 小时）
├─ 飞书 API 对接（2 小时）
├─ Token 缓存机制（1 小时）
├─ 错误处理（1 小时）
└─ 本地测试（1 小时）
Day 4: 部署测试（2 小时）
├─ GitHub 仓库创建（30 分钟）
├─ GitHub Pages 配置（30 分钟）
├─ Railway 部署（1 小时）
└─ 联调测试（30 分钟）
Day 5: 上线运营（持续）
├─ 发布问卷链接
├─ 数据监控
└─ 用户反馈收集
总计： 约 16 小时（2 个工作日）
如果跳过临时方案直接永久部署： 约 40 分钟（熟悉流程后）
💰 成本分析
临时方案成本
| 项目 | 费用 | 说明 |
|---|---|---|
| Cloudflare Tunnel | 免费 | 无限制 |
| 本地电脑 | 已有 | 需持续运行 |
| 电费 | 约 ¥5/天 | 电脑功耗 |
| 人工 | 5 分钟 | 启动命令 |
| 总计 | 临时用几乎免费 | 长期使用不划算 |
永久方案成本
| 项目 | 免费额度 | 实际用量 | 费用 |
|---|---|---|---|
| GitHub Pages | 100GB/月 | ~1GB | ¥0 |
| Railway | $5/月 | ~$1 | ¥0 |
| 飞书多维表格 | 20,000 行 | ~100 行 | ¥0 |
| 域名 | 需自备 | GitHub 子域名 | ¥0 |
| 总计 | ¥0/月 |
结论： 在低用量场景下，永久方案完全可以白嫖！
如果用量增长：
- GitHub Pages 超出 100GB：$0.5/GB
- Railway 超出$5：按量计费
- 飞书超出 20,000 行：升级企业版
但我们的问卷系统：
- 前端页面：~50KB
- 每月 1000 次访问：50MB 流量
- 后端 API：每次调用~1KB
- 远低于免费额度
🤔 决策过程：为什么最终选择永久方案？
6 个关键因素
1. 长期使用需求
田老板："这个培训以后还会办，问卷得长期能用。"
临时方案每次都要重启，不适合长期使用。
2. 代码版本管理
"万一要改个字段怎么办？"
Git 管理代码，修改有记录，可随时回滚。
3. 团队协作可能
"以后可以让其他人也参与开发。"
GitHub 支持多人协作，临时方案只能本地开发。
4. 零成本
"预算 0 元，你确定能搞定？"
GitHub + Railway 免费额度足够，真的不用花钱。
5. 可扩展性
"以后能不能加个数据分析图表？"
永久方案架构清晰，加功能容易。
6. 技术积累
"这个过程能沉淀下来吗？"
完整的技术文档和代码，可作为团队的技术资产。
如果重来一次，还会选永久方案吗？
会！理由如下：
-
多花 35 分钟，换来长期便利
- 临时方案：每次用都要启动
- 永久方案：部署一次，长期可用
-
技术栈可复用
- 下次有类似需求，直接复制模板
- 团队其他人也能用这个方案
-
案例价值
- 可作为技术分享案例
- 写文章、做分享都有素材
-
学习收获
- 熟悉了 GitHub Pages 部署
- 掌握了 Railway 使用
- 理解了前后端分离架构
📚 系列文章导读
本系列将带你完整经历从零到上线的全过程：
🗺️ 完整路线
第 0 篇：总览与方案对比 ← 你现在在这里
│
├─ ✅ 了解两种方案的区别
├─ ✅ 看懂整体架构
├─ ✅ 理解决策理由
└─ → 决定要不要继续读
↓
第 1 篇：需求分析与选型
│
├─ 需求拆解方法
├─ 技术选型思维
└─ 成本评估技巧
↓
第 2 篇：前端开发
│
├─ HTML 结构设计
├─ CSS 渐变样式
├─ 响应式布局
└─ 表单交互逻辑
↓
第 3 篇：后端开发
│
├─ Express 快速上手
├─ 飞书 API 对接
├─ Token 缓存机制
└─ 错误处理
↓
第 4 篇：GitHub 部署
│
├─ 仓库创建与配置
├─ Pages 启用步骤
├─ Actions 自动部署
└─ 常见问题排查
↓
第 5 篇：Railway 部署
│
├─ 项目创建与配置
├─ 环境变量管理
├─ 自动部署触发
└─ 日志查看与调试
↓
第 6 篇：上线运营
│
├─ 上线前检查清单
├─ 推广渠道选择
├─ 数据收集情况
├─ 飞书数据分析
└─ 用户反馈整理
📖 阅读建议
适合谁读：
- ✅ 想快速上线项目的开发者
- ✅ 学习全栈开发的学生
- ✅ 技术选型困难的技术负责人
- ✅ 想白嫖云服务的创业团队
- ✅ 对前后端分离架构感兴趣的人
不适合谁：
- ❌ 只需要临时演示（用 Tunnel 就好）
- ❌ 高并发场景（免费额度不够）
- ❌ 需要复杂数据库（需额外配置）
- ❌ 不想学习新工具的人
怎么读最高效：
- 先读第 0 篇（就是这篇）- 了解整体
- 跳到自己关心的部分 - 不必按顺序
- 边读边动手 - 代码可以复制
- 遇到问题看评论 - 或者提 Issue
读完你将获得：
- 🎯 完整可运行的问卷系统
- 🚀 全栈开发实战经验
- 💡 部署上线的完整流程
- 🧠 技术选型的思维方法
- 📝 可直接复用的代码模板
🎁 完整代码与在线演示
GitHub 仓库： github.com/ruoan724996…
在线演示： ruoan724996.github.io/survey-syst…
数据查看： baijiubg.feishu.cn/base/MMwsb7…
📝 小结
核心要点：
-
两种方案各有优劣
- 临时方案：快，但只能用一次
- 永久方案：稍慢，但一劳永逸
-
技术架构清晰
- GitHub Pages 托管前端
- Railway 托管后端
- 飞书存储数据
-
零成本可行
- 免费额度足够小项目
- 无需信用卡即可开始
-
可复制可复用
- 代码开源
- 文档完整
- 下次直接用
下一篇： 第 1 篇：需求分析与选型 - 详细讲解如何拆解需求、评估方案、做出技术决策。
上一篇： 无（这是系列第 0 篇）
作者： 涛
编辑时间： 2026-03-06
状态： 初稿，待评审
字数： 约 3800 字
觉得有用？点赞 + 收藏支持一下！ 👍
有问题？评论区见！ 💬
