主题
语言 EN
← 返回项目列表 YSKM523 / modbox-modular-website

ModBox Modular

为 Thunder Bay 模块化房屋制造商 ModBox NWO Inc. 做的官网与运营站 —— 服务安省西北部及北部原住民社区。全栈 Next.js，自托管，后台仅 Tailscale 可达的零信任设计。

Live · Client Production 独立承接 · 设计 + 全栈 + 运维 最后更新: 2026年5月26日
访问站点 Code

背景

ModBox NWO Inc. 是一家真实的制造商：在 Thunder Bay 有工厂，造完整的模块化房屋 —— 木结构、轻钢结构、全定制 —— 再用卡车运到安省北部各社区，包括偏远的原住民社区。

这个站是它的「数字门面」。它的任务不是做成一本宣传册，而是：讲清楚公司的故事、呈现买家要在三套模块化体系之间怎么选、端到端解释一个项目实际是怎么落地的、展示已交付项目的作品集、记录原住民社区工程、汇总新闻与拨款里程碑，并把线索直接收进团队的收件箱。站点背后还跑着一个私有运营后台，团队用它来处理咨询、看流量 —— 永不暴露在公网上。

首页 —— 满屏工厂车间 hero 视频、公司数据、产品线预览、近期精选项目。
首页 —— 满屏工厂车间 hero 视频、公司数据、产品线预览、近期精选项目。
关于 —— 公司故事、团队、Bailey Avenue 的车间，以及从注册成立至今的里程碑时间线。
关于 —— 公司故事、团队、Bailey Avenue 的车间，以及从注册成立至今的里程碑时间线。
产品 —— 三套体系，一个标准：木结构、轻钢结构、定制。
产品 —— 三套体系，一个标准：木结构、轻钢结构、定制。

方法

真·公开站，纯手写 —— 不是模板

整个前端是定制的。Next.js 16 App Router + React Server Components、React 19、TypeScript 5、Tailwind v4（跑在新的 @tailwindcss/postcss 引擎上）—— 但没有 Bootstrap、没有 Material、没有任何现成组件库。每个组件都按品牌调过，从 320px 移动端一路响应式到 3840px 超宽屏。

撑起这些营销长页面的两个交互件：

  • 平滑滚动 —— 故事 / 流程 / 作品集这些长页用 Lenis。
  • 可交互的 Leaflet 地图 —— 原住民板块里，ModBox 服务过的每个社区（Pikangikum、Deer Lake、Mishkeegogamang、Muskrat Dam 等）都在地图上，各自有一个深入的项目页。

真正能播放的 hero 视频

首页顶部是一段 1080p 的工厂车间 hero 视频。让自动播放在移动端 Safari 上活下来是真要下功夫的：autoplay-safe 属性、iOS 兼容的编码，再加一条 JS 播放恢复路径处理 Safari 死活不肯起播的情况。营销站的 hero 是第一印象 —— 视频该在的地方出现一个黑框，就是一次跳出。

产品详情 —— 框架做法、饰面标准、典型用途，以及怎么选。
产品详情 —— 框架做法、饰面标准、典型用途，以及怎么选。
流程 —— 接洽 → 现场勘测 → 设计 → 工厂建造 → 运输 → 现场安装，写给第一次买模块化房的客户。
流程 —— 接洽 → 现场勘测 → 设计 → 工厂建造 → 运输 → 现场安装，写给第一次买模块化房的客户。
项目 —— 北部 20+ 个已交付工程，每个都有照片、建造细节和项目背景。
项目 —— 北部 20+ 个已交付工程，每个都有照片、建造细节和项目背景。
原住民 —— 独立板块，带一张标出每个服务社区的可交互 Leaflet 地图。
原住民 —— 独立板块，带一张标出每个服务社区的可交互 Leaflet 地图。
社区深入页 —— 例如 Pikangikum 健身中心和教师住房。
社区深入页 —— 例如 Pikangikum 健身中心和教师住房。
新闻 —— 来自工厂的报道、拨款（OHFC、NOHFC）和设计-建造合同公告。
新闻 —— 来自工厂的报道、拨款（OHFC、NOHFC）和设计-建造合同公告。
联系 —— 可用表单：校验、入库，并把访客地址设为 Reply-To 邮件给团队。
联系 —— 可用表单：校验、入库，并把访客地址设为 Reply-To 邮件给团队。

后端：联系表单 + 分析，不用任何第三方

动态部分跑在 Next.js Route Handlers（Node.js runtime）上：

  • 联系表单 —— 提交先校验、存进 PostgreSQL，再通过 Resend 发给团队，把访客地址设为 Reply-To，这样从收件箱直接回复就回到了线索本人。
  • 分析 —— 第一方 pageview 写进本地 Postgres，用 geoip-lite 做国家级地理富集。没有 Google Analytics，没有任何第三方追踪器 —— 天生对 GDPR 友好。

零信任后台：直接隐身，而不是加个登录

内部运营后台（咨询处理、提交详情、CSV 导出、流量分析）不是靠密码保护的 —— 它靠「根本访问不到」来保护。边缘有一个 Next.js middleware，只放行 loopback 和 Tailscale 的 CGNAT 段（100.64.0.0/10）；对其他任何人，所有后台路由和后台 API 都直接返回 404。后台只能由同一 tailnet 上的团队成员经 Tailscale 访问。没有登录页可打 —— 因为压根没有公开入口可找。

结果与收获

已上线，运行在 modboxmodular.com。 每个页面都在被一家真实的 Thunder Bay 制造商实际使用；访客提交进团队收件箱，后台每天被用来处理这些咨询。这个公开仓库是展示用的 —— 应用源码放在私有仓库里，保护客户内容、后台代码和基础设施细节。

部署刻意做得「无聊」、且端到端自管：单台 Ubuntu 24.04 VM，PM2 跑 next start，Caddy 终结 TLS，本地 PostgreSQL 16 走 loopback + peer 认证，Tailscale 管私有后台访问。上线就是 git pull && npm run build && pm2 restart modbox。

这次构建强化了两点：

  • 后台用「隐身」比「设防」更好。 登录页是一份邀请函；404 是一条死路。把后台在边缘锁到 loopback + tailnet，意味着系统最敏感的部分根本没有公网攻击面 —— 而且比真做一套鉴权流程的代码还少。
  • 第一方分析是个功能，不是妥协。 砍掉第三方追踪器、把 pageview 写进本地 Postgres，给了客户诚实的流量数据、地理富集和零 GDPR 包袱 —— 而且没把访客行为交给任何人。

技术栈与链接

框架： Next.js 16（App Router、RSC、Route Handlers）· React 19 · TypeScript 5

样式与 UI： Tailwind CSS v4 · 完全手写组件 · 响应式 320px → 3840px

交互： Lenis（平滑滚动）· Leaflet（原住民地图）· autoplay-safe <video> hero · 3D 模型查看器

后端： Next.js Route Handlers · Resend（reply-to 邮件）· postgres.js · PostgreSQL 16 · geoip-lite

基础设施： Ubuntu 24.04 VM · PM2 · Caddy（TLS）· Tailscale（零信任后台）· Node.js 20

仓库： github.com/YSKM523/modbox-modular-website（展示用 —— 源码私有）· 线上： modboxmodular.com