是的,你完全可以在一个 Nginx 配置文件中部署多个项目,而且不需要为每个项目创建单独的 server 块。以下是两种高效的实现方式:
方案一:单端口多路径部署(推荐)
适合场景:所有项目共享同一个端口(如你获得的 9527 端口),通过 URL 路径区分不同项目
nginx
# /etc/nginx/sites-available/multi-projects
server {
listen 9527;
server_name 113.124.78.90;
# ================= 项目1:电商平台 =================
location /ecommerce {
# 前端配置
alias /var/www/ecommerce/build;
try_files $uri $uri/ /ecommerce/index.html;
# 后端API代理
location /ecommerce/api {
proxy_pass http://127.0.0.1:8001;
include proxy_params; # 包含通用代理配置
}
}
# ================= 项目2:博客系统 =================
location /blog {
# 前端配置
alias /var/www/blog/build;
try_files $uri $uri/ /blog/index.html;
# 后端API代理
location /blog/api {
proxy_pass http://127.0.0.1:8002;
include proxy_params;
}
}
# ================= 项目3:管理后台 =================
location /admin {
# 前端配置
alias /var/www/admin/build;
try_files $uri $uri/ /admin/index.html;
# 后端API代理
location /admin/api {
proxy_pass http://127.0.0.1:8003;
include proxy_params;
}
}
# 默认重定向到第一个项目
location = / {
return 302 /ecommerce;
}
}
# 创建通用代理配置(/etc/nginx/proxy_params)
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_cache_bypass $http_upgrade;
方案二:多端口单配置(备选)
适合场景:IT 部门允许开放多个端口(需要提前申请)
nginx
# /etc/nginx/sites-available/multi-ports
# 项目1:端口9527
server {
listen 9527;
# ... 完整项目配置(含前后端)...
}
# 项目2:端口9528
server {
listen 9528;
# ... 完整项目配置...
}
# 项目3:端口9529
server {
listen 9529;
# ... 完整项目配置...
}
关键配置说明
-
aliasvsroot:- 使用
alias时:location /ecommerce对应/var/www/ecommerce/build - 使用
root时:location /ecommerce会映射到/var/www/ecommerce/build/ecommerce
- 使用
-
嵌套 location 技巧:
nginx
location /project { # 处理前端 location /project/api { # 处理后端API } } -
通用配置复用:
- 创建
/etc/nginx/proxy_params文件存放通用代理设置 - 通过
include proxy_params;引入
- 创建
部署目录结构建议
text
/var/www/
├── ecommerce/
│ ├── build/ # React 构建文件
│ └── server/ # Koa 后端代码
├── blog/
│ ├── build/
│ └── server/
└── admin/
├── build/
└── server/
各项目访问方式
| 项目 | 前端访问地址 | 后端 API 地址 |
|---|---|---|
| 电商平台 | http://113.124.78.90:9527/ecommerce | http://113.124.78.90:9527/ecommerce/api |
| 博客系统 | http://113.124.78.90:9527/blog | http://113.124.78.90:9527/blog/api |
| 管理后台 | http://113.124.78.90:9527/admin | http://113.124.78.90:9527/admin/api |
优势分析
-
配置集中化:所有项目配置在单个文件中,方便管理
-
端口节约:多个项目共享同一端口,无需额外申请
-
维护简单:
- 添加新项目只需新增一个
location块 - 修改通用配置只需更新一处
- 添加新项目只需新增一个
-
资源隔离:每个项目有独立目录,互不影响
前端项目特殊处理
在 React/Vue 项目中需要配置基础路径:
js
// React 项目 (create-react-app)
// 在 package.json 中添加:
"homepage": "/ecommerce"
// 或在构建时指定:
PUBLIC_URL=/ecommerce npm run build
// Vue 项目 (vue.config.js)
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/blog/'
: '/'
}
注意事项
-
避免路径冲突:确保各项目的路径前缀唯一(如
/ecommerce,/blog) -
权限统一配置:
bash
sudo chown -R www-data:www-data /var/www sudo chmod -R 755 /var/www -
日志分离:为每个项目配置独立日志
nginx
location /ecommerce { access_log /var/log/nginx/ecommerce.access.log; error_log /var/log/nginx/ecommerce.error.log; }
这种配置方式既满足了多项目部署需求,又保持了配置文件的简洁性,特别适合在受限端口环境下的多项目部署场景。