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 建站系統。
用戶體驗上：注冊即可生成專屬網站，也能綁定自己的域名。
開發者收益：一套系統支撐千百個客戶，大幅降低運維成本。
