不懂 Nginx 的前端不是好前端

不懂 Nginx 的前端不是好前端

这周上线企业的设计业务新官网（还没优化完，我本身都以为有点丑丑的，努力优化），上线那晚，被 Nginx 卡了一下，做为一名前端，这几年没怎么碰事后台的东西，只能干等着后台小哥去排查问题，确实有点不应。若是要聊 Nginx，现阶段有点力不从心，内容仍是挺多的，不够平时用的内容倒不是很复杂，简单几个配置，二话不说，先学了再说，下次就不用干等，本身也能排查排查。

什么是 Nginx？

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。——抄百度百科的~

总之呢，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配置文件结构后，今天主要学习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

设置网站的默认首页

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

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

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

吴勤发
芦苇科技web前端开发工程师、COO
擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究，有兴趣的小伙伴来撩撩咱们~ web@talkmoney.cn

访问 https://www.luweitech.cn/ 了解更多