1. 同域名多路径部署的核心挑战在现代Web应用部署中我们经常遇到这样的需求同一个域名下需要部署多个独立的前后端应用这些应用可能分属不同团队开发、采用不同技术栈但需要共享同一个域名。比如公司官网www.example.com可能需要同时承载主站/、管理后台/admin、客户门户/portal等多个子系统。这种部署方式面临几个关键问题路径冲突风险不同应用可能使用相同的URL路径如都定义了/login路由静态资源管理各应用的JS/CSS等资源文件需要隔离避免命名冲突路由模式适配特别是前端SPA应用需要正确处理HTML5 History模式会话隔离需求不同子系统可能需要独立的会话管理2. Nginx基础配置策略2.1 静态资源服务配置对于前后端分离的典型架构Nginx需要同时处理前端静态文件HTML/JS/CSS后端API请求转发Websocket等特殊协议基础配置模板如下server { listen 80; server_name example.com; # 前端静态资源 location / { root /var/www/frontend; try_files $uri $uri/ /index.html; } # 后台管理界面 location /admin { alias /var/www/admin; try_files $uri $uri/ /admin/index.html; } # 后端API转发 location /api { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }关键配置说明try_files指令确保前端路由能正确回退到index.htmlalias与root的区别alias会完全替换匹配路径root会追加匹配路径对于Vue/React等SPA应用必须配置HTML5 History模式支持2.2 路径匹配优先级规则Nginx的location匹配遵循以下优先级顺序精确匹配location /path前缀匹配location ^~ /prefix正则匹配location ~ /regex普通前缀匹配location /path实际配置示例location /login { # 精确匹配/login路径 proxy_pass http://auth_service; } location ^~ /static { # 优先匹配/static前缀 root /var/www/shared_static; } location ~ /api/v[1-9] { # 正则匹配API版本路径 proxy_pass http://api_gateway; }3. 高级路由配置技巧3.1 动态路径映射对于需要动态部署多套环境的场景如测试环境、预发环境可以使用正则捕获location ~ ^/env/(?env_name[^/])/admin { alias /var/www/$env_name/admin; try_files $uri $uri/ /$env_name/admin/index.html; # 环境特定配置 if ($env_name staging) { add_header X-Environment STAGING; } }这种配置允许通过URL路径动态切换部署环境/env/prod/admin - 生产环境后台/env/staging/admin - 预发环境后台3.2 微前端架构支持现代微前端架构下可能需要更复杂的路径处理location ~ ^/app/([^/]) { # 提取子应用名称 set $subapp $1; # 检查子应用目录是否存在 if (!-d /var/www/subapps/$subapp) { return 404; } # 动态设置root路径 root /var/www/subapps/$subapp/dist; # 特殊处理主入口文件 location ~ ^/app/$subapp/(.*)$ { try_files $1 $1/ /index.html; } # 静态资源缓存配置 location ~* \.(js|css|png)$ { expires 1y; add_header Cache-Control public; } }4. 安全与性能优化4.1 安全防护配置# 禁止访问隐藏文件 location ~ /\. { deny all; } # API路径防爬虫 location /api { # 限制请求方法 limit_except GET POST PUT DELETE { deny all; } # 速率限制 limit_req zoneapi burst10 nodelay; # CORS配置 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true; proxy_pass http://api_server; }4.2 缓存策略优化针对不同资源类型设置差异化缓存# 永久缓存带hash的资源 location ~* \.[a-f0-9]{8}\.(js|css|png|jpg)$ { expires max; add_header Cache-Control public, immutable; } # 不缓存HTML文件 location ~* \.html$ { expires -1; add_header Cache-Control no-store; } # 接口数据缓存 location ~ /api/cacheable { proxy_cache api_cache; proxy_cache_valid 200 5m; proxy_cache_key $scheme$request_method$host$request_uri; }5. 实战问题排查指南5.1 常见问题与解决方案问题现象可能原因解决方案404错误路径拼写错误或文件不存在检查root/alias配置确认文件路径403禁止访问权限配置错误检查文件权限和SELinux上下文路由刷新失效SPA的History模式未配置确保try_files回退到index.html静态资源加载失败路径基准错误检查publicPath/baseUrl配置API请求被拦截跨域配置缺失添加正确的CORS头5.2 调试技巧日志分析log_format debug $remote_addr - $request [$status] $http_referer $http_user_agent PATH: $request_uri ALIAS: $alias; location / { access_log /var/log/nginx/debug.log debug; # ... }变量检查location /test { return 200 URI: $uri\nDOC_ROOT: $document_root\nREQ_PATH: $request_filename; }重写规则测试location /rewrite-test { rewrite ^/rewrite-test/(.*)$ /newpath/$1 break; proxy_pass http://backend; }6. 现代部署方案演进6.1 Docker化部署使用Docker Compose管理多套环境version: 3 services: nginx: image: nginx:alpine volumes: - ./nginx.conf:/etc/nginx/nginx.conf - ./frontend:/var/www/frontend - ./admin:/var/www/admin ports: - 80:80 networks: - app_net backend: image: backend:latest networks: - app_net networks: app_net: driver: bridge对应的Nginx配置需要适配容器网络upstream backend { server backend:3000; } server { location /api { proxy_pass http://backend; } }6.2 自动化部署脚本结合CI/CD的部署脚本示例#!/bin/bash # 同步前端构建产物 rsync -avz --delete ./dist/ userserver:/var/www/${APP_ENV}/frontend/ # 动态生成Nginx配置 envsubst nginx.template /etc/nginx/conf.d/${APP_ENV}.conf # 优雅重载配置 nginx -t nginx -s reload || echo Reload failed对应的模板文件nginx.templateserver { listen 80; server_name ${DOMAIN}; location / { root /var/www/${APP_ENV}/frontend; try_files $uri $uri/ /index.html; } } 
长河君 · 2026/11/2 18:28:20 · 阅读 1.2k Nginx多路径部署与路由配置实战指南
1. 同域名多路径部署的核心挑战在现代Web应用部署中我们经常遇到这样的需求同一个域名下需要部署多个独立的前后端应用这些应用可能分属不同团队开发、采用不同技术栈但需要共享同一个域名。比如公司官网www.example.com可能需要同时承载主站/、管理后台/admin、客户门户/portal等多个子系统。这种部署方式面临几个关键问题路径冲突风险不同应用可能使用相同的URL路径如都定义了/login路由静态资源管理各应用的JS/CSS等资源文件需要隔离避免命名冲突路由模式适配特别是前端SPA应用需要正确处理HTML5 History模式会话隔离需求不同子系统可能需要独立的会话管理2. Nginx基础配置策略2.1 静态资源服务配置对于前后端分离的典型架构Nginx需要同时处理前端静态文件HTML/JS/CSS后端API请求转发Websocket等特殊协议基础配置模板如下server { listen 80; server_name example.com; # 前端静态资源 location / { root /var/www/frontend; try_files $uri $uri/ /index.html; } # 后台管理界面 location /admin { alias /var/www/admin; try_files $uri $uri/ /admin/index.html; } # 后端API转发 location /api { proxy_pass http://backend_server; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }关键配置说明try_files指令确保前端路由能正确回退到index.htmlalias与root的区别alias会完全替换匹配路径root会追加匹配路径对于Vue/React等SPA应用必须配置HTML5 History模式支持2.2 路径匹配优先级规则Nginx的location匹配遵循以下优先级顺序精确匹配location /path前缀匹配location ^~ /prefix正则匹配location ~ /regex普通前缀匹配location /path实际配置示例location /login { # 精确匹配/login路径 proxy_pass http://auth_service; } location ^~ /static { # 优先匹配/static前缀 root /var/www/shared_static; } location ~ /api/v[1-9] { # 正则匹配API版本路径 proxy_pass http://api_gateway; }3. 高级路由配置技巧3.1 动态路径映射对于需要动态部署多套环境的场景如测试环境、预发环境可以使用正则捕获location ~ ^/env/(?env_name[^/])/admin { alias /var/www/$env_name/admin; try_files $uri $uri/ /$env_name/admin/index.html; # 环境特定配置 if ($env_name staging) { add_header X-Environment STAGING; } }这种配置允许通过URL路径动态切换部署环境/env/prod/admin - 生产环境后台/env/staging/admin - 预发环境后台3.2 微前端架构支持现代微前端架构下可能需要更复杂的路径处理location ~ ^/app/([^/]) { # 提取子应用名称 set $subapp $1; # 检查子应用目录是否存在 if (!-d /var/www/subapps/$subapp) { return 404; } # 动态设置root路径 root /var/www/subapps/$subapp/dist; # 特殊处理主入口文件 location ~ ^/app/$subapp/(.*)$ { try_files $1 $1/ /index.html; } # 静态资源缓存配置 location ~* \.(js|css|png)$ { expires 1y; add_header Cache-Control public; } }4. 安全与性能优化4.1 安全防护配置# 禁止访问隐藏文件 location ~ /\. { deny all; } # API路径防爬虫 location /api { # 限制请求方法 limit_except GET POST PUT DELETE { deny all; } # 速率限制 limit_req zoneapi burst10 nodelay; # CORS配置 add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true; proxy_pass http://api_server; }4.2 缓存策略优化针对不同资源类型设置差异化缓存# 永久缓存带hash的资源 location ~* \.[a-f0-9]{8}\.(js|css|png|jpg)$ { expires max; add_header Cache-Control public, immutable; } # 不缓存HTML文件 location ~* \.html$ { expires -1; add_header Cache-Control no-store; } # 接口数据缓存 location ~ /api/cacheable { proxy_cache api_cache; proxy_cache_valid 200 5m; proxy_cache_key $scheme$request_method$host$request_uri; }5. 实战问题排查指南5.1 常见问题与解决方案问题现象可能原因解决方案404错误路径拼写错误或文件不存在检查root/alias配置确认文件路径403禁止访问权限配置错误检查文件权限和SELinux上下文路由刷新失效SPA的History模式未配置确保try_files回退到index.html静态资源加载失败路径基准错误检查publicPath/baseUrl配置API请求被拦截跨域配置缺失添加正确的CORS头5.2 调试技巧日志分析log_format debug $remote_addr - $request [$status] $http_referer $http_user_agent PATH: $request_uri ALIAS: $alias; location / { access_log /var/log/nginx/debug.log debug; # ... }变量检查location /test { return 200 URI: $uri\nDOC_ROOT: $document_root\nREQ_PATH: $request_filename; }重写规则测试location /rewrite-test { rewrite ^/rewrite-test/(.*)$ /newpath/$1 break; proxy_pass http://backend; }6. 现代部署方案演进6.1 Docker化部署使用Docker Compose管理多套环境version: 3 services: nginx: image: nginx:alpine volumes: - ./nginx.conf:/etc/nginx/nginx.conf - ./frontend:/var/www/frontend - ./admin:/var/www/admin ports: - 80:80 networks: - app_net backend: image: backend:latest networks: - app_net networks: app_net: driver: bridge对应的Nginx配置需要适配容器网络upstream backend { server backend:3000; } server { location /api { proxy_pass http://backend; } }6.2 自动化部署脚本结合CI/CD的部署脚本示例#!/bin/bash # 同步前端构建产物 rsync -avz --delete ./dist/ userserver:/var/www/${APP_ENV}/frontend/ # 动态生成Nginx配置 envsubst nginx.template /etc/nginx/conf.d/${APP_ENV}.conf # 优雅重载配置 nginx -t nginx -s reload || echo Reload failed对应的模板文件nginx.templateserver { listen 80; server_name ${DOMAIN}; location / { root /var/www/${APP_ENV}/frontend; try_files $uri $uri/ /index.html; } }