《前端運維》二、Nginx–3靜態資源服務、跨域與其他
- 2022 年 3 月 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', '//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 "//www.baidu.com" http://115.29.148.6/kf.jpg
好啦，今天就到這裡，後面還有一篇文章，學學代理和重定向啥的。
