张牛顿1. 项目背景与核心需求
在Web应用开发中，我们经常遇到这样的场景：公司有多个前端项目需要同时在线运行，但服务器资源有限，无法为每个项目单独分配域名或端口。这时候就需要在同一个域名和端口下部署多个前端应用，比如官网、管理后台、用户中心等。
传统做法是为每个项目配置不同的子域名（如admin.example.com、user.example.com），但这需要额外购买SSL证书和DNS解析配置。更经济的方案是利用Nginx强大的路由能力，在单一域名（如www.example.com）的80/443端口下，通过URL路径区分不同项目（如www.example.com/admin/、www.example.com/user/）。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术方案设计
2.1 基础架构原理
Nginx通过location指令实现路径匹配，配合try_files或proxy_pass将请求路由到不同的静态资源目录或后端服务。关键设计要点包括：
- URL路径规划：每个项目分配唯一的路径前缀（如/admin、/dashboard）
- 静态资源处理：配置正确的root目录和try_files规则
- History模式兼容：Vue/React等SPA项目的路由兼容方案
- 缓存策略：为不同项目设置差异化的缓存规则
2.2 典型配置方案
nginx复制server {
listen 80;
server_name example.com;
# 主站项目
location / {
root /var/www/main;
try_files $uri $uri/ /index.html;
}
# 管理后台项目
location /admin {
alias /var/www/admin;
try_files $uri $uri/ /admin/index.html;
}
# 用户中心项目
location /user {
alias /var/www/user;
try_files $uri $uri/ /user/index.html;
}
}
3. 详细实现步骤
3.1 项目构建与部署准备
-
构建输出配置：
- Vue项目：在vue.config.js中设置publicPath
javascript复制module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/' }- React项目：在package.json中配置homepage
json复制"homepage": "/user" -
静态资源部署：
bash复制# 主站项目 npm run build rsync -avz dist/ user@server:/var/www/main/ # 管理后台 npm run build rsync -avz dist/ user@server:/var/www/admin/
3.2 Nginx配置详解
3.2.1 基础路由配置
nginx复制server {
listen 80;
server_name example.com;
# 主站 - 处理根路径请求
location / {
root /var/www/main;
index index.html;
# SPA路由支持
try_files $uri $uri/ /index.html;
}
# 管理后台 - 使用alias精确匹配
location /admin {
alias /var/www/admin;
index index.html;
# 注意alias与try_files的配合
try_files $uri $uri/ /admin/index.html;
# 后台API代理
location /admin/api {
proxy_pass http://backend_server;
}
}
}
3.2.2 高级配置项
- 缓存控制：
nginx复制location ~* \.(js|css|png)$ {
expires 365d;
add_header Cache-Control "public";
}
- Gzip压缩：
nginx复制gzip on;
gzip_types text/plain text/css application/json application/javascript;
- 跨域处理：
nginx复制location /api {
add_header 'Access-Control-Allow-Origin' '$http_origin';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
proxy_pass http://api_server;
}
4. 常见问题与解决方案
4.1 静态资源404错误
问题现象：页面可以打开但CSS/JS加载失败
排查步骤：
- 检查Nginx错误日志：
tail -f /var/log/nginx/error.log - 确认资源路径是否正确：
bash复制
curl -I http://example.com/admin/static/js/main.js - 验证文件权限：
bash复制ls -la /var/www/admin/static/js/main.js
解决方案：
- 确保publicPath配置正确
- 使用alias而非root时注意路径拼接规则
- 重建项目并清理缓存：
bash复制rm -rf node_modules/.cache npm run build
4.2 SPA路由刷新404
问题原因：直接访问子路由时Nginx尝试查找真实目录
解决方案：
nginx复制location /user {
alias /var/www/user;
try_files $uri $uri/ /user/index.html;
}
4.3 性能优化建议
- 启用HTTP/2：
nginx复制listen 443 ssl http2;
- 资源预加载：
html复制<link rel="preload" href="/static/js/main.js" as="script">
- 负载均衡配置：
nginx复制upstream frontend {
server 192.168.1.10:8000;
server 192.168.1.11:8000;
}
server {
location / {
proxy_pass http://frontend;
}
}
5. 安全加固措施
5.1 基础安全配置
nginx复制# 禁用服务器信息
server_tokens off;
# 防止点击劫持
add_header X-Frame-Options "SAMEORIGIN";
# XSS防护
add_header X-XSS-Protection "1; mode=block";
5.2 访问控制
- IP白名单：
nginx复制location /admin {
allow 192.168.1.0/24;
deny all;
}
- Basic认证：
nginx复制location /admin {
auth_basic "Admin Area";
auth_basic_user_file /etc/nginx/.htpasswd;
}
5.3 HTTPS配置最佳实践
nginx复制server {
listen 443 ssl http2;
server_name example.com;
ssl_certificate /path/to/fullchain.pem;
ssl_certificate_key /path/to/privkey.pem;
# 启用OCSP Stapling
ssl_stapling on;
ssl_stapling_verify on;
# 强制HTTPS
if ($scheme != "https") {
return 301 https://$host$request_uri;
}
}
6. 监控与维护
6.1 日志分析配置
nginx复制log_format main '$remote_addr - $remote_user [$time_local] '
'"$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent"';
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log warn;
6.2 性能监控指标
- 活跃连接数：
bash复制netstat -anp | grep nginx | wc -l
- 请求处理速率：
bash复制tail -f access.log | awk '{print $4}' | uniq -c
- 错误率监控：
bash复制awk '{print $9}' access.log | sort | uniq -c | sort -rn
6.3 自动化部署方案
使用CI/CD工具实现自动部署：
yaml复制# .gitlab-ci.yml示例
deploy_prod:
stage: deploy
script:
- npm install
- npm run build
- rsync -avz --delete dist/ user@server:/var/www/admin/
- ssh user@server "sudo systemctl reload nginx"
only:
- master
7. 扩展应用场景
7.1 多环境部署方案
nginx复制# 开发环境
server {
listen 8080;
server_name dev.example.com;
location /admin {
alias /var/www/admin-dev;
}
}
# 预发布环境
server {
listen 8081;
server_name stage.example.com;
}
7.2 灰度发布实现
nginx复制# 基于Cookie的灰度发布
map $cookie_version $admin_root {
default "/var/www/admin-v2";
"v1" "/var/www/admin-v1";
}
server {
location /admin {
alias $admin_root;
}
}
7.3 微前端架构集成
nginx复制# 主应用
location / {
root /var/www/main;
}
# 子应用1
location /app1 {
alias /var/www/app1;
try_files $uri $uri/ /app1/index.html;
}
# 子应用2
location /app2 {
proxy_pass http://app2_server;
}
8. 性能调优实战
8.1 静态资源优化
- 图片压缩：
bash复制find . -type f -name "*.png" -exec optipng -o7 {} \;
- WebP转换：
nginx复制location ~* \.(jpg|png)$ {
add_header Vary Accept;
try_files $uri.webp $uri =404;
}
8.2 连接参数优化
nginx复制# 保持连接
keepalive_timeout 75s;
keepalive_requests 100;
# 缓冲区优化
client_body_buffer_size 10K;
client_header_buffer_size 1k;
client_max_body_size 8m;
8.3 负载测试方法
使用wrk进行压力测试：
bash复制wrk -t4 -c100 -d30s https://example.com/admin
9. 容器化部署方案
9.1 Docker Compose配置
yaml复制version: '3'
services:
nginx:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./main:/var/www/main
- ./admin:/var/www/admin
restart: always
9.2 Kubernetes部署
yaml复制apiVersion: apps/v1
kind: Deployment
metadata:
name: nginx
spec:
replicas: 3
selector:
matchLabels:
app: nginx
template:
metadata:
labels:
app: nginx
spec:
containers:
- name: nginx
image: nginx:alpine
ports:
- containerPort: 80
volumeMounts:
- mountPath: /etc/nginx/nginx.conf
name: nginx-config
volumes:
- name: nginx-config
configMap:
name: nginx-config
10. 故障排查手册
10.1 诊断命令集
- 检查配置语法：
bash复制nginx -t
- 查看运行状态：
bash复制systemctl status nginx
- 实时监控请求：
bash复制tail -f /var/log/nginx/access.log | awk '{print $7,$9}'
10.2 常见错误代码
| 错误代码 | 可能原因 | 解决方案 |
|---|---|---|
| 403 | 权限不足 | 检查文件权限和SELinux上下文 |
| 404 | 路径错误 | 验证root/alias配置和文件路径 |
| 502 | 后端超时 | 调整proxy_read_timeout值 |
| 503 | 服务不可用 | 检查上游服务状态和连接数限制 |
10.3 性能瓶颈分析
- 慢请求分析：
bash复制awk '$NF > 1 {print $7,$NF}' access.log | sort -k2 -rn | head
- 连接数监控：
bash复制watch -n 1 "netstat -an | grep :80 | wc -l"
- 内存使用检查：
bash复制ps -eo pid,rss,comm | grep nginx