Elaborate on the configuration of nginx filter url implementation foreground js

We are in the process of development, may need 1 configuration, the configuration is probably just in order to develop convenient, expiration time, order, for example, it takes half an hour to production failure, but the real development, it is impossible for me to wait half an hour, so this time the expiry time we will write in a configuration file, so that the development environment and production environment each 1 set of configuration, very convenient to switch back and forth.

Based on the summary, it is easy to implement in the Java background; you only need to read the properties configuration file

However, in the foreground, js and js are executed in the browser, so it is impossible to read the configuration on the server unless the background is requested. However, the overhead is quite high every time, so this idea was adopted by ps

At this point, we can make use of nginx. The foreground static page is deployed in nginx, so we can configure nginx to filter the url of some js and then point to the file we need

The front desk code

index.html

<!--  Configuration file  -->
<script src="/config.js"></script>
<!--  Dynamic loading js -->
<script type="application/javascript">
  if (config.devMode == 'dev') {
    loadJs(" Development environment js");
  } else {
    loadJs(" Development environment js");
  }  

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

Configuration file (the production and development environments are configured in different paths, but the file name is the same)

var config = {
  //  or  prd
  devMode: 'dev',
  //  You can also configure the request background url The prefix 
  serverUrl: 'http://dev.company.com'
  // serverUrl: 'http://api.company.com'
}

nginx configuration

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;
  }
}

The first server was configured in a production environment and is normally configured

After 1, filter flower.js and direct to another folder

Access www.company.com is the official environment

Access debug.company.com is the development environment

This allows you to implement the configured functionality