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

在日常开发、测试、内网生产环境中我们经常遇到一个刚需场景只有一台Nginx服务器需要同时部署多个独立的Vue/React前端项目。很多新手会在这里产生困惑服务器只有一个公网/内网IP没有多个域名怎么区分多个前端服务如果有多个域名Nginx 又是如何做到80端口部署多个网站不冲突server_name和location在多前端部署中到底该怎么选本文结合实战场景清晰拆解无域名纯IP访问和有独立域名两种部署方案彻底搞懂单Nginx多前端部署逻辑。一、核心前置认知重中之重1. Nginx 区分服务的核心逻辑Nginx 是通过HTTP请求的 Host 请求头分发请求多个server{}块可以同时监听同一个端口80/443Nginx 根据请求的 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_nameIPlocalhost靠路由路径区分服务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. 目录结构规范将多个前端打包文件按路径分类存放/html ├── main # 主站项目 ├── admin # 后台项目 └── user # 用户端项目3. 最终访问地址主站http://192.168.251.8后台管理http://192.168.251.8/admin用户端http://192.168.251.8/user4. 前端打包关键配置必看否则资源404路径区分的核心弊端每个子项目必须配置对应基础路由前缀不能用根路径/。以 Vite 项目为例// 后台 admin 项目 vite.config.jsexportdefaultdefineConfig({base:/admin/})// 用户 user 项目 vite.config.jsexportdefaultdefineConfig({base:/user/})// 主站项目exportdefaultdefineConfig({base:/})5. 方案优缺点✅ 优点无需域名、无需配置DNS/hosts单IP即可部署多个前端适配所有内网测试环境❌ 缺点前端需要修改打包基础路径多项目路由容易冲突项目耦合度高三、场景二有多个独立域名公网/正式环境场景特点拥有多个域名二级域名所有域名均可解析到同一个Nginx服务器IP。解决方案配置多个独立server{}块每个服务绑定独立server_name服务完全隔离无需依赖路径区分。1. 前置准备域名映射核心关键让多个域名全部指向Nginx服务器IP192.168.251.8两种方式方式1公网环境正式上线域名服务商后台配置DNS解析web.test.com→ 192.168.251.8admin.test.com→ 192.168.251.8user.test.com→ 192.168.251.8方式2内网测试无公网DNS修改本机hosts文件手动配置域名与IP映射模拟域名解析WindowsC:\Windows\System32\drivers\etc\hostsMac/Linux/etc/hosts添加如下内容192.168.251.8 web.test.com admin.test.com user.test.com刷新本地DNS缓存后即可生效。2. Nginx 完整配置每个前端项目独立一个server块互不干扰# 主站 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.com4. 前端打包配置所有项目统一根路径无需修改路由前缀开发、打包更简单exportdefaultdefineConfig({base:/})5. 方案优缺点✅ 优点项目完全隔离、路由干净、无路径冲突、维护简单是企业正式环境标准方案❌ 缺点需要域名支持内网测试需手动配置hosts映射四、两种方案核心对比总结部署方案适用场景核心配置前端打包IPLocation 路径区分无域名、纯内网测试、单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多前端的两种部署模式本质就是这两个规则的灵活运用。