10分钟让你彻底理解如何配置子域名来部署多个项目

大家好，我是Smooth，一名大二的前端爱好者，目标是想要成为一名前端开发工程师

配置子域名让你一台服务器可以同时部署多个项目

本篇文章将详细为你讲解如何配置子域名让你一台服务器可以同时部署多个项目，新手都能看懂的教程哈哈

需求

有如下需求：

我有一个域名 zhangjiancong.top，我想在上面搭几个web应用，分别是

• 个人博客：myblog.zhangjiancong.top
• 娱乐项目：xxx.zhangjiancong.top

一种办法就是在nginx的document myblog、xxx目录，访问方式就是zhangjiancong.top/myblog

zhangjiancong.top/xxx

但这样有几个缺点

1. 某些web应用可能本身就不支持非根目录的方式访问，导致不可用
2. 因为各个应用可能需要进行location的特殊配置，而这些应用不在根路径的时候，location配置可能有所不同，更加复杂
3. 不够酷，太丑了

需要让 myblog、xxx 都拥有自己的子域名（myblog.zhangjiancong.top、xxx.zhangjiancong.top），可以这么做：

1. 在域名服务商那里，加一个CNAME记录，把需要配置的子域名指向根域对应的主机名即可。
2. 然后在宝塔界面修改 Nginx 配置
3. 添加新站点

具体如下

配置

1. 添加 CNAME 记录

我是阿里云，所以就用阿里云做示例，无论是啥服务商，打开域名解析界面即可

进入到域名解析界面



点击添加记录

配置说明

CNAME记录

什么情况下会用到CNAME记录？

［如果需要将域名指向另一个域名，再由另一个域名提供ip地址，就需要添加CNAME记录］
最常用到CNAME的情况包括：做CDN，配置子域名

CNAME记录的添加说明

解析线路一栏记得改成 默认，中国联通只是后文举例说明该配置项作用

• 记录类型：选择 CNAME

• 主机记录：填子域名（比如需要添加 myblog.zhangjiancong.top的解析，只需要在主机记录处填写 myblog 即可；如果添加 zhangjiancong.top的解析 的解析，主机记录直接留空，系统会自动填一个“@”到输入框内）。

• 解析线路：默认即可（如果不选默认会导致部分特定用户无法解析；在上图中的作用为：除了联通用户之外的所有用户都可正常解析）

• 记录值：CNAME 指向的域名，只可以填写域名，记录生成后会自动在域名后面补一个“.”，这是正常现象

• TTL：添加时系统会自动生成，默认为600秒（TTL为缓存时间，数值越小，修改记录各地生效时间越快）。

点击确认即可

2. 修改 Nginx 配置文件

找到宝塔界面该项

找到配置入口

对配置文件的 server 字段进行如上图的修改

• 由于我主域名放的是我另一个资源 loaf-community，所以我 $doc 初始值为 "loaf-community"，否则为 "" 即可
• if 为匹配规则，root 为服务器对应路径资源，我资源都放在 /www/wwwroot/ 的目录下，大家根据自己服务器真实路径进行配置即可

# 设置子域名目录
set $doc "loaf-community";
if ($host ~ ^(\w+)\.zhangjiancong\.top) {
    set $doc $1;
}

# 设置此时域名对应的root
root /www/wwwroot/$doc;

这样做的好处就是，之后要加个子域名，只要我在 /www/wwwroot 目录中新建一个子目录放新增的项目，取子域名作为目录名，然后在域名服务商新增一条字域名的CNAME记录就搞定了，非常方便。

3. 添加新站点

找到入口



配置子域名及其对应项目资源路径

配置完重启服务器即可

配置过第二步后，之后每次添加新子域名和项目，只用进行第一和第三步即可

以上便是这篇文章的全部内容啦

最后

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程，期待你的关注~

最近发文计划为Webpack 以及 性能优化 知识体系