前端修炼小册

Nginx 部署前后端分离项目

# Nginx 部署前后端分离项目

# 部署目标

  • 解决前后端分离项目的跨域问题
  • 前端路由采用 HTML5 History 模式
  • 配置反向代理 Websocket

# 部署前准备

  • 将前端代码打包成为纯静态文件，上传至服务器
  • 后端代码启动在服务器，监听 30000 端口

# Nginx 配置

  • location 为代理接口，可以转发代理后端的请求接口域名或者 ip，即可解决接口跨域问题
  • 升级 Http1.1 到 Websocket 协议
upstream http_proxy {
    server 127.0.0.1:30000;
}

upstream ws_proxy {
    server 127.0.0.1:30000;
}

server {
    listen       80;
    server_name  www.myblog.com myblog.com;

    root /home/spa-project/myblog;
    index index.html;

    # 将 404 错误页面重定向到 index.html 可以解决 history 模式访问不到页面问题
    error_page    404         /index.html;

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

    location ^~ /api/ {
        proxy_pass http://http_proxy;
        # timeout
        proxy_connect_timeout 75;
        proxy_read_timeout 150;
        proxy_send_timeout 150;
        client_max_body_size 50m;
        # redefine request header to backend
        proxy_set_header  Host              $http_host;
        proxy_set_header  X-Real-IP         $remote_addr;
        proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Proto $scheme;
    }

    location ^~ /ws/ {
        proxy_pass http://ws_proxy;
        # timeout
        proxy_connect_timeout 75;
        proxy_read_timeout 600;  # Websocket 保持长连接
        proxy_send_timeout 150;
        client_max_body_size 50m;
        # http => websocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        # redefine request header to backend
        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_set_header  X-Forwarded-Proto $scheme;
    }

    location ~* \.(html|htm)$ { 
        expires 1h;
        add_header Cache-Control "public"; 
    }
    
    location ~* \.(css|js|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|map|mp4|ogg|ogv|webm|htc)$ { 
        expires 24h;
        access_log off; 
        add_header Cache-Control "public"; 
    } 
    
    access_log  /var/log/nginx/access/myblog.log;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

部分配置项解析：

  • proxy_connect_timeout：后端服务器连接的超时时间，发起握手等候响应超时时间（默认为 60 秒，官方推荐最长不要超过 75 秒）
  • proxy_read_timeout：连接成功后，Nginx 能够等待后端服务器响应的时间（默认 60 秒）
  • proxy_send_timeout：后端服务器数据回传时间，就是在规定时间之内后端服务器必须传完所有的数据（默认 60 秒）
  • client_max_body_size：Nginx 对上传文件大小的限制（默认是 1M）
  • proxy_set_header：用来重定义发往后端服务器的请求头
    • Host $http_host;：将原 http 请求 Header 中的 Host 字段也放到转发的请求
    • X-Real-IP $remote_addr;：前一节点的 IP（并不一定是用户的真实 IP）
    • X-Forwarded-For $proxy_add_x_forwarded_for;：前一节点的 X-Forwarded-For 的值

    X-Real-IP 一般是最后一级代理将上游 IP 地址添加到该头中，X-Forwarded-For 是多个 IP 地址，而 X-Real-IP 是一个。

    • X-Forwarded-Proto $scheme;：拿到来源的传输协议（HTTP 或 HTTPS）

# 参考资料

（完）