全栈必经Nginx，不懂 Nginx 的前端不是好前端

旧城等待， 2023-06-25 10:23 11阅读 0赞

# 写在前面 #

作为一名前端，这几年没怎么碰过后台的东西，只能干等着后台小哥去排查问题，确实有点不该。如果要聊 Nginx，现阶段有点力不从心，内容还是挺多的，不够平时用的内容倒不是很复杂，简单几个配置，二话不说，先学了再说，下次就不用干等，自己也能排查排查。

# 什么是 Nginx？ #

![全栈必经Nginx，不懂 Nginx 的前端不是好前端][Nginx_ Nginx]

图片来源：百度

Nginx 的应用广泛，常见场景：

*  静态资源服务器
 *  动态匹配
 *  反向代理
 *  Gzip 压缩
 *  负载均衡

今天呢，肯定学不完全部的啦，先学学一些现学现用的简单配置。

## Nginx配置文件结构 ##

nginx.conf 文件中主要有三个结构：

1.Global: nginx 运行相关

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

2.events: 与用户的网络连接相关

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

3.http

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

## server ##

![全栈必经Nginx，不懂 Nginx 的前端不是好前端][Nginx_ Nginx 1]

了解了以上Nginx配置文件结构后，今天主要学习http块中的 server。server块，用于配置虚拟主机的相关参数，一个http中可以有多个server。

server {  # 配置网络监听  # 监听所有的 80  listen 80;    # 基于名称的虚拟主机配置  server_name design.luweitech.cn;  # 配置请求的根目录  # Web 服务器收到请求后，首先要在服务端指定的目录中寻找请求资源  root /xxx/abc;  # 设置网站的默认首页  index index.html;  location / {    proxy_pass http://localhost:端口号;  }  location /favicon.ico {    # 过期时间设置 12 小时    expires 12h;  }  location ~ .*\.(js|css)?$ {     # proxy_pass http://localhost:端口号;     expires 12h;  }}

### server\_name ###

基于名称的虚拟主机配置

server\_name 是虚拟服务器的识别路径，不同的域名会通过请求头中的HOST字段，匹配到特定的server块，转发到对应的应用服务器中去。

比如，以下代码

server {  listen  80;  server_name www.xxx.com;  location / {    proxy_pass http://localhost:6002;  }} server {  listen 80;  server_name www.xxx.*;  location / {    proxy_pass http://localhost:6003;}

访问 www.xxx.com Nginx会转发到 http://localhost:6002

访问 www.xxx.org Nginx会转发到 http://localhost:6003

## ##

### index ###

![全栈必经Nginx，不懂 Nginx 的前端不是好前端][Nginx_ Nginx 2]

设置网站的默认首页

index 指令主要有 2 个作用：

*  对请求地址没有指明首页的，指定默认首页
 *  对一个请求，根据请求内容而设置不同的首页，比如：

location ~ ^/luwei/(.+)/web/$ {    index index.$1.html index.htm;}

### location ###

location ~ .*\.(js|css)?$ {  # proxy_pass http://localhost:端口号;  expires 12h;}

今天主要讲一下这段代码

以上，简单来说是设置 js、css 文件的过期时间（注意，是注释了proxy\_pass后的作用），这样原本是没有问题的，问题在于，如果这么一写，因为注释了proxy\_pass，所以一旦浏览器访问js、css 文件，Nginx 会默认去上面配置的 root 中找，然而，我们使用的是 node 服务，js、css 不是单纯的静态文件，不直接在root 中，结果浏览器就访问不了。

对于 js、css 不是静态文件的情况，有两种处理办法：

1.  第一种是解开 proxy\_pass http://localhost:端口号; 这句的注释，让其回到 node 提供的服务中
2.  第二种是把 location ~ .\*\\.(js|css)?$ 整个都注释掉，这样请求的 js、css 文件会匹配上面的 location /，回到 node 提供的服务中

开篇说的坑点也在这里，不是什么大问题，只是需要留意细节

前端出身，还是需要搞搞后台地，有错误欢迎直接指出

[Nginx_ Nginx]: https://imgconvert.csdnimg.cn/aHR0cDovL3AzLnBzdGF0cC5jb20vbGFyZ2UvcGdjLWltYWdlLzEwZDEyYTQxNmU0NTQ5YjY5ZWJhOTMzOTQ3YjdkYzE3?x-oss-process=image/format,png
[Nginx_ Nginx 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvNTA2YmNmYjQtMGYzZi00MTc0LTk0ZmMtNWJkN2VlMzFkOGEz?x-oss-process=image/format,png
[Nginx_ Nginx 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLnBzdGF0cC5jb20vbGFyZ2UvZGZpYy1pbWFnZWhhbmRsZXIvMDNmNTYwZmQtNDczMS00NzA0LTllNzctZTNjNDY1NjAwZWE4?x-oss-process=image/format,png