Nginx搭建前后端分离架构指南

基本概念

前后端分离架构是指将前端应用(通常是JavaScript框架如React、Vue等)和后端服务(如Java Spring、Node.js等)分开部署，通过API进行通信的架构模式。

搭建步骤

1. 安装Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install epel-release
sudo yum install nginx

2. 基本配置结构

project/
├── frontend/    # 前端项目
├── backend/     # 后端项目
└── nginx.conf   # Nginx配置文件

3. 典型Nginx配置示例

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://localhost:8080/;  # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

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

4. 高级配置选项

负载均衡多个后端实例

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

server {
    # ...其他配置...

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

WebSocket支持

location /ws/ {
    proxy_pass http://backend_servers;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

HTTPS配置

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # ...其他配置...
}

# HTTP重定向到HTTPS
server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

部署流程

1. 前端部署:

   • 构建前端项目(如npm run build)
   • 将生成的静态文件放入Nginx配置的root目录

2. 后端部署:

   • 启动后端服务(确保端口与Nginx配置一致)
   • 配置CORS(如果前端与后端不同域)

3. Nginx操作:

   # 测试配置
   sudo nginx -t
   
   # 重新加载配置
   sudo systemctl reload nginx
   
   # 启动/停止/重启
   sudo systemctl start|stop|restart nginx
   

常见问题解决

1. 404错误(前端路由):

   • 确保配置了try_files $uri $uri/ /index.html

2. 跨域问题:

   • 确保后端配置了CORS
   • 或者通过Nginx代理所有API请求

3. 静态资源缓存:

   • 配置适当的缓存头避免浏览器缓存问题

4. 性能优化:

   • 启用gzip压缩
   • 配置静态资源缓存
   • 考虑使用HTTP/2

最佳实践

1. 使用环境变量管理不同环境的配置
2. 实现CI/CD自动化部署流程
3. 监控Nginx和后端服务的运行状态
4. 定期更新Nginx和安全补丁

通过以上配置，你可以建立一个高效、安全的前后端分离架构，利用Nginx作为反向代理和静态文件服务器。