Nginx路径映射实现多前端项目单域名部署

1. 项目概述

作为一名长期奋战在一线的全栈开发者，我经常遇到这样的场景：公司内部有多个前端项目需要同时上线，但域名资源有限，每个项目单独申请域名既不经济也不高效。这时候，Nginx的路径映射功能就成了救命稻草。通过合理配置，我们可以在同一个域名和端口下部署多个前端项目，通过URL路径进行区分。

这种方案特别适合以下场景：

• 企业内部管理系统（如OA、CRM、ERP等子系统）
• 微前端架构下的多个子应用
• 测试环境的多版本并行部署
• 个人开发者的小型项目集合

2. 核心原理与前置准备

2.1 Nginx路径映射的工作原理

Nginx的location指令配合alias或root，可以将不同的URL路径映射到服务器上的不同物理目录。当用户访问特定路径时，Nginx会根据配置将请求转发到对应的项目目录。

关键区别：

• root指令会将location路径拼接到root路径后面
• alias指令则会用alias路径完全替换location路径

对于前端项目部署，通常推荐使用alias，因为它能更精确地控制路径映射关系。

2.2 项目准备要点

在开始配置前，需要确保：

1. 所有前端项目都已配置正确的publicPath
2. 项目打包后的静态文件已准备好
3. Nginx已安装并可正常访问
4. 服务器上有足够的存储空间

3. 前端项目配置详解

3.1 Vue项目配置

对于Vue CLI创建的项目，修改vue.config.js：

javascript复制// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'  // 生产环境路径
    : '/',            // 开发环境路径
  // 其他配置...
}

关键点：

• publicPath必须以斜杠开头和结尾
• 开发环境通常保持为根路径
• 生产环境路径应与Nginx配置的location匹配

3.2 React项目配置

Create React App项目需要在package.json中配置：

json复制{
  "hom