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

写在前面

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

什么是 Nginx&＃xff1f;

图片来源&＃xff1a;百度

Nginx 的应用广泛&＃xff0c;常见场景&＃xff1a;

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

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

Nginx配置文件结构

nginx.conf 文件中主要有三个结构&＃xff1a;

1.Global: nginx 运行相关

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

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

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

3.http

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

server

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

server { # 配置网络监听 # 监听所有的 80 listen 80; # 基于名称的虚拟主机配置 server_name design.luweitech.cn; # 配置请求的根目录 # Web 服务器收到请求后&＃xff0c;首先要在服务端指定的目录中寻找请求资源 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 是虚拟服务器的识别路径&＃xff0c;不同的域名会通过请求头中的HOST字段&＃xff0c;匹配到特定的server块&＃xff0c;转发到对应的应用服务器中去。

比如&＃xff0c;以下代码

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

设置网站的默认首页

index 指令主要有 2 个作用&＃xff1a;

• 对请求地址没有指明首页的&＃xff0c;指定默认首页
• 对一个请求&＃xff0c;根据请求内容而设置不同的首页&＃xff0c;比如&＃xff1a;

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

location

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

今天主要讲一下这段代码

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

对于 js、css 不是静态文件的情况&＃xff0c;有两种处理办法&＃xff1a;

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

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

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