Front end prerequisite Nginx configuration details

Nginx (engine x) is a lightweight, high-performance HTTP and reverse proxy server, is also a general proxy server (TCP/UDP/IMAP/POP3 / SMTP), initially by the russians Igor Sysoev writing.

Basic commands

nginx-t checks the configuration file for syntax errors
nginx-s reload hot load, reload the configuration file
nginx-s stop quick shutdown
Close nginx-s quit wait for the work process to complete

After setting up the nginx server and starting it up, let's first look at the default configuration of nginx and then go through the different usage scenarios one by one.

The default configuration

In the Nginx installation directory, we copy one copy of 'nginx.conf' into 'nginx.conf.default' as a backup configuration file, and then modify 'nginx.conf'

#  The number of work processes 
worker_processes 1;
events {
  worker_connections 1024; #  Number of connections per worker process 
}

http {
  include    mime.types;
  default_type application/octet-stream;

  #  Log format 
  log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
         '$status $body_bytes_sent "$http_referer" '
         '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
  access_log /srv/log/nginx/access.log access; #  Log output directory 
  gzip on;
  sendfile on;

  #  Link timeout, automatically disconnect 
  keepalive_timeout 60;

  #  Virtual host 
  server {
    listen    8080;
    server_name localhost; #  Browser access domain name 

    charset utf-8;
    access_log logs/localhost.access.log access;

    #  routing 
    location / {
      root  www; #  Access the root directory 
      index index.html index.htm; #  Entrance to the file 
    }
  }

  #  Introduce additional configuration files 
  include servers/*;
}

Building site

Under the other configuration file 'servers' directory, add the new site configuration file xx.conf.

Add 127.0.0.1 xx_domian# virtual host to the computer hosts file

server {
  listen    8080;
  server_name xx_domian; #  Browser access domain name 

  charset utf-8;
  access_log logs/xx_domian.access.log access;

  #  routing 
  location / {
    root  www; #  Access the root directory 
    index index.html index.htm; #  Entrance to the file 
  }
}

Execute the command nginx-s reload and the browser will see your page when it visits xx_domian

Set the expiration time based on the file type

location ~.*\.css$ {
  expires 1d;
  break;
}
location ~.*\.js$ {
  expires 1d;
  break;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  access_log off;
  expires 15d;  # save 15 day 
  break;
}

# curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I # Test picture max-age

Disable file caching

The development environment often changes code because the browser cache needs to be forced to refresh to see the effect. This is where we can disable browser caching to improve efficiency

location ~* \.(js|css|png|jpg|gif)$ {
  add_header Cache-Control no-store;
}

Preventing hotlinking

It can prevent files from being called by other websites

location ~* \.(gif|jpg|png)$ {
  #  Only allow  192.168.0.1  Request resources 
  valid_referers none blocked 192.168.0.1;
  if ($invalid_referer) {
    rewrite ^/ http://$host/logo.png;
  }
}

Static file compression

server {
  #  open gzip  The compression 
  gzip on;
  #  Set up the gzip The required http Protocol minimum version   ( HTTP/1.1, HTTP/1.0 ) 
  gzip_http_version 1.1;
  #  Set the compression level, the higher the compression level, the longer the compression time   ( 1-9 ) 
  gzip_comp_level 4;
  #  Set the minimum number of bytes of compression,   page Content-Length To obtain 
  gzip_min_length 1000;
  #  Sets the type of the compressed file   ( text/html)
  gzip_types text/plain application/javascript text/css;
}

Execute the command nginx-s reload, after successful browser access

Specify the error page

#  Returns the correct error page based on the status code 
error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root /source/error_page;
}

Execute the command nginx-s reload, after successful browser access

Cross-domain problem

Cross-domain definition

The same origin policy limits how documents or scripts loaded from the same source can interact with resources from another source. This is an important security mechanism for isolating potentially malicious files. Read operations between different sources are generally not allowed.

Definition of homology

If both pages have the same protocol, port (if specified), and domain name, both pages have the same source. nginx addresses cross-domain principles

Such as:

The front-end server domain name is: http://xx_domain The back-end server domain name is: https: / / github com

Now http: / / xx_domain https: / / github com initiate request 1 will appear across the field.

However, you only need to start one nginx server, set server_name to xx_domain, then set the corresponding location to intercept cross-domain requests from the front end, and finally proxy the request back to github.com. The following configuration:

##  Configure the parameters for the reverse proxy 
server {
  listen  8080;
  server_name xx_domain

  ## 1.  The user to access  http://xx_domain , then reverse proxy to  https://github.com
  location / {
    proxy_pass https://github.com;
    proxy_redirect   off;
    proxy_set_header  Host       $host;    #  Transfer of the domain name 
    proxy_set_header  X-Real-IP    $remote_addr; #  pass ip
    proxy_set_header  X-Scheme     $scheme;   #  Transfer protocol 
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

This is a perfect way to bypass the browser's same-origin policy: github.com accesses github.com of nginx as same-origin access, while nginx requests forwarded to the server do not trigger the browser's same-origin policy.