Nginx 静态服务实战：在一台服务器上托管多个独立前端项目配置-Nginx-PHP中文网

可以，而且很常见。一台服务器跑多个前端项目，核心靠nginx的多server块或精细化location分流，不需额外装服务、不改端口、不冲突资源；支持域名、端口、url路径前缀三种主流区分方式，并需注意文件权限、history路由兜底、静态资源缓存及独立日志配置。

nginx 静态服务实战：在一台服务器上托管多个独立前端项目配置

可以，而且很常见。一台服务器跑多个前端项目，核心靠 Nginx 的 多 server 块 或 精细化 location 分流，不需额外装服务、不改端口、不冲突资源。

用不同域名区分项目（推荐）

每个项目配一个独立域名（如 a.example.com、b.example.com），Nginx 通过 server_name 自动识别并路由到对应目录：

确保 DNS 已将两个域名都解析到该服务器 IP，或开发阶段可在本地 /etc/hosts 绑定测试

在 /etc/nginx/conf.d/a.conf 中写：

server {
    listen 80;
    server_name a.example.com;
    root /usr/share/nginx/html/project-a;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

同理，b.conf 指向 /usr/share/nginx/html/project-b，server_name 改为 b.example.com
重启生效：sudo nginx -t && sudo systemctl reload nginx

用不同端口区分项目（适合内网或测试）

若暂无域名，直接用端口区分最简单，比如 8080 和 8081：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

配置中去掉 server_name，只保留 listen 和 root
注意开放对应端口（如 sudo ufw allow 8080），防火墙别拦住
前端构建时需设 publicPath 或 base 为相对路径（如 "./"），避免资源 404

用 URL 路径前缀区分（单域名多项目）

所有项目共用一个域名（如 www.example.com），靠路径区分，例如：
www.example.com/app1/ → 项目一
www.example.com/app2/ → 项目二

每个项目构建时必须指定 base: "/app1/"（Vite）或 publicPath: "/app1/"（Vue CLI），否则 JS/CSS 路径会错

Nginx 配置示例：

location /app1/ {
    alias /usr/share/nginx/html/project-a/;
    index index.html;
    try_files $uri $uri/ /app1/index.html;
}
location /app2/ {
    alias /usr/share/nginx/html/project-b/;
    index index.html;
    try_files $uri $uri/ /app2/index.html;
}

注意：alias 结尾带斜杠，且 try_files 后的 fallback 要带前缀路径

关键细节不能漏

不管哪种方式，这几个点直接影响是否能正常访问：

文件权限：Nginx 进程（通常是 www-data 或 nginx 用户）必须对项目目录有读取和执行权限，建议：sudo chown -R www-data:www-data /usr/share/nginx/html/project-a
History 路由兜底：Vue/React 项目启用 history 模式时，try_files $uri $uri/ /index.html 必须存在，否则刷新页面 404
静态资源缓存：加一句 expires 1y; 在 location ~ \.(js|css|png|jpg|gif)$ 块里，提升加载速度
日志定位问题：每个 server 块单独配 access_log 和 error_log，出问题一眼看到是哪个项目报错

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！