详解nginx过滤url实现前台js的配置问题

我们在开发的过程中,可能需要一些配置,这些配置可能就是仅仅为了开发的方便,比方说,订单过期时间,生产环境需要半小时失效,但是真正开发时,我不可能等上个半小时,所以这个时间这个失效时间我们会写在配置文件中,这样开发环境和生产环境各一套配置,来回切换很方便的.

基于摘要里的,在Java后台实现很方便,只需要读取properties配置文件即可

但是在前台js,js是在浏览器里执行的,无法读取服务器上的配置,除非请求后台,但是每次的开销也是挺大的,所以这个想法被ps了

这时候可以利用nginx,前台静态页面是部署在nginx中,所以我们可以配置nginx过滤某个js的url,然后指向我们需要的文件

前台代码

index.html

<!-- 即配置文件 -->
<script src="/config.js"></script>
<!-- 动态加载js -->
<script type="application/javascript">
  if (config.devMode == 'dev') {
    loadJs("开发环境的js");
  } else {
    loadJs("开发环境的js");
  }  

  function loadJs(url, callback) {
    // 实现
  }
</script>

配置文件(生产环境配置和开发环境的配置在不同路径下,但是文件名同名)

var config = {
  // 或者 prd
  devMode: 'dev',
  // 还可以配置请求后台的url前缀
  serverUrl: 'http://dev.company.com'
  // serverUrl: 'http://api.company.com'
}

nginx的配置

server {
  listen    80;
  server_name www.company.com;

  location / {
    root /Users/sunhao/Documents/company/project;
    index index.html;
    try_files $uri $uri/ /index.html;
    expires -1;
  }
}
server {
  listen    80;
  server_name debug.company.com;

  location / {
    root /Users/sunhao/Documents/company/project;
    index index.html;
    try_files $uri $uri/ /index.html;
    expires -1;
  }

  location ~ .flower\.js$ {
    root /Users/sunhao/Documents/company/project/js;
  }
}

前一个server配置的是生产环境,正常配置

后一个,过滤flower.js,定向到另外一个文件夹下

访问www.company.com就是正式环境

访问debug.company.com就是开发环境了

这样就可以实现配置的功能了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 Nginx环境配置详细介绍

    微信小程序 Nginx环境配置详细介绍

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • Linux下安装配置nginx详解

    Linux下安装配置nginx详解

    一.Linux下安装配置nginx 第一次安装nginx,中间出现的问题一步步解决. 用到的工具secureCRT,连接并登录服务器. 1.1 rz命令,会弹出会话框,选择要上传的nginx压缩包. #rz 1.2 解压 [root@vw010001135067 ~]# cd /usr/local/ [root@vw010001135067 local]# tar -zvxf nginx-1.10.2.tar.gz 1.3 进入nginx文件夹,执行./configure命令 [root@vw0

  • nginx动态添加访问白名单的方法

    本文实现的功能是:网站启用访问白名单,对于不在白名单中又需要访问的客户,只需打开一个不公开的网址,然后自动获得2小时的访问权限,时间达到后自动删除访问权限 实现此功能需要以下几个步骤: nginx启用访问白名单 客户打开指定网址自动添加访问白名单 为网址添加简单的认证 每两个小时自动恢复默认白名单,删除临时IP访问权限 一.nginx配置访问白名单 这个就比较简单了,简单贴一下配置: ............nginx.conf........... geo $remote_addr $ip_w

  • Nginx启用GZIP压缩网页传输方法(推荐)

    原理: 浏览器-请求--> 声明可以接受 gzip压缩 或 deflate压缩 或compress 或 sdch压缩 从http协议的角度看–请求头 声明 acceopt-encoding: gzip deflate sdch (是指压缩算法,其中sdch是google倡导的一种压缩方式,目前支持的服务器尚不多) 服务器–>回应-把内容用gzip方式压缩-->发给浏览器 浏览<-–解码gzip-–接收gzip压缩内容-- gzip配置的常用参数 参数 含义 gzip on/off

  • Nginx 禁止IP访问如何实现

    Nginx 禁止IP访问 我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了你的ip)的时候生效最关键的一点是,在server的设置里面添加这一行: listen 80 default; 后面的default参数表示这个是默认虚拟主机. Nginx 禁止IP访问这个设置非常有用. 比如别人通过ip或者未知域名访问你的网站的时候,你希望禁止显示任何有

  • 使用MongoDB分析Nginx日志的方法详解

    使用MongoDB分析Nginx日志的方法详解

    本文我们要从日志文件中找出IP访问最多的10条记录,然后判断其是否合法,从而采取对应的措施.感兴趣的朋友们一起来看看吧. 日志解析流程 正常情况下,关于Nginx日志解析的流程如下所示: 一般情况下我们会对要解析的日志提前进行切分,常用的方式是按照日期,然后保存1个星期的日志.然后接下来就是日志的解析了,在这个过程中会使用到一些工具或编程语言,例如awk.grep.perl.python. 最后的入库和可视化处理一般视业务而定,没有强制的要求. 日志查询的解决方案 而关于Nginx日志解析的常用

  • Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解

    Nginx反向代理一个80端口下配置多个微信项目详解 我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎么办? 我们可以用nginx服务器做反向代理来解决这个问题.nginx服务器对外80端口,然后根据URL参数不同,对内访问不同的项目. nginx配置如下: 打开/usr/local/nginx/conf/nginx.conf worker_pr

  • 微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

    微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • Nginx配置文件nginx.conf详细说明

    在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户 user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 error_log /var/log/nginx/error.log; pid /var/run/nginx.pid; #工作模式及连接数上限 events { use epoll; #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但

  • 详解nginx过滤url实现前台js的配置问题

    我们在开发的过程中,可能需要一些配置,这些配置可能就是仅仅为了开发的方便,比方说,订单过期时间,生产环境需要半小时失效,但是真正开发时,我不可能等上个半小时,所以这个时间这个失效时间我们会写在配置文件中,这样开发环境和生产环境各一套配置,来回切换很方便的. 基于摘要里的,在Java后台实现很方便,只需要读取properties配置文件即可 但是在前台js,js是在浏览器里执行的,无法读取服务器上的配置,除非请求后台,但是每次的开销也是挺大的,所以这个想法被ps了 这时候可以利用nginx,前台静

  • 详解nginx配置url重定向-反向代理

    详解nginx配置url重定向-反向代理

    本文系统:Centos6.5_x64 三台主机:nginx主机,hostname: master.lansgg.com  IP: 192.168.10.128             apache主机,hostname: client1.lansgg.com IP:  192.168.10.129 一.nginx 地址重定向 二.nginx 反向代理 1.地址重定向:是指当使用者浏览某个网址时,将他导向到另一个网址的技术.常用在把一串很长的网址,转成较短的网址.因为当要传播某网站时,常常因为网址

  • 详解nginx配置location总结及rewrite规则写法

    location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这条规则将匹配到所有请求 # 但是正则和最长字符串会优先匹配 [ configuration B ] } location /documents/ { # 匹配任何以 /documents/ 开头的地址,匹配符合以后,还要继续往下搜索 # 只有后面的正则表达式没有匹配到时,这

  • 详解Nginx中的Rewrite的重定向配置与实践

    一:理解地址重写 与 地址转发的含义. 地址重写与地址转发是两个不同的概念. 地址重写 是为了实现地址的标准化,比如我们可以在地址栏中中输入 www.baidu.com. 我们也可以输入 www.baidu.cn. 最后都会被重写到 www.baidu.com 上.浏览器的地址栏也会显示www.baidu.com. 地址转发:它是指在网络数据传输过程中数据分组到达路由器或桥接器后,该设备通过检查分组地址并将数据转发到最近的局域网的过程. 因此地址重写和地址转发有以下不同点: 1. 地址重写会改变

  • 详解nginx 配置文件解读

    nginx配置文件主要分为四个部分: main{#(全局设置) http{#服务器 upstream{} #(负载均衡服务器设置:主要用于负载均衡和设置一系列的后端服务器) server{ #(主机设置:主要用于指定主机和端口) location{}#(URL匹配特点位置的设置) } } } server继承main,location继承server,upstream即不会继承其他设置也不会被继承. 一.main 全局配置 nginx在运行时与具体业务功能(比如http服务或者email服务代理

  • 详解Nginx服务器和iOS的HTTPS安全通信

    详解Nginx服务器和iOS的HTTPS安全通信

    详解Nginx服务器和iOS的HTTPS安全通信 简介 在网络通信中,使用抓包软件可以对网络请求进行分析,并进行重放攻击,重放攻击的解决方案一般是使用一个变化的参数,例如RSA加密的时间戳,但考虑到网络传输时延,时间戳需要有一定的误差容限,这样仍然不能从根本上防止重放攻击.想要较好的解决重放攻击问题,应考虑使用HTTPS通信,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网络协议,比HTTP协议安全. 实现 对于用浏览器访问的网站,需要向CA申请证书才能保证HTTPS的网

  • 详解 Nginx 301重定向的配置

    详解 Nginx 301重定向的配置 301重定向是很常见的需求,比如访问 nowamagic.net,自动跳到 www.nowamagic.net.或者倒过来,访问 www.nowamagic.net 跳到 nowamagic.net.Nginx 中配置 301 重定向(301 redirect)很容易,下面介绍下方法. 打开 nginx.conf 文件,找到你的 server 配置段: server { listen 80; server_name nowamagic.net www.now

  • 详解nginx请求头数据读取流程

    在上一篇文章中,我们讲解了nginx是如何读取请求行的数据,并且解析请求行的.本文我们则主要讲解nginx是如何读取客户端发送来的请求头的数据,并且解析这些数据的.本质上来讲,请求行的数据和请求头的数据读取流程是基本一致的,因为其都面临着如何从间断的数据流中读取到数据,也面临着如何对数据进行处理的问题. 1. 请求头读取主流程 在介绍请求头的读取流程之前,我们首先展示一个http请求报文的示例: POST /web/book/read HTTP/1.1 Host: localhost Conne

  • 详解Nginx如何配置Web服务器的示例代码

    概述 今天主要分享怎么将NGINX配置作为Web服务器,并包括以下部分: 设置虚拟服务器 配置位置 使用变量 返回特定状态码 重写HTTP响应 在高层次上,将NGINX配置作为Web服务器有一些问题需要了解,定义它处理哪些URL以及如何处理这些URL上的资源的HTTP请求. 在较低层次上,配置定义了一组控制对特定域或IP地址的请求的处理的虚拟服务器. 用于HTTP流量的每个虚拟服务器定义了称为位置的特殊配置实例,它们控制特定URI集合的处理. 每个位置定义了自己的映射到此位置的请求发生的情况.

  • 详解nginx.conf 中 root 目录设置问题

    在配置 nginx.conf 总会遇到一些问题,下面列举一些常见的问题并说明如何解决 1.相对路径的问题 例如配置文件中 location 设置 location ~ .php${ root html } location 中root所指向的html是一个相对路径,相对的是这个配置文件的路径,假设此配置文件的位置是/etc/nginx/conf.d,那么这个html的绝对路径就是/etc/nginx/conf.d/html.因此为避免出现不必要的麻烦,在配置root路径的过程中最好用绝对路径.

随机推荐