企业官网建设流程全解析

legacy-mindmup是经典思维导图工具MindMup v1的开源遗留代码仓库（官方已于 2017 年 1 月 1 日停止维护）。它由 Ruby Sinatra 后端 + JavaScript 前端（mapjs 渲染引擎）组成，是学习早期"在线思维导图"架构的绝佳样本。本文带你用10 分钟完成 legacy-mindmup 的本地开发环境搭建、测试运行与 Heroku 部署。

30秒看懂项目结构

在动手之前，先花 30 秒了解这个 MindMup 思维导图项目的关键文件：

💡 提示：README.md 中说明本仓库仅包含 Legacy MindMup 代码，MindMup 2 的可视化库是独立的 mapjs 项目，注意不要混淆。

环境准备：一键安装Ruby与Node依赖

legacy-mindmup 采用 2013 年前后的技术栈，需要两个运行时：

1. Ruby 1.9.3 + Bundler—— Gemfile 第一行锁定了ruby '1.9.3'，建议用 rvm/rbenv 安装对应版本（新版 Ruby 可能无法加载旧版aws-sdk1.x）。
2. Node.js + npm—— 用于 Grunt 构建与 Jasmine 测试，npm install -g grunt-cli全局安装一次即可。

安装依赖只需两条命令：

bundle install # 安装 sinatra、thin、rspec 等 gem npm install # 安装 grunt-contrib-* 等前端构建插件

克隆仓库并启动本地开发服务器

git clone https://gitcode.com/gh_mirrors/le/legacy-mindmup cd legacy-mindmup bundle install bundle exec rackup -p 4567

浏览器打开http://localhost:4567，即可看到 MindMup 思维导图编辑器页面（由 views/editor.erb 渲染）。

几个实用技巧：

• 环境变量控制：web.rb 支持S3_BUCKET_NAME、SITE_URL、GOOGLE_ANALYTICS_ACCOUNT等可选变量，本地运行可不设，匿名保存功能会降级。
• 离线模式：设置OFFLINE=offline可跳过启动时抓取 blog 新闻的联网请求，启动更快。
• 路由规则：访问/map/xxxx会重定向到/#m:xxxx打开指定地图（逻辑见 web.rb），仓库里还附带 test/example-formats/mindmup.mup 与 test/example-formats/freemind.mm 两种格式的示例地图文件，可用于导入体验。

运行测试：RSpec测后端、Jasmine测前端

后端 Ruby 测试

路由重定向、浏览器白名单、Session 配置等逻辑都在 RSpec 用例中，例如 test/routing_spec.rb 和 test/configuration_spec.rb：

bundle exec rspec

前端 Jasmine 测试

80 多个*-spec.js用例（如 test/auto-save-spec.js、test/s3-api-spec.js）通过 Grunt 运行：

grunt jasmine # 生成 SpecRunner.html，用浏览器打开查看结果 grunt watch # 监听 test/*.js 与 public/**/*.js 变更自动重跑

提交代码前建议跑一遍 GruntFile.js 中定义的precommit任务：

grunt precommit # 等价于 checkstyle（jshint+jscs）+ jasmine

构建打包：Grunt compile编译产物

GruntFile.js 的compile任务会把 public/mm.js、public/mapjs-compiled.js 及 public/lib/ 下所有模块拼接、Uglify 压缩并生成 sourceMap，输出到compiled/目录。生产环境页面通过 views/scripts.erb 中的判断加载这些压缩产物（由 compiled_ts.rb 中的时间戳指向 CDN 版本）。

Heroku部署上线三步骤

legacy-mindmup 天然适配 Heroku，启动命令定义在 Procfile：

web: bundle exec rackup config.ru -p $PORT

部署流程：

heroku create git push heroku master heroku config:set RACK_SESSION_SECRET=你的随机密钥

• 必配项：config.ru 启动时读取RACK_SESSION_SECRET，缺失会导致 Session 报错。
• 可选配置：S3_KEY_ID、S3_SECRET_KEY、S3_BUCKET_NAME用于匿名地图云存储；FORCE_SSL=YES启用 config.ru 中的 SSL 强制跳转。
• 健康验证：部署后访问/#m:new打开一张新图，若编辑器正常渲染即部署成功。
• 性能排查：仓库内置了 heroku_timings.sh 与 heroku_toprequests.sh 两个脚本，可统计生产环境日志中的请求耗时与热点路径。

常见问题清单

❓ 启动报 gem 版本冲突？新版 Ruby 与旧 gem 不兼容，请切换回 Ruby 1.9.3 后重新bundle install。

❓ 页面加载了但编辑器是空白？检查浏览器控制台是否报错；确认 public/main.js 的MM.main正常执行，可用 Chrome DevTools 排查。

❓ 想体验 iOS 端页面？访问/ios/editor/4可渲染 views/ios/4/ios.erb 对应的 iOS WebView 页面，配套代码在 public/lib-ios/。

❓ 能直接用于生产吗？不建议。项目已停更，aws-sdk1.x、Sinatra 1.3 等依赖过于陈旧，更适合作为学习与架构研究用途。

至此，你已经完成了 legacy-mindmup 思维导图项目的完整跑通：从本地rackup启动、双栈测试，到 Grunt 构建与 Heroku 一键部署。这个 2013 年的代码库完整展示了"Sinatra 薄后端 + 纯 JS 前端 + S3 直传 + Heroku 部署"的经典 Web 应用架构，非常值得逐文件研读。