Front-end Nginx configuration necessary

Nginx (engine x) is a lightweight, high-performance HTTP server and reverse proxy, but also a universal proxy server (TCP / UDP / IMAP / POP3 / SMTP), originally written by Russian Igor Sysoev.

Basic Commands

nginx -t             检查配置文件是否有语法错误
nginx -s reload       热加载，重新加载配置文件
nginx -s stop         快速关闭
nginx -s quit         等待工作进程处理完成后关闭
复制代码

Build a good nginx server and start later, we look at nginx default configuration, and then one by one describes the different usage scenarios.

default allocation

Under Nginx installation directory, we copy of ` nginx.conf`成 ` nginx.conf.default` backup as a configuration file, and then modify the ` nginx.conf`

# 工作进程的数量
worker_processes  1;
events {
    worker_connections  1024; # 每个工作进程连接数
}

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

    # 日志格式
    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; # 日志输出目录
    gzip  on;
    sendfile  on;

    # 链接超时时间，自动断开
    keepalive_timeout  60;

    # 虚拟主机
    server {
        listen       8080;
        server_name  localhost; # 浏览器访问域名

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

        # 路由
        location / {
            root   www; # 访问根目录
            index  index.html index.htm; # 入口文件
        }
    }

    # 引入其他的配置文件
    include servers/*;
}
复制代码

Building site

In other configuration files `servers` directory, add a new site profile xx.conf.

PC hosts file to add 127.0.0.1 xx_domian

# 虚拟主机
server {
    listen       8080;
    server_name  xx_domian; # 浏览器访问域名

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

    # 路由
    location / {
        root   www; # 访问根目录
        index  index.html index.htm; # 入口文件
    }
}
复制代码

Run nginx -s reload, after the success of browser access xx_domian be able to see your page

Set the expiration time depending 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;    #保存15天
    break;
}

# curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I #测试图片的max-age
复制代码复制代码

Prohibit file cache

Development environments often change the code, because the browser cache that needs to force a refresh to see the results. This is what we can disable the browser cache to improve efficiency

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

Hotlink Protection

You can prevent files from being called by other sites

location ~* \.(gif|jpg|png)$ {
    # 只允许 192.168.0.1 请求资源
    valid_referers none blocked 192.168.0.1;
    if ($invalid_referer) {
       rewrite ^/ http://$host/logo.png;
    }
}复制代码

Static file compression

server {
    # 开启gzip 压缩
    gzip on;
    # 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 设置压缩级别，压缩级别越高压缩时间越长  （1-9）
    gzip_comp_level 4;
    # 设置压缩的最小字节数， 页面Content-Length获取
    gzip_min_length 1000;
    # 设置压缩文件的类型  （text/html)
    gzip_types text/plain application/javascript text/css;
}
复制代码

Run nginx -s reload, after the success of browser access

Fixed error page specified

# 根据状态码，返回对于的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /source/error_page;
}复制代码

Run nginx -s reload, after the success of browser access

Cross-domain issues

Cross-domain definition

Origin policy limits the document or script loaded from the same source how to interact with resources from another source. This is an important security mechanism used to isolate potentially malicious files. Typically do not allow read operations between different sources.

Homologous definitions

If two pages of protocol, port (if specified) and domain name are the same, the two pages have the same source.

nginx solve cross-domain principle

E.g:

• Front-end server domain name:http://xx_domain
• The back-end server domain name:https://github.com

Now http://xx_domainfor https://github.comsome cross-domain request will be initiated.

But just need to start a nginx server will be server_nameset xx_domain, and then set the appropriate location request to intercept the front needs across domains, and finally back to the requesting agency github.com. The following configuration:

## 配置反向代理的参数
server {
    listen    8080;
    server_name xx_domain

    ## 1. 用户访问 http://xx_domain，则反向代理到 https://github.com
    location / {
        proxy_pass  https://github.com;
        proxy_redirect     off;
        proxy_set_header   Host             $host;        # 传递域名
        proxy_set_header   X-Real-IP        $remote_addr; # 传递ip
        proxy_set_header   X-Scheme         $scheme;      # 传递协议
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}
复制代码

Such can be the perfect browser to bypass the same-origin policy: github.comaccess nginxof github.combelonging to homologous visit, but nginxto the server forwards a request does not trigger the browser's same-origin policy.