18

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

截止到 2019-05-30 期,所有成员都进行了一次分享。内部对课程进行了一些调整,之后会针对项目开始 review 。我这边预期准备进入中级阶段,中间还是会穿插一些实战。 前端培训目录

今天讲什么?

  1. nginx 的 server
  2. nginx 的 location 匹配规则
  3. nginx 的 root、rewrite、proxy_pass、alias
  4. nginx 的命令以及报错日志

今天为什么会开这个题目?

  • 公司内部的前端构建工具升级(gulp),帮小伙伴处理了一下 nginx 的配置,辅助提升开发的体验。
  • 公司想要加快网页访问速度(前端缓存),为了测试,我改了我自己服务器的 nginx 配置。

    • PWA ()
    • manifest ()
    • 其他方案(localStroage存)
    • 有老哥有科学有效的方案吗?缓存这块我还在实验中,我司有结果之后我会写个文章发出来。

nginx 的 server

定义虚拟主机相关。server 中通过 server_name 来匹配域名,listen来匹配端口

server_name

用于匹配域名,需要已经映射的域名。
举个栗子,我在阿里云有一台云服务器 IP:123.56.16.33:443。买了一个域名 lilnong.top
我现在把我的域名指向了我的ip。那所有请求我域名的都会到我这台服务器上。我需要用 server_name 来判断请求的是那台主机,再进行分发

listen

用于匹配端口号,一般来说,我们当做服务的就需要加上 80 和 443

协议 端口 用途
http 80 浏览器访问
https 443 浏览器访问
ftp 21

server_name 与 host 匹配优先级

  1. 完全匹配
  2. 通配符在前的,如 *.lilnong.top
  3. 在后的,如 www.lilnong.*
  4. 正则匹配,如 ~^\.www\.lilnong\.com$

如果都不匹配

  1. 优先选择 listen 配置项后有 default 或 default_server 的
  2. 找到匹配 listen 端口的第一个 server 块

nginx 的 location 匹配规则

location 是什么?

location 是用于在 server 服务中,根据 URL 进行匹配查找。属于 ngx_http_core_module 模块。

location 语法

location [ = | ~ | ~* | ^~ ] uri {...}

  • = : 精确匹配,匹配成功,则停止搜索正则; 不能有嵌套的 location。可以加速 request 的处理。
  • ~ : 区分大小写的正则匹配
  • ~*不区分大小写正则匹配
  • ^~不进行正则的匹配。

location 匹配规则

  1. 前缀匹配(prefix string)
    //static/
  2. 正则匹配(regular expresstion)(RegExp)
    \.(gif|jpg|png|js|css)$
  3. nginx 首先检查 前缀匹配,使用 longest matching prefix 最长前缀匹配规则,记住匹配的 location,然后使用正则匹配,根据他们在配置文件中的顺序,一旦匹配成功,则停止检索。
  4. 匹配时要注意/的使用。是否要封闭。

     location /static { 
         # 可以匹配到 URL 如: '/static/html' 和 'statichtml/html`
     }
     location /static/ { 
         # 只可匹配到 URL 如: '/static/html' 和 'static/**'
     }

nginx 的 root、rewrite、proxy_pass、alias

root

用来指定请求资源的真实路径,本地磁盘路径

location /nginx/ { 
  root /var/log/;
  #请求http://nginx.lilnong.top/nginx/20190227_access.log
  #>/var/log/nginx/20190227_access.log
}

alias

用来指定请求资源的真实路径,本地磁盘路径。会丢弃 location 所匹配的,这是和 root 的区分

location /nginx/ { 
  alias  /var/log/nginx/;
  #请求http://nginx.lilnong.top/nginx/20190227_access.log
  #>/var/log/nginx/20190227_access.log
}

rewrite

  1. 在 server 块中,会先执行 rewrite 部分,然后才会匹配 location 块。
  2. 语法:rewrite regex replacement [flag];

    1. 如果 regex 匹配到,则会使用 replacement 来替换 URL。
    2. rewrite 指令会根据在配置文件中出现的顺序依次执行,可以使用 flag 来终止接下来的处理。
    3. 如果 replacement 以 http:// 或者 https:// 或者 $scheme,则停止处理,立刻重定向。
  3. flag 描述

    1. last 将根据 rewrite 后的地址重新在 server标签执行。
    2. break 将根据 rewrite 后的地址重新在当前的 location标签执行。
    3. redirect 302跳转到rewrtie后面的地址。
    4. permanent 301永久调整到rewrtie后面的地址,即当前地址已经永久迁移到新地址,一般是为了对搜索引擎友好。
#这是我把ip访问重定向到我的网页
server {
    listen 80;
    server_name 123.56.16.33;
    rewrite ^/(.*)$ https://www.lilnong.top/$1 permanent; 
}

proxy_pass

访问 https://nginx.lilnong.top/static/html

location /static/ {
  proxy_pass http://www.lilnong.top; 
  #结尾不带 `/`,将匹配到 http://www.lilnong.top/static/html
}
location /static/ {
  proxy_pass http://www.lilnong.top/; 
  #结尾带 `/`,将匹配到 http://www.lilnong.top/html
}

nginx 的命令以及报错日志

  1. 重启(重新载入配置文件) nginx -s reload
  2. 重启 nginx -s reopen
  3. 停止 nginx -s stop
  4. 启动 nginx
  5. 如果有错误,重启的时候会报错。
    在 windows 中(我们正在用的),看不到报错,服务也起不来,可以的 nginx/logs/error.log 看错误日志来排查问题。

资源

  1. nginx 中文
  2. nginx org
  3. nginx的location配置详解

微信公众号:前端linong

clipboard.png


linong
29.2k 声望9.5k 粉丝

Read-Search-Ask