我如何使用 Next.js、Nginx 和 Coolify 构建多租户静态站点引擎

Source: Dev.to

高层概览

在深入技术细节之前，先看看系统的整体结构。

如今大多数落地页都是手工构建或使用拖拽工具。我想要一种不同的方式：

• 自动化
• 基于配置
• 超快
• SEO 优化
• 超低托管成本
• 能够轻松托管 数百 个站点

架构

使用 Next.js 构建的单一引擎：

• 为每个租户提供 基于配置 的系统
• 组件工厂 负责组装页面
• 静态导出 生成纯 HTML
• 自动生成站点地图、robots、分析脚本、Nginx 配置等资产
• 部署由 Coolify 处理，分配子域名或自定义域名

一个引擎 → 无限的落地页。

构建流水线

业务配置

每个租户都有一个包含品牌、颜色、服务、文案等信息的 JSON 配置文件。

组件工厂

引擎从可复用的区块模板库中挑选组件。示例结构：

hero
├─ default
└─ split

features
├─ grid
└─ list

footer
├─ default
└─ multi-columns

gallery
├─ default
└─ scrolling

静态导出（Next.js）

Next.js 将所有内容编译为静态 HTML。

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
};

export default nextConfig;

自动生成的资产

系统会生成：

• sitemap.xml
• robots.txt
• 分析脚本
• OpenGraph 元数据等

Nginx 配置

生成器为每个租户构建路由和子域名的 Nginx 配置。

通过 Coolify 部署

Coolify 读取静态输出，重新加载 Nginx，站点即可上线。

实际意义

不必一次一个地手工构建落地页，你可以：

1. 为新业务 onboarding
2. 填写其 JSON 配置
3. 选择所需的区块
4. 运行生成器
5. 立即部署一个功能完整、SEO 就绪的落地页

这既快速、低成本，又具备可扩展性和极高的灵活性。

为什么在此类项目中选择静态 > SSR

对于 多租户 系统，托管数十或数百个小型企业站点时，服务器端渲染（SSR）往往显得大材小用：

• 每次请求都需要启动 Node.js 进程
• 中间件、认证、数据获取、布局逻辑都会在每次访问时执行
• 并发、内存、冷启动、扩容等问题随之而来

使用静态导出：

• 页面在构建时就渲染为 HTML
• Nginx（或任何简易 Web 服务器）只负责从磁盘提供文件
• 无需每次请求执行 React/Next.js → 更少 CPU、更少内存、更少故障点

静态站点的优势：

• 更快的首字节时间（无需渲染步骤）
• 扩展更简单
• 性能更易于预估
• 基础设施成本更低

如果以后需要动态功能，仍然可以添加：

• 小型 API 路由
• 客户端交互
• Webhook 或后台任务

站点的核心仍保持为静态。

为什么我能在“廉价”服务器上托管数百个页面

一台基础云服务器（例如小型 DigitalOcean、Vultr 或 Linode 实例）通常费用在 $4–7 / 月，配置大致为：

• 1 vCPU
• 0.5–1 GB RAM
• ~10–25 GB SSD
• 500 GB – 1 TB 出站带宽

假设平均页面大小约 300 KB：

• 500 GB 出站流量 → 大约 1.6 百万页面浏览/月
• 1 TB 出站流量 → 大约 3.3 百万页面浏览/月

即使考虑到图片和其他资源，你仍然可以轻松支撑数十万的页面浏览量。

多租户示例场景

• 100 个租户 × 每月 1,000 次浏览 = 100,000 次浏览/月

使用静态托管和 Nginx 时，瓶颈在于带宽，而非 CPU 或内存。

如果流量增长，你可以：

• 在前端加装 CDN
• 横向扩展更多小机器
• 升级到稍大一点的实例

核心优势依旧：

静态 + 多租户 = 用极少的基础设施支撑大量站点。