前端不得不知的Nginx配置～

原创已于 2025-03-09 21:53:30 修改

· 1k 阅读

30 ·

版权

文章标签：

#前端 #nginx

于 2025-03-07 20:48:07 首次发布

知识储备同时被 3 个专栏收录

26 篇文章

订阅专栏

前端工具类

10 篇文章

订阅专栏

工具类

10 篇文章

订阅专栏

前文

写在前面的话

前端现在真的越学越杂了，但是又不得不学，最近接触Nginx算是有点心得，希望可以帮助到各位程序yuan～

Nginx是什么

okk正文来了，有些概念性问题我们还是需要了解一下，所以开场让我们知道Nginx是什么，下面两段解释，一段详细的，一段简单易懂的，感觉已经很贴切了～
在这里插入图片描述

前端会有哪些应用

这里很重要，我们最最关心的，前端用Nginx做什么呢，其他前端我不知道，我工作几年接触到的Nginx大概有：

配置过Nginx反向代理（就是接口转发，也是解决跨域的一种方式）
Nginx配置根目录文件（小程序使用webview需要在域名根目录下配置文件、包括ios App也需要配置一个json文件来的）
负载均衡
静态资源服务
等等下面我们对这些具体场景一一展开~

前端应用

废话不多说，下面进入正文～

1、Nginx配置反向代理

重点就是通过 proxy_pass：将请求转发到指定后端服务器，常用于解决跨域问题或代理 API 请求

location /api/ {
    proxy_pass http://backend_server;
}

这里可以将以 /api 开头的请求转发到指定的IP和端口，就是由你本地发起带/api的请求，会转发到http://backend_server服务啦～
Nginx很容易发生的一个问题，location 后面需不需要加/,以及proxy_pass后面需不需要加/，我在下面都整理啦，感兴趣的往下看吧～

2、Nginx配置域名根目录配置文件

这里在根目录配置了一个json文件一个微信配置文件，原理都差不多

// json文件配置
server_name  www.baidu.com;
location /apple-app-site-association {
            charset UTF-8;
            default_type application/json;
            return 200 '{"applinks":{"apps":[],"details":[ {"appID": "xxxx","paths":["*"]}]}}';
}
// 小程序txt配置文件
location /MP_verify_****.txt {
            root   /data/;
            try_files $uri /MP_verify_*****.txt;
        }

相当于可以访问直接在www.baidu.com的根目录下直接访问/apple-app-site-association文件啦～（https://www.baidu.com/apple-app-site-association）

3、Nginx配置静态资源服务

现在基本都是用的单页面的history路由了，try_files：就是用于处理前端路由（如 Vue 或 React 的 History 模式），确保刷新页面时不会返回 404 错误。例如：

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

4、Nginx配置静态资源缓存

Nginx可以给资源配置缓存，其实就是在资源的Header头里面添加cache-control（涉及到浏览器缓存，感兴趣评论，我在写一篇具体介绍～）

server {
    listen 80;
    server_name yourdomain.com;
    // 不进行缓存
    location /special-page.html {
        add_header Cache-Control "no-store";
        try_files /special-page.html =404;
    }
    // 缓存一天
	location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
	   add_header Cache-Control "public, max-age=86400";
	   add_header Expires "now +1d";
	}
}

上面两个分别是对special-page.html页面不进行缓存，对图片资源设置缓存时间为1天，两种都是强缓存的写法，任选其一

5、Nginx配置负载均衡

通过设置 upstream 服务组 location / proxy_pass设置负载均衡
每个服务后面可以使用weight分配权重
使用max_fails和fail_timeout来设置失败条件，如果服务器在fail_timeout时间内失败了max_fails次，Nginx会将该服务器标记为不可用。
当所有主服务器不可用时，使用备份服务器

http {
    upstream myapp {
        server srv1.example.com weight=3;  # 权重3，分配更多请求
        server srv2.example.com max_fails=3 fail_timeout=30s;
        server srv3.example.com backup;
    }
     # 负载均衡策略
     least_conn;
     # 主动健康检查（需要 Nginx Plus）
     health_check;

    server {
        listen 80;
        server_name example.com;
        listen 80;
        location / {
            proxy_pass http://myapp;
        }
    }
}

上面就是定一了一个名为myapp的服务组，里面包含了三个服务器，proxy_pass会将客户端请求转发到 backend 服务器组
这样服务合理配置负载均衡，可以提高系统的可用性、性能和容错能力。掌握这些配置，可以帮助你更好地部署和优化前端项目～

6、Nginx多项目部署

多站点配置：通过 server 块配置多个站点或子应用：

server {
    listen 80;
    server_name site1.com;
    location / {
        root /var/www/site1;
        index index.html;
    }
}
server {
    listen 80;
    server_name site2.com;
    location / {
        root /var/www/site2;
        index index.html;
    }
}

还有一些Nginx的压缩，https的配置，我没有实验过就不写啦，感兴趣的deepSeek查一查～

其他

Nginx常用命令

最常用的就是修改Nginx命令后需要执行下面的第一第二条命令了

//1、检查配置是否正确：
nginx -t
// 2、重新加载配置：
nginx -s reload
//停止服务：
nginx -s stop
//启动服务：
nginx

Nginx配置问题整理

location、proxy_pass加不加斜杠问题处理

// 请求链接是
http://location:80/api/req/con
location /api {
    proxy_pass: http://www.yan.com
}

location加不加斜杠最后结果有下面四种情况：
1. http://http://www.yan.com/api/req/con
2. http://http://www.yan.com/req/con
3. http://http://www.yan.com//req/con
4. http://http://www.yan.com/apireq/con
四种结果分别对应的下面四种配置

最后请求链接拼接location及后面的参数【共5种写法】
1. proxy_pass不加斜杠，对应location加｜不加
2. proxy_pass带上/api加斜杠即http://www.yan.com/api/，对应location加｜不
3. proxy_pass带上/api不加斜杠，location也不加斜杠

// http://http://www.yan.com/api/req/con
location /api {
    proxy_pass: http://www.yan.com
}
location /api/ {
    proxy_pass: http://www.yan.com
}
location /api {
    proxy_pass: http://www.yan.com/api/
}
location /api/ {
    proxy_pass: http://www.yan.com/api/
}
location /api {
    proxy_pass: http://www.yan.com/api
}

最后请求链接不拼接上/api的【一种】
- proxy_pass链接加斜杠，location加上斜杠

//http://http://www.yan.com/req/con
location /api/ {
    proxy_pass: http://www.yan.com/
}

最后请求链接不拼接上/api且带有连个双斜杠【一种】
- proxy_pass链接加斜杠，location不加

//http://http://www.yan.com//req/com
location /api {
    proxy_pass: http://www.yan.com/
}

最后请求链接不拼接上/api和请求体相连【一种】
- proxy_pass链接加/api不带斜杠，location加斜杠

// http://http://www.yan.com/apireq/con
location /api/ {
    proxy_pass: http://www.yan.com/api
}

Nginx通用模版

1、全局块：配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等。

2、events块：配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。

3、http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等。

4、server块：配置虚拟主机的相关参数，一个http中可以有多个server。

5、location块：配置请求的路由，以及各种页面的处理情况。

#全局块
events {         #events块
   ...
}

http      #http块
{
    ...   #http全局块
    server        #server块
    { 
        ...       #server全局块
        location [PATTERN]   #location块
        {
            ...
        }
        location [PATTERN] 
        {
            ...
        }
    }
    server
    {
      ...
    }
    ...     #http全局块
}