前端培训-初级阶段-场景实战（2019-06-13）-Nginx代理正确食用方式

seanHai 发布于2019-07-25 14:48 / 3074人阅读

摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。

前端最基础的就是 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存）

有老哥有科学有效的方案吗？缓存这块我还在实验中，我司有结果之后我会写个文章发出来。

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 匹配优先级

完全匹配

通配符在前的，如 *.lilnong.top

在后的，如 www.lilnong.*

正则匹配，如 ~^.www.lilnong.com$

如果都不匹配

优先选择 listen 配置项后有 default 或 default_server 的

找到匹配 listen 端口的第一个 server 块

nginx 的 location 匹配规则 location 是什么？

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

location 语法

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

= : 精确匹配，匹配成功，则停止搜索正则; 不能有嵌套的 location。可以加速 request 的处理。

~ : 区分大小写的正则匹配

~* ：不区分大小写正则匹配

^~ ：不进行正则的匹配。

location 匹配规则

前缀匹配（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/**"
 }

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

在 server 块中，会先执行 rewrite 部分，然后才会匹配 location 块。

语法：rewrite regex replacement [flag];

如果 regex 匹配到，则会使用 replacement 来替换 URL。

rewrite 指令会根据在配置文件中出现的顺序依次执行，可以使用 flag 来终止接下来的处理。

如果 replacement 以 http:// 或者 https:// 或者 $scheme，则停止处理，立刻重定向。

flag 描述

last 将根据 rewrite 后的地址重新在 server标签执行。

break 将根据 rewrite 后的地址重新在当前的 location标签执行。

redirect 302跳转到rewrtie后面的地址。

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 的命令以及报错日志

重启(重新载入配置文件) nginx -s reload

重启 nginx -s reopen

停止 nginx -s stop

启动 nginx

如果有错误，重启的时候会报错。
在 windows 中（我们正在用的），看不到报错，服务也起不来，可以的 nginx/logs/error.log 看错误日志来排查问题。

资源

nginx 中文

nginx org

nginx的location配置详解

微信公众号：前端linong

云服务器专线服务实战nginx 初级前端工程师初级前端开发工程师简历前端实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40463.html

前端培训-初级阶段-场景实战（2019-06-13）-Nginx代理正确食用方式

摘要：前端最基础的就是。我这边预期准备进入中级阶段，中间还是会穿插一些实战。语法精确匹配，匹配成功，则停止搜索正则不能有嵌套的。指令会根据在配置文件中出现的顺序依次执行，可以使用来终止接下来的处理。如果以或者或者，则停止处理，立刻重定向。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTM...

Harpsichord1207 2019-08-23 18:02 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水...

mayaohua 2019-08-02 15:13 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水...

张金宝 2019-08-23 17:55 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-16）-聊天头像-微信头像-群组头像

摘要：我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。实现微信头像布局效果地址，本来是在的，但是大哥最近有点不稳定老连不上。设置一下就好了实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/...

springDevBird 2019-08-02 16:17 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-16）-聊天头像-微信头像-群组头像

摘要：我们先来了解一下需求，微信大家都有吧，拉个群注意观察群头像。实现微信头像布局效果地址，本来是在的，但是大哥最近有点不稳定老连不上。设置一下就好了实现微信头像布局效果地址，我还是个孩子，写起来真的烦啊，我就写前几个好不好。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/...

Taste 2019-08-26 13:45 评论0 收藏0