前后端分离架构部署nginx配置

最新推荐文章于 2025-05-16 12:02:06 发布

Orlando chrono

最新推荐文章于 2025-05-16 12:02:06 发布

阅读量790

点赞数 10

CC 4.0 BY-SA版权

文章标签：架构 nginx 运维

本文链接：https://blog.csdn.net/m0_73522967/article/details/147581201

前后端分离的概念
- 前后端分离是一种软件开发架构模式。在这种模式下，前端（主要是用户界面部分）和后端（主要是业务逻辑和数据处理部分）是独立开发和部署的。
- 前端通常使用 HTML、CSS、JavaScript 等技术构建，运行在浏览器等客户端环境。后端则使用服务器端语言（如 Java、Python、Node.js 等）构建，处理业务逻辑、数据存储和数据交互等功能。
- 两者之间通过 API（应用程序编程接口）进行通信。例如，前端通过 HTTP（Hypertext Transfer Protocol）请求获取或提交数据，后端通过 API 接口接收请求并返回相应的数据。

对 Nginx 配置的影响及举例

反向代理配置
- 在前后端分离架构中，前端和后端通常部署在不同的服务器上，通过不同的端口提供服务。Nginx 可以作为反向代理服务器，将客户端对前端和后端的请求分别转发到相应的服务器。
- 例如，前端部署在一个服务器上，监听 8080 端口，后端部署在另一个服务器上，监听 8081 端口。可以配置 Nginx 如下：
```
http {
    server {
        listen 80;
        server_name www.example.com;

        location / {
            proxy_pass http://frontend_server: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 /api/ {
            proxy_pass http://backend_server:8081;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}
```
  这里，对根路径（/）的请求会转发到前端服务器的 8080 端口，对 /api/ 路径的请求会转发到后端服务器的 8081 端口。proxy_set_header 指令用于设置转发请求的头信息，将客户端的 IP 地址等信息传递给后端服务器。
静态资源处理配置
- 前端应用会包含很多静态资源，如 HTML 文件、CSS 文件、JavaScript 文件、图片等。在前后端分离模式下，这些静态资源可以单独部署在一个目录下，由 Nginx 直接提供服务，而不需要后端服务器来处理这些静态资源的请求。
- 例如，假设前端的静态资源存放在 /usr/share/nginx/html 目录下，可以配置 Nginx 如下：
```
http {
    server {
        listen 80;
        server_name www.example.com;

        location /static/ {
            alias /usr/share/nginx/html/static/;
            expires 30d;
        }

        location / {
            proxy_pass http://frontend_server: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;
        }
    }
}
```
  这里，对 /static/ 路径的请求会直接从 /usr/share/nginx/html/static/ 目录下获取静态资源并返回给客户端，expires 30d 指令用于设置静态资源的缓存时间，让浏览器在 30 天内缓存这些文件，减少重复请求。

跨域支持配置

由于前后端分离，前端和后端可能运行在不同的域名或端口上，这就涉及到跨域问题。Nginx 可以通过配置来支持跨域请求。

例如，前端在 http://www.example.com 域名下，后端在 http://api.example.com 域名下。可以在 Nginx 的后端代理配置中添加跨域支持的配置：

http {
    server {
        listen 80;
        server_name www.example.com;

        location / {
            proxy_pass http://frontend_server: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;
        }
    }

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

        location /api/ {
            proxy_pass http://backend_server:8081;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            add_header 'Access-Control-Allow-Origin' 'http://www.example.com';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
        }
    }
}

在后端代理配置中，通过 add_header 指令添加了跨域支持的响应头。Access - Control - Allow - Origin 指定了允许跨域访问的前端域名，Access - Control - Allow - Credentials 允许在跨域请求中包含凭据（如 cookies），Access - Control - Allow - Methods 列出了允许的 HTTP 请求方法，Access - Control - Allow - Headers 列出了允许的请求头。