Nginx 配置前端后端服务指南

Nginx 是一个高性能的 HTTP 和反向代理服务器，常用于部署前端和后端服务。以下是配置前端和后端服务的详细方法：

基础配置结构

server {
    listen 80;
    server_name yourdomain.com;

    # 前端配置
    location / {
        root /path/to/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API配置
    location /api/ {
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

详细配置说明

1. 单独前端服务配置

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/frontend/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

2. 单独后端服务配置

server {
    listen 80;
    server_name api.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; # 后端服务地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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_cache_bypass $http_upgrade;
    }
}

3. 前后端同域名配置

server {
    listen 80;
    server_name yourdomain.com;

    # 前端配置
    location / {
        root /var/www/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API配置
    location /api/ {
        proxy_pass http://localhost:3000/; # 注意结尾的斜线
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # WebSocket支持
    location /ws/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

4. HTTPS 配置

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    # 前端配置
    location / {
        root /var/www/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API配置
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 强制HTTPS
    if ($scheme = http) {
        return 301 https://$server_name$request_uri;
    }
}

高级配置选项

1. 负载均衡

upstream backend_servers {
    server backend1.example.com:3000;
    server backend2.example.com:3000;
    server backend3.example.com:3000;

    # 负载均衡策略
    # least_conn; # 最少连接
    # ip_hash;    # IP哈希
}

server {
    location /api/ {
        proxy_pass http://backend_servers;
        # 其他proxy设置...
    }
}

2. 静态资源压缩

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 256;

3. 跨域配置

location /api/ {
    proxy_pass http://backend_server;

    # CORS headers
    add_header 'Access-Control-Allow-Origin' '$http_origin' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

最佳实践建议

1. 分离配置：将不同服务的配置放在不同的文件中，通过 include 指令引入
2. 使用变量：定义常用路径为变量，便于维护
3. 日志分割：配置访问日志和错误日志，定期轮转
4. 性能调优：根据服务器资源调整 worker_processes 和 worker_connections
5. 安全加固：禁用 server_tokens，限制 HTTP 方法等

配置完成后，使用 nginx -t 测试配置是否正确，然后 nginx -s reload 重新加载配置。