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

jiezi

5 年前

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

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

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

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

公司内部的前端构建工具升级(gulp)，帮小伙伴处理了一下 nginx 的配置，辅助提升开发的体验。
公司想要加快网页访问速度（前端缓存），为了测试，我改了我自己服务器的 nginx 配置。
- PWA（）
- manifest（）
- 其他方案（localStroage 存）
- 有老哥有科学有效的方案吗？缓存这块我还在实验中，我司有结果之后我会写个文章发出来。

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

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

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

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

完全匹配
通配符在前的，如 *.lilnong.top
在后的，如 www.lilnong.*
正则匹配，如 ~^\.www\.lilnong\.com$

如果都不匹配

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

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

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

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

前缀匹配（prefix string）
如 /、/static/
正则匹配（regular expresstion）（RegExp）
如 \.(gif|jpg|png|js|css)$
nginx 首先检查 前缀匹配 ，使用 longest matching prefix 最长前缀匹配规则，记住匹配的 location，然后使用 正则匹配，根据他们在配置文件中的顺序，一旦匹配成功，则停止检索。

匹配时要注意 / 的使用。是否要封闭。

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

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

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

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

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

在 server 块中，会先执行 rewrite 部分，然后才会匹配 location 块。
语法：rewrite regex replacement [flag];
1. 如果 regex 匹配到，则会使用 replacement 来替换 URL。
2. rewrite 指令会根据在配置文件中出现的顺序依次执行，可以使用 flag 来终止接下来的处理。
3. 如果 replacement 以 http:// 或者 https:// 或者 $scheme，则停止处理，立刻重定向。
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; 
}

访问 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 -s reload
重启 nginx -s reopen
停止 nginx -s stop
启动 nginx
如果有错误，重启的时候会报错。
在 windows 中（我们正在用的），看不到报错，服务也起不来，可以的 nginx/logs/error.log 看错误日志来排查问题。

nginx 中文
nginx org
nginx 的 location 配置详解

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

今天讲什么？

nginx 的 server

server_name

listen

server_name 与 host 匹配优先级

nginx 的 location 匹配规则

location 是什么？

location 语法

location 匹配规则

nginx 的 root、rewrite、proxy_pass、alias

root

alias

rewrite

proxy_pass

nginx 的命令以及报错日志

资源