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

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。截止到 2019-05-30 期,所有成员都进行了一次分享。内部对课程进行了一些调整,之后会针对项目开始 review 。我这边预期准备进入中级阶段,中间还是会穿插一些实战。

今天讲什么?


  1. nginx 的 server


  1. nginx 的 location 匹配规则


  1. nginx 的 root、rewrite、proxy_pass、alias


  1. 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/


  1. 正则匹配(regular expresstion)(RegExp)
    \.(gif|jpg|png|js|css)$


  1. nginx 首先检查 前缀匹配,使用 longest matching prefix 最长前缀匹配规则,记住匹配的 location,然后使用正则匹配,根据他们在配置文件中的顺序,一旦匹配成功,则停止检索。


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


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 块。


  1. 语法:rewrite regex replacement [flag];
  1. 如果 regex 匹配到,则会使用 replacement 来替换 URL。


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


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


  1. 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


  1. 重启 nginx -s reopen


  1. 停止 nginx -s stop


  1. 启动 nginx


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


资源


  1. nginx 中文
  2. nginx org
  3. nginx的location配置详解
相关文章
|
17天前
|
网络协议 应用服务中间件 网络安全
Nginx,正向代理
本文介绍了Nginx作为HTTPS正向代理的两种方案:HTTP CONNECT隧道(7层)和NGINX stream(4层)。HTTP CONNECT隧道需要客户端手动配置代理,通过CONNECT请求建立隧道;而NGINX stream则更适合透明代理,利用SNI字段实现流量转发。文章详细讲解了两者的原理、环境搭建、使用场景及常见问题,并提供了配置示例和最佳实践建议。内容转载自阿里云开发者社区@怀知的文章,推荐读者参阅原文获取更多信息。感谢您的阅读!
243 80
Nginx,正向代理
|
4月前
|
缓存 负载均衡 安全
Nginx常用基本配置总结:从入门到实战的全方位指南
Nginx常用基本配置总结:从入门到实战的全方位指南
503 0
|
1月前
|
前端开发 应用服务中间件 nginx
docker安装nginx,前端项目运行
通过上述步骤,你可以轻松地在Docker中部署Nginx并运行前端项目。这种方法不仅简化了部署流程,还确保了环境的一致性,提高了开发和运维的效率。确保按步骤操作,并根据项目的具体需求进行相应的配置调整。
120 25
|
4月前
|
监控 应用服务中间件 测试技术
确保正则表达式在 Nginx 代理中的准确性和稳定性
【10月更文挑战第19天】总之,正则表达式在 Nginx 代理中具有重要作用,但要确保其准确性和稳定性需要付出一定的努力和关注。通过以上方法的综合运用,我们可以提高正则表达式配置的可靠性,为用户提供更好的服务体验。
|
2月前
|
缓存 Java 应用服务中间件
nginx的正向代理和反向代理以及tomcat
Nginx的正向代理和反向代理功能在不同的场景中具有重要作用,正向代理主要用于客户端访问控制和匿名浏览,而反向代理则用于负载均衡和高可用性服务。Tomcat作为Java Web应用服务器,与Nginx结合使用,可以显著提升Web应用的性能和稳定性。通过合理配置Nginx和Tomcat,可以构建高效、稳定和可扩展的Web服务架构。
190 11
|
3月前
|
前端开发 应用服务中间件 定位技术
Nginx 如何代理转发传递真实 ip 地址?
【10月更文挑战第32天】
553 5
Nginx 如何代理转发传递真实 ip 地址?
|
3月前
|
应用服务中间件 网络安全 nginx
轻松上手Nginx Proxy Manager:安装、配置与实战
Nginx Proxy Manager (NPM) 是一款基于 Nginx 的反向代理管理工具,提供直观的 Web 界面,方便用户配置和管理反向代理、SSL 证书等。本文档介绍了 NPM 的安装步骤,包括 Docker 和 Docker Compose 的安装、Docker Compose 文件的创建与配置、启动服务、访问 Web 管理界面、基本使用方法以及如何申请和配置 SSL 证书,帮助用户快速上手 NPM。
1055 1
|
3月前
|
负载均衡 前端开发 JavaScript
Nginx 代理多服务
以上是 Nginx 代理多服务的几种常见方式,在实际应用中,可以根据具体的业务需求和系统架构选择合适的代理方式,并结合其他 Nginx 的功能和配置来优化和完善系统的性能和功能。
|
4月前
|
应用服务中间件 API nginx
使用正则表达式实现 Nginx 代理
【10月更文挑战第19天】在不断发展的互联网技术中,掌握正则表达式在 Nginx 代理中的应用是非常重要的。不断探索和实践,将有助于我们在实际工作中更好地运用这一技术,提升项目的质量和效率。
|
4月前
|
缓存 负载均衡 应用服务中间件
Nginx 实现一个端口代理多个前后端服务
【10月更文挑战第19天】Nginx 的强大功能不仅限于此,它还可以与其他技术和工具相结合,为我们的应用提供更强大的支持和保障。在不断发展的互联网时代,掌握 Nginx 的使用技巧将为我们的工作和生活带来更多的便利和效益。

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73