前端培训初级阶段场景实战20190613Nginx代理正确食用方式

前端最基础的就是 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 配置详解