2018年

Nginx动静分离核心配置

  #动静分离
  server{
    listen 80;
    server_name cc.com;
    access_log off;

    location ~* \.(png|jpg|js|css)$ {
        proxy_pass http://127.0.0.1:8080;
        #所有以.png .html .js .css结尾的url进入此路径  (png|html|js|css)
    }

    location /{
         index index.html index.htm;
         proxy_pass http://127.0.0.1:8080/m/;#注意这里的/的含义见下文
    }

  }

    在Nginx中配置proxy_pass代理转发时,如果在proxy_pass后面的url加/,表示绝对根路径;如果没有/,表示相对路径,把匹配的路径部分也给代理走。

完整配置参考

server {
        listen       80;
        server_name   aaa.com;
    
        #access_log  logs/web.log  main;
        #access_log  off;
        location ~ ^/(WEB-INF)/ {  
            deny all;  
        }
     #rewrite ^(.*)$  https://$host$1 permanent; #用于将http页面重定向到https页面

     #动静分离
     location ~* \.(gif|jpg|png|bmp|swf|js|css)$ {
        expires 30d;  #缓存30天
        proxy_pass http://localhost:8080;
        #所有以.png .html .js .css结尾的url进入此路径  (png|html|js|css)
     }
     
     location / {           
         root   /cycy/web/site/m;

         index index.jsp index.html index.htm;
         proxy_pass   http://localhost:8080/m/;
         proxy_set_header   Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_redirect off;
         client_max_body_size 10m;      
         client_body_buffer_size 128k;  
         proxy_connect_timeout 90;      
         proxy_read_timeout 90;         
         proxy_buffer_size 4k;
         proxy_buffers 6 32k;
         proxy_busy_buffers_size 64k;  
         proxy_temp_file_write_size 64k;     
    }
    
        gzip on;
        gzip_min_length 1k;
        gzip_buffers    4 16k;
        gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types text/plain application/x-javascripttext/css application/xml;
        gzip_vary on;
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    

扩展阅读

基本语法: location [=|~|~*|^~]/uri/{...}
= 严格匹配, 如果这个查询匹配,将停止搜索并立即处理此请求
~ 区分大小写匹配(可用正则表达式)
~* 不区分大小写匹配(可用正则表达式)
!~ 区分大小写匹配
!~* 不区分大小写匹配
^~ 如果把这个前缀用于一个常规字符串

Nginx匹配多个路径正则表达式

 #匹配/node /info /search
 location ~* ^/(node|info|search)/ {
     proxy_pass   http://localhost:8080;
 }

 #绝对匹配一个路径 /info    
 #location ^~ /info/ {
 #    proxy_pass   http://localhost:8080;
 #}

具体的location匹配命令

注意:一下的大括号和双引号是为乐凸显匹配规则 , 用的时候只有具体符号

1.” ~ ” 匹配区分大小写。

location ~ /js/ {

//如果是JS大写的是不会匹配到的   

}

2.” ~* “ 匹配不区分大小写。

location ~* /js/ {

//JS大写或者小写都可以匹配到   

}

3.” ^ “ 匹配字符串的开始标识.

4.” $ “ 匹配字符串的结束标识.

5.” . “ 点符号匹配除换行符以外的任意字符

6.” * “ 重复零次或更多次 (” + “) 重复一次或更多次 (” ? “) 重复零次或一次

7.” ^~ “ 注意: Nginx将在这个字符串匹配后停止进行正则表达式的匹配(location指令中正则表达式的匹配的结果优先使用) ,一般这种情况用来匹配目录

location ^~ /img/ {

 // 这个则匹配的目录, 当匹配到此规则即可终止往下匹配

}
location ~* .(gif|jpg|jpeg)${

// 这个规则则是访问的具体的文件 , 如xxxx.jpg等

}

8.” = “ 精确匹配

location = / {

 // 指定某一个规则进行精确的匹配 ,只能匹配" / "

}
location / {

 // 这个进行全部匹配

}

9.” @ “定义一个命名的 location,使用在内部定向时使用

// 例如出现异常400等 ,可以直接跳转到 单独定义的异常处理的location
error_page 404 = @fetch;

location @fetch(
proxy_pass http://fetch;
)

10.” [^x] “ 匹配除了x以外的任意字符 , “[^abcde]” 匹配除了abcde这几个字母以外的任意字符

” [/] “这个匹配所有的

二.location 匹配的优先级

location 匹配的优先级(与location在配置文件中的顺序无关)

1.= 精确匹配会第一个被处理。如果发现精确匹配,nginx停止搜索其他匹配。
2.普通字符匹配,正则表达式规则和长的块规则将被优先和查询匹配,也就是说如果该项匹配还需去看有没有正则表达式匹配和更长的匹配。
3.^~ 则只匹配该规则,nginx停止搜索其他匹配,否则nginx会继续处理其他location指令。
最后匹配理带有”~”和”~*”的指令,如果找到相应的匹配,则nginx停止搜索其他匹配;当没有正则表达式或者没有正则表达式被匹配的情况下,那么匹配程度最高的逐字匹配指令会被使用。

CSS 让背景图片铺满全部显示,填满当前div的方法

.class{
   background-image: url('a.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

background-size

首先声明
   background-size是一个css3属性。 翻译过来很容易就知道它是用来规定背景尺寸的。
关于浏览器兼容性
    IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+。
用法
   background-size有4个值分别是(length | percentage | cover | contain)。
        length: 它主要是用来规定背景的宽(width)和高(heigth)。eg: background-size: 100px 100px; 
        percentage: 它主要是用来以父元素的百分比来设置背景的宽高。 eg: background-size: 50% 50%;
        length和percentage的用法其实是相似的, 都是通过设置背景的长宽来显示图片。 如果只有一个参数, 则表示另一个参数为auto。
        cover: 它主要表示把图片扩展到足够大, 以使背景图像完全覆盖背景区域。 这里要注意背景图像的某些部分也许无法显示在背景定位区域中。
        eg: background-size: cover;
        contain: 它主要表示把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。eg: background-size: contain;

背景图不平铺
background-repeat: no-repeat;

当内容高度大于图片高度时,背景图像的位置相对于viewport固定
background-attachment: fixed; //此条属性必须设置否则可能无效/

让背景图基于容器大小伸缩
background-size: cover;

免责声明
本博客部分内容来自于互联网,不代表作者的观点和立场,如若侵犯到您的权益,请联系[email protected]。我们会在24小时内进行删除。