《前端運維》二、Nginx--3靜態資源服務、跨域與其他

Zaking發表於2022-03-24

一、靜態資源服務

  首先,靜態資源一般是指客戶端傳送請求到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,複製到你的伺服器上試一下。

 

  然後,它就壓縮了。

 

二、跨域與其他

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配置頭欄位就可以了。比如:

語法:

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

 

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

相關文章