SaaS 建站从 0 到 1 教程：Vue 动态域名 + 后端子域名管理 + Nginx 配置
一、什么是 SaaS 建站？
SaaS（Software as a Service）建站，就是通过一套统一的系统，支持用户在线注册、绑定域名、快速生成专属网站。和传统「帮客户单独搭建网站」不同，SaaS 的核心在于 一套系统服务多个客户。
比如：
- 企业客户 A 注册后，自动生成
a.yourdomain.com。 - 企业客户 B 注册后，自动生成
b.yourdomain.com。 - 用户也可以绑定自己的域名，比如
companyA.com→ 解析到系统 IP。
这背后依赖的就是 动态域名解析 + 多租户架构。
二、整体技术架构
-
前端（Vue）
- 根据访问域名动态请求对应租户接口。
- 例如访问
a.yourdomain.com，前端在初始化时获取租户配置，渲染页面。
-
后端（Node.js / Python / Java 等）
- 用户提交网站信息 → 自动生成子域名。
- 写入数据库：租户信息、绑定的域名。
- 提供接口：根据访问域名返回对应租户数据。
-
域名 & Nginx
- Nginx 配置泛域名解析（
*.yourdomain.com）。 - 配置 SSL 泛域名证书（支持所有子域名 https）。
- 如果用户绑定自定义域名 → 在 DNS 里 CNAME 到系统主域名。
- Nginx 配置泛域名解析（
三、准备清单
- 开发语言 & 框架：前端 Vue，后端任意（Node.js/Java/Python）。
- 数据库：MySQL / PostgreSQL / MongoDB。
- 服务器 & 域名：一台云服务器，一个主域名。
- Nginx：反向代理、SSL 证书管理。
- SSL 证书：申请泛域名证书（
*.yourdomain.com）。 - Vue HTTP 请求工具：Axios / Fetch。
四、前端：Vue 动态域名配置
在 Vue 中，我们需要根据当前访问的域名动态配置请求的 API 地址。
例如 a.yourdomain.com → 请求 https://api.yourdomain.com/tenant?a。
// utils/request.js
import axios from 'axios';const host = window.location.host; // 当前域名
let tenant = host.split('.')[0]; // 取子域名前缀const service = axios.create({baseURL: `https://api.yourdomain.com/${tenant}`, timeout: 5000
});export default service;
在页面加载时，Vue 会根据子域名请求对应的租户接口，实现 多租户页面渲染。
五、后端：子域名生成与绑定
后端核心逻辑：
-
用户注册后 → 生成子域名
- 例如
user1→user1.yourdomain.com - 写入数据库：
tenant_id = user1，domain = user1.yourdomain.com。
- 例如
-
自定义域名绑定
-
用户提交
www.company.com -
提示用户在 DNS 里添加 CNAME 解析：
www.company.com → yourdomain.com -
后端校验并绑定。
-
接口设计示例：
POST /api/tenant/create
{"name": "用户公司","customDomain": "www.company.com"
}
返回：
{"subDomain": "user1.yourdomain.com","status": "pending_dns"
}
六、Nginx 配置与证书
-
泛域名解析
在域名 DNS 里配置：*.yourdomain.com → 服务器IP -
Nginx 配置
server {listen 80;server_name *.yourdomain.com;location / {proxy_pass http://127.0.0.1:3000;} } -
SSL 泛域名证书
申请*.yourdomain.com的证书，然后配置：server {listen 443 ssl;server_name *.yourdomain.com;ssl_certificate /etc/nginx/ssl/yourdomain.com.crt;ssl_certificate_key /etc/nginx/ssl/yourdomain.com.key;location / {proxy_pass http://127.0.0.1:3000;} } -
用户自定义域名
如果绑定www.company.com→ 需要在 Nginxserver_name里加上。
证书可以使用 Let’s Encrypt 免费签发。
七、这套架构能做什么？
- 建站 SaaS：用户注册后秒级生成专属网站。
- 小程序 / H5 SaaS：一套系统多租户，节省开发与运维。
- 多品牌营销页：不同子域名展示不同品牌页面。
- 教育/电商/社区 SaaS：一套系统服务上千用户。
八、延伸与拓展
- SEO 优化：独立域名更利于搜索引擎收录。
- 多租户数据隔离：数据库层面按租户隔离，保证安全性。
- 灰度发布：不同租户可以使用不同版本前端/功能。
- 自动化 SSL：使用 Certbot 自动续签用户自定义域名证书。
九、总结
通过 Vue 动态请求 + 后端子域名管理 + Nginx 泛域名解析，我们可以快速实现一个 SaaS 建站系统。
用户体验上：注册即可生成专属网站，也能绑定自己的域名。
开发者收益：一套系统支撑千百个客户，大幅降低运维成本。
