Nginx 最主要的用法

Nginx 是流行的服务器，一般用于对静态资源做托管、对动态资源做反向代理。只要放到 /usr/share/nginx/html 下的文件，都可以
通过被访问到。我们来看下 Nginx 配置文件，也就是 /etc/nginx/nginx.conf（默认配置）。

什么是虚拟主机？

虚拟主机就是可以用一台 Nginx 服务器为多个域名和端口提供服务。只需要添加多个 server 配置就可以实现。

Nginx Virtual Hosts

下面的 location 就是路由配置。

例如：

# location 和路径之间加了个 =，代表精准匹配，也就是只有完全相同的 URL 才会匹配这个路由。
location = /111/ {
    default_type text/plain;
    return 200 "111 success";
}

精准匹配

更多的 location 配置：

# 不带 = 代表根据前缀匹配，后面可以是任意路径。这里的 $uri 是取当前路径。
location /222 {
    default_type text/plain;
    return 200 $uri;
}

# 然后如果想支持正则，就可以加个 ~。
location ~ ^/333/bbb.*\.html$ {
    default_type text/plain;
    return 200 $uri;
}

# 如果想让正则不区分大小写，可以再加个 *
location ~* ^/444/AAA.*\.html$ {
    default_type text/plain;
    return 200 $uri;
}

# 如果想提高优先级，可以使用 ^~
location ^~ /444 {
    default_type text/plain;
    return 200 'xxxx';
}

这 4 种语法的优先级是这样的：精确匹配（=） > 高优先级前缀匹配（^~） > 正则匹配（～ ~*） > 普通前缀匹配

root 和 alias 的区别

比如这样的两个配置：

location /222 {
    alias /dddd;
}

location /222 {
    root /dddd;
}

同样是 /222/xxx/yyy.html，如果是用 root 的配置，会把整个 URI 作为路径拼接在后面。也就是会查找
/dddd/222/xxx/yyy.html 文件。

如果是 alias 配置，它会把去掉 /222 之后的部分路径拼接在后面。也就是会查找 /dddd/xxx/yyy.html 文件。

这就是 root 和 alias 的区别，拼接路径时是否包含匹配条件的路径。

配置文件位置

主配置文件在 /etc/nginx/nginx.conf，而子配置文件在 /etc/nginx/conf.d 目录下。默认的 HTML 路径是
/usr/share/nginx/html。

正向代理与反向代理

从用户的角度看，方向一致的就是正向，反过来就是反向。

反向代理实现

1. 添加一个全局的前缀 /api

2. 改下 Nginx 配置，添加个路由：

location ^~ /api {
    proxy_pass http://192.168.1.6:3000;
}

为什么这么做？Nginx 反向代理可以修改请求、响应信息，比如设置 header。还可以用它实现负载均衡。

改下 Nginx 配置文件：

在 upstream 里配置它代理的目标服务器的所有实例。下面 proxy_pass 通过 upstream 的名字来指定。

负载均衡策略

• 轮询：默认方式。
• weight：在轮询基础上增加权重，也就是轮询到的几率不同。
• ip_hash：按照 IP 的 hash 分配，保证每个访客的请求固定访问一个服务器，解决 session 问题。
• fair：按照响应时间来分配，这个需要安装 nginx-upstream-fair 插件。

使用 nginx 处理跨域

使用 nginx 处理项目部署后的跨域问题

1. 配置前端项目接口地址

# 在.env.production内，配置接口地址
VITE_GLOB_API_URL=/api

2.在 nginx 配置请求转发到后台

server {
  listen     80;
  server_name  localhost;
  # 接口代理，用于解决跨域问题
  location /api {
    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_pass http://localhost:8080/api;
    proxy_redirect default;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  }
}  

使用 nginx 处理跨域

缓存hash文件不缓存html。保证每次加载都是最新的，推荐配置清单

生产环境推荐

server {
    listen 80;
    server_name your.domain.com; # 替换为你的域名
    root /usr/share/nginx/html; # 替换为你的项目根目录

    # 规则1：HTML 文件 - 永不缓存
    # 这是最关键的一步，确保浏览器总是获取最新的入口文件。
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    # 规则2：带 Hash 的静态资源 - 永久缓存
    # 文件名中的 Hash 确保了内容变化时文件名也会变化，所以可以放心地让浏览器永久缓存。
    # `immutable` 告诉浏览器这个文件内容永远不会变，连校验请求都无需发送。
    location ~* \.[a-f0-9]{8}\.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 规则3：其他静态资源（如图片、字体） - 长期缓存
    # 这些文件通常不带 Hash，但也不常变动，可以设置一个较长的缓存时间。
    location ~* \.(jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # 规则4：单页应用（SPA）路由处理
    # 这是保证 React/Vue 等路由正常工作的关键。
    # 重要的是，它会将所有未匹配到具体文件的请求都交由 index.html 处理。
    # 由于我们已为 /index.html 单独设置了不缓存规则，所以这里是安全的。
    location / {
        try_files $uri $uri/ /index.html;
    }
}

同时也要保证CDN的缓存策略统一.