单台Nginx部署多个前端项目：IP路径区分 \+ 域名区分完整实战

在日常开发、测试、内网生产环境中，我们经常遇到一个刚需场景：只有一台Nginx服务器，需要同时部署多个独立的Vue/React前端项目。

很多新手会在这里产生困惑：

服务器只有一个公网/内网IP，没有多个域名，怎么区分多个前端服务？
如果有多个域名，Nginx 又是如何做到80端口部署多个网站不冲突？
server_name 和 location 在多前端部署中到底该怎么选？

本文结合实战场景，清晰拆解无域名（纯IP访问）和有独立域名两种部署方案，彻底搞懂单Nginx多前端部署逻辑。

一、核心前置认知（重中之重）

1. Nginx 区分服务的核心逻辑

Nginx 是通过 HTTP请求的 Host 请求头分发请求：

多个 server{} 块可以同时监听同一个端口（80/443）
Nginx 根据请求的 Host 匹配 server_name，命中对应服务配置

2. 两种部署方案核心区别

无域名、仅IP访问 ：只有一个固定IP，无法拆分多个 server_name，只能用 单server + 多location路径区分不同前端项目
有多个独立域名 ：可以配置 多server块 + 独立server_name，域名一一对应前端项目，服务完全隔离

二、场景一：无域名、只有IP（最常用内网场景）

场景特点 ：服务器仅有内网IP（如 192.168.251.8），无公网域名、无DNS解析，所有前端服务只能通过IP访问。

解决方案 ：统一一个 server{} 块，通过不同的 location 路径前缀区分不同前端项目。

1. Nginx 完整配置

所有前端项目共用同一个 server_name（IP+localhost），靠路由路径区分服务：

nginx 复制代码

server {
    listen 80;
    # 适配IP访问、本地localhost访问
    server_name 192.168.251.8 localhost;

    # 主站前端：IP直接访问
    location / {
        root /html/main;
        index index.html;
        # SPA单页路由刷新404解决方案
        try_files $uri $uri/ /index.html;
    }

    # 后台管理前端：/admin 路径访问
    location /admin/ {
        root /html;
        index index.html;
        try_files $uri $uri/ /admin/index.html;
    }

    # 用户端前端：/user 路径访问
    location /user/ {
        root /html;
        index index.html;
        try_files $uri $uri/ /user/index.html;
    }
}

2. 目录结构规范

将多个前端打包文件按路径分类存放：

Plain 复制代码

/html
├── main        # 主站项目
├── admin       # 后台项目
└── user        # 用户端项目

3. 最终访问地址

主站：http://192.168.251.8
后台管理：http://192.168.251.8/admin
用户端：http://192.168.251.8/user

4. 前端打包关键配置（必看，否则资源404）

路径区分的核心弊端：每个子项目必须配置对应基础路由前缀 ，不能用根路径 /。

以 Vite 项目为例：

js 复制代码

// 后台 admin 项目 vite.config.js
export default defineConfig({
  base: '/admin/' 
})

// 用户 user 项目 vite.config.js
export default defineConfig({
  base: '/user/'
})

// 主站项目
export default defineConfig({
  base: '/'
})

5. 方案优缺点

✅ 优点：无需域名、无需配置DNS/hosts，单IP即可部署多个前端，适配所有内网测试环境

❌ 缺点：前端需要修改打包基础路径，多项目路由容易冲突，项目耦合度高

三、场景二：有多个独立域名（公网/正式环境）

场景特点：拥有多个域名（二级域名），所有域名均可解析到同一个Nginx服务器IP。

解决方案 ：配置多个独立 server{} 块，每个服务绑定独立 server_name，服务完全隔离，无需依赖路径区分。

1. 前置准备：域名映射（核心关键）

让多个域名全部指向Nginx服务器IP 192.168.251.8，两种方式：

方式1：公网环境（正式上线）

域名服务商后台配置DNS解析：

web.test.com → 192.168.251.8
admin.test.com → 192.168.251.8
user.test.com → 192.168.251.8

方式2：内网测试（无公网DNS）

修改本机 hosts 文件，手动配置域名与IP映射，模拟域名解析：

Windows：C:\Windows\System32\drivers\etc\hosts
Mac/Linux：/etc/hosts

添加如下内容：

Plain 复制代码

192.168.251.8 web.test.com admin.test.com user.test.com

刷新本地DNS缓存后即可生效。

2. Nginx 完整配置

每个前端项目独立一个 server 块，互不干扰：

nginx 复制代码

# 主站 web.test.com
server {
    listen 80;
    server_name web.test.com;
    root /html/main;
    index index.html;
    try_files $uri $uri/ /index.html;
}

# 后台 admin.test.com
server {
    listen 80;
    server_name admin.test.com;
    root /html/admin;
    index index.html;
    try_files $uri $uri/ /index.html;
}

# 用户端 user.test.com
server {
    listen 80;
    server_name user.test.com;
    root /html/user;
    index index.html;
    try_files $uri $uri/ /index.html;
}

3. 最终访问地址

主站：http://web.test.com
后台：http://admin.test.com
用户端：http://user.test.com

4. 前端打包配置

所有项目统一根路径，无需修改路由前缀，开发、打包更简单：

js 复制代码

export default defineConfig({
  base: '/'
})

5. 方案优缺点

✅ 优点：项目完全隔离、路由干净、无路径冲突、维护简单，是企业正式环境标准方案

❌ 缺点：需要域名支持，内网测试需手动配置hosts映射

四、两种方案核心对比总结

部署方案	适用场景	核心配置	前端打包
IP+Location 路径区分	无域名、纯内网测试、单IP唯一访问入口	单server块，多location区分服务	子项目需配置 base 路径
域名+多Server块	有多个域名、公网上线、正式生产环境	多server块，独立server_name绑定域名	统一 base: /，无需特殊配置

五、最终核心结论（全文重点）

只有IP、没有任何域名时 ：无法使用多 server{} 区分服务，只能通过 同一个server + 多个location路径 部署多个前端，依靠 /admin、/user 等前缀区分项目。
拥有多个域名时 ：通过 本地hosts/DNS解析 将所有域名映射到唯一的Nginx服务器IP，再通过 Nginx 多 server{} 配置、独立server_name 绑定域名，实现多前端项目完全隔离部署。
server_name 是域名/IP匹配规则，location 是路径匹配规则，单Nginx多前端的两种部署模式，本质就是这两个规则的灵活运用。