天天看點

《前端運維》二、Nginx–3靜态資源服務、跨域與其他「建議收藏」

大家好,又見面了,我是你們的朋友全棧君。

一、靜态資源服務

  首先,靜态資源一般是指用戶端發送請求到Web伺服器,web伺服器從記憶體中取得相應的檔案,傳回給用戶端,用戶端解析并渲染出來。動态資源呢,則是由用戶端發起請求,先交由web容器,web容器連接配接資料庫,資料庫處理資料之後,将内容交給web伺服器,web伺服器傳回給用戶端解析并渲染。

  一般的靜态資源有:HTML、CSS、JS、JPEG、PNG、MPEG、Word、EXCEL等。

  CDN的全稱是Content Delivery Network,即内容分發網絡。CDN系統能夠實時地根據網絡流量和各節點的連接配接、負載狀況以及到使用者的距離和響應時間等綜合資訊将使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需内容,解決 Internet網絡擁擠的狀況,提高使用者通路網站的響應速度。

一、配置文法

1、sendfile

  不經過使用者核心發送檔案。

文法:

Syntax: sendfile on / off;
Default: sendfile off
Context: http,server,location,if in location           

複制

2、tcp_nopush

在sendfile開啟的情況下,合并多個資料包,提高網絡包的傳輸效率。

文法:

Syntax: tcp_nopush on / off;
Default: tcp_nopush off
Context: http,server,location           

複制

3、tcp_nodelay

  在keepalive連接配接下,提高網絡包的傳輸實時性.

文法:

Syntax: tcp_nodelay on / off;
Default: tcp_nodelay on
Context: http,server,location           

複制

4、gzip

壓縮檔案可以節約帶寬和提高網絡傳輸效率。

文法:

Syntax: gzip on / off;
Default: gzip off
Context: http,server,location           

複制

5、gzip_comp_level

壓縮比率越高,檔案被壓縮的體積越小。

文法:

Syntax: gzip_comp_level level
Default: gzip_comp_level 1
Context: http,server,location           

複制

6、gzip_http_version

壓縮版本。

文法:

Syntax: gzip_http_version 1.0/1.1
Default: gzip_http_version 1.1
Context: http,server,location           

複制

7、http_gzip-static_module

  先找磁盤上找同名的

.gz

這個檔案是否存在,節約CPU的壓縮時間和性能損耗。

http_gzip_static_module:

預計gzip子產品。

http_gunzip_module

:應用支援gunzip的壓縮方式。

文法:

Syntax: gzip_static on/off
Default: gzip_static off
Context: http,server,location           

複制

二、實戰例子

  首先,我們先建個目錄:

mkdir -p /data/www/images
mkdir -p /data/www/html
mkdir -p /data/www/js
mkdir -p /data/www/css
mkdir -p /data/www/download           

複制

  檔案夾有了,我們可以建立一些對應的檔案,随便寫,放到對應的目錄下就好了。(這裡,如果覺得vi不好用的話,可以在本地建立後,通過ftp傳輸到伺服器)。

  然後,我們到/etc/nginx/nginx.conf中進行配置:

location ~ .*\.(jpg|png|gif)$ {
        gzip off;# 關閉壓縮
        root /data/www/images;
    }

    location ~ .*\.(html|js|css)$ {
        gzip_static on;
        gzip on; # 啟用壓縮
        gzip_min_length 1k;    # 隻壓縮超過1K的檔案
        gzip_http_version 1.1; # 啟用gzip壓縮所需的HTTP最低版本
        gzip_comp_level 9;     # 壓縮級别,壓縮比率越高檔案被壓縮的體積越小
        gzip_types  text/css application/javascript;# 進行壓縮的檔案類型
        root /data/www/html;
    }

    location ~ ^/download {
        gzip_static on; # 啟用壓縮
        tcp_nopush on;  # 不要着急發,攢一波再發
        root /data/www; # 注意此處目錄是`/data/www`而不是`/data/www/download`
    }            

複制

  這段代碼寫在符合文法的位置即可。然後重新開機nginx服務。但是呢,你通路html頁面的時候,發現,欸?http的header中沒有gzip的字段。咋回事?可能是因為你的檔案體積太小,沒有觸發壓縮。咱們換個大點的試試,比如下載下傳個jquery,複制到你的伺服器上試一下。

《前端運維》二、Nginx–3靜态資源服務、跨域與其他「建議收藏」

  然後,它就壓縮了。

二、跨域與其他

1、跨域

  跨域的概念簡單來說就是是指一個域下的文檔或腳本試圖去請求另一個域下的資源。

文法:

Syntax: add_header name value
Default: add_header --
Context: http,server,location           

複制

實戰:

  我們參照之前的模式,建立一個json的檔案夾,在裡面加上一個json檔案。

mkdir -p /data/json
cd /data/json
vi user.json
# 随便寫點内容           

複制

  然後配置:

location ~ .*\.json$ {
     add_header Access-Control-Allow-Origin http://127.0.0.1:8080;
     add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
     root /data/json;
}           

複制

  然後再index.html裡請求這個json:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<script>
let xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://115.29.148.6/user.json', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
xhr.send();
</script>
</body>
</html>           

複制

  然後呢,我們可以在本地啟動一個http-server,通路咱們的這個index頁面,啟動的話,在index.html所屬的目錄下啟動http-server即可。要安裝node哦,http-server是node的一個子產品。

2、浏覽器緩存

  我們先來看張圖,了解下:

《前端運維》二、Nginx–3靜态資源服務、跨域與其他「建議收藏」

  浏覽器緩存這一塊,實際上就是通過nginx配置頭字段就可以了。比如:

文法:

Syntax: expires time
Default: expires off
Context: http,server,location           

複制

實戰:

location ~ .*\.(jpg|png|gif)$ {
    expires 24h;
}           

複制

3、防盜鍊

  防盜鍊的作用,主要是用來防止網絡資源被盜用,保證資訊安全,防止流量過量。需要差別出哪些請求是非正常的使用者請求。簡單來說,就是允許哪些源(ip位址)來通路我的伺服器資源。

文法:

Syntax: valid_referers none、block、server_names、IP
Default: --
Context: server,location           

複制

實戰:

location ~ .*\.(jpg|png|gif)$ {
        expires 1h;
        gzip off;
        gzip_http_version 1.1;
        gzip_comp_level 3;
        gzip_types image/jpeg image/png image/gif;
        # none沒有refer blocked非正式HTTP請求 特定IP
        valid_referers none blocked 115.29.148.6;
        if ($invalid_referer) { # 驗證通過為0,不通過為1
            return 403;
        }
        root /data/images;
    }           

複制

  伺服器的nginx裡配置好了之後,跟跨域的例子類似,我們可以建立一個html檔案,引用伺服器的圖檔,開啟了referer後,本地的請求就擷取不到圖檔資源了,因為我們在伺服器上做了限制。當然,如果你嫌麻煩的話,也可以使用curl來做測試:

curl -v -e "115.29.148.6" http://115.29.148.6/kf.jpg
curl -v -e "http://www.baidu.com" http://115.29.148.6/kf.jpg           

複制

  好啦,今天就到這裡,後面還有一篇文章,學學代理和重定向啥的。

釋出者:全棧程式員棧長,轉載請注明出處:https://javaforall.cn/124353.html原文連結:https://javaforall.cn