nginx | 沧海鲸歌

本篇文档只阐述简单的 nginx 配置尽量以解决问题为主，不涉及原理性内容

nginx 是常用的服务器，其功能包括但不限于以下内容

负载均衡
代理（包括正向反向）
TCP 转发
控制 http 缓存

TCP 转发不在本文的讲解之列，如确实想知道，请咨询后端。

代理

nginx 最重要的功能就是代理。关于代理，具体可以查看这篇文档。

代理分为正向代理和反向代理，两者的区分可以参考上述贴文。

反向代理

nginx 最常用的功能，也是绝大多数的形式，就是反向代理。常见配置如下

location /api {
    # 默认API
    proxy_pass http://www.a.com/;
}

上述代表的意义如下

匹配 /api 开头的请求路径（注意是所有）
以 /api 为断点，将前部全部覆写为 proxy_pass 的内容

注意（非常重要）

关于 proxy_pass 路径后面带不带 / 的问题

带 /，代表删除匹配模式串，即以 /api 为断点，将前部（包括 /api）全部覆写为 proxy_pass 的内容
不带 / ，即以 /api 为断点，将前部（不包括 /api）全部覆写为 proxy_pass 的内容。

举例如下

请求地址：https://test.com/api/commonUpload

带 /

location /api {
    # 默认API
    proxy_pass http://www.a.com/;
}

等效于 http://www.a.com/commonUpload

不带 /

location /api {
    # 默认API
    proxy_pass http://www.a.com;
}

等效于 http://www.a.com/api/commonUpload

下面会结合前端本地代码和服务端 nginx 配置具体说明

对应后台真实接口地址为 https://baidu.com/api/auth/login?xxxx

前端代码如下

// api 请求地址
axios.get('ding/auth/login', { params: data, ...opt }) // 注意需要设置 axios 默认请求前缀为 /api

// 本地反向代理

const API_SERVER = 'https://baidu.com/api'

'/api': {
    target: process.env.API_SERVER ?? API_SERVER, // 测试环境
    pathRewrite: {
    '^/api': '',
    changeOrigin: true
    }
}

// 前端浏览器显示为 （假设项目访问地址为 http://localhost:3000/）

// http://localhost:3000/api/auth/login?xxxx

nginx 配置如下

location /api {
    # 默认API
    proxy_pass https://baidu.com/api;

    # 因为两个前缀一样，其实也可以如下配置 但是不建议

    # proxy_pass https://baidu.com;
}

正向代理

一般正向代理指的是 nginx 作为一个静态资源服务器的场景，一般 nginx 的一个 server 就是正向代理

server {
    # 端口
    listen 4000;
    # 匹配请求中的host值
    server_name localhost;

    root /app;

    location ~ .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$ {
        expires 7d;
    }

    location ~ .*\.(?:js|css)$ {
        expires 7d;
    }

    location ~ .*\.(?:htm|html)$ {
        add_header Cache-Control

            "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    }

    location /api {
        # 默认API
        proxy_pass http://API_SERVER/;
    }

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers

            'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS' ) {
            return 204;
        }

        root /app;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }



    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

}

上述部分参数的含义如下

参数名	参数说明
listen	监听端口，一般 `http` 监听80， `https`监听443
server_name	对外访问域名
root	正向代理资源根目录（绝对路径）
location	`nginx` 代理规则
error_page	`nginx` 错误页

控制缓存

众所周知，http 缓存分为强缓存，协商缓存。最经典的莫过于 200（OK），from disk以及304，那么 nginx 怎么控制缓存？

关于http缓存的内容此处按下不表，请自行查看百度。

关于 nginx 设置缓存，其实也是通过设置 location 代理规则来实现的，具体如下

location ~ .*\.(?:js|css)$ {
    expires 7d;
}

上述内容代表 js、css资源7天有效

location ~ .*\.(?:htm|html)$ {
    add_header Cache-Control

        "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

上述内容代表 html、htm文件禁止缓存。

通过上述可以看出， nginx 设置缓存是通过代理规则，利用正则对代理文件进行资源匹配，对匹配到的资源添加 expires 过期时间，或者直接设置 Cache-Control response头进行强缓存设置。

未完待续