前端最基础的就是 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];
-
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
看错误日志来排查问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。