全栈必经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配置文件结构后,今天主要学习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 的前端不是好前端

    设置网站的默认首页

    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 提供的服务中

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

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

    您可能还会对下面的文章感兴趣: