前端必會的nginx（配置視覺化）

Runningfyy發表於2021-10-29
前端Nginx視覺化

1.介紹

Nginx（發音同“engine X”）是非同步框架的web伺服器，也可以用作反向代理、負載平衡器和HTTP快取。

特點：和node類似，Nginx使用非同步事件驅動的方法來處理請求，適合處理io密集型場景

前端為什麼要學：

    1. 測試環境需要自己部署
    1. 遇到網路問題，我們要會排查問題，要有獨立解決的能力
    1. 效能優化
    1. 上線的時候指導ops部署

2.安裝

推薦還是通過yum一鍵安裝(centos)
一般需要知道兩個地址，

  • 執行地址 /usr/local/bin 這裡存放著可以直接執行的二進位制檔案，用來啟動或者重啟nginx (which nginx查詢)
  • 配置地址
    一般在 /usr/local/etc/nginx,不同的安裝方式可能有差異，但是安裝的時候一定會有資訊顯示 (nginx -t查詢)

執行地址（啟動，重啟）

啟動nginx
cd /use/local/sbin
./nginx
重啟nginx
cd /usr/sbin
nginx -s reload
或者直接/usr/sbin/nginx -s reload

配置地址

nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

在/etc/nginx裡面 我們可以看到有個檔案叫nginx.conf,這個就是基礎配置檔案,也可以說是大配置檔案.
裡面寫了一句話include /etc/nginx/conf.d/*.conf;
這就是說nginx會讀conf.d裡面的.conf當做小配置檔案 對於不同的專案我們可以單獨在小配置檔案裡面進行配置，這樣結構更清晰，更易維護。

編譯引數

我們還可以用nginx -V 來查一下所有的相關路徑。這些不是固定的，我們可以在安裝的時候指定這些引數進行編譯安裝。具體的可以網上查一下。

3.日誌

資源的訪問，是會產生日誌的，日誌分兩種，成功訪問日誌和失敗日誌
access_.log 訪問日誌
error.log 錯誤日誌
我們在nginx.conf裡面可以看到access日誌的目錄,以及日誌的格式
image.png
我們在/var/log/nginx/access裡面看一下，確實是按設定的格式返的

[roo@centos]# cat access.log

[roo@centos]# 111.206.87.56 - - [18/Aug/2021:17:42:47 +0800] "GET / HTTP/1.1" 200 4833 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" "-"

tail -f /var/log/nginx/access.log  //實時更新

內建變數

上面的log_format裡面 有一些$xxx 這玩意是nginx的內建變數，更詳細的可以網上查一下

名稱含義
$remote_addr客戶端地址
$remote_user客戶端使用者名稱稱
$time_local訪問時間和時區
$request請求的URI和HTTP協議
$http_host請求地址，即瀏覽器中你輸入的地址（IP或域名）
$statusHTTP請求狀態
$body_bytes_sent傳送給客戶端檔案內容大小
$http_user_agent使用者代理

4.靜態頁面

解讀下初始配置

/etc/nginx/nginx.conf
#   For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user root;  #設定nginx服務的系統使用使用者 
worker_processes auto; #工作程式數,一般和CPU數量相同 
error_log /var/log/nginx/error.log; #錯誤日誌地址
pid /run/nginx.pid; #錯誤日誌地址

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf; # 模組化開發

events {
    worker_connections 1024; #每個程式允許的最大連線數
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main; # main日誌

    sendfile            on; # 不經過使用者核心
    tcp_nopush          on; # 攢一波再發
    # tcp_nodelay         on; # 不延遲
    keepalive_timeout   65;  # 超時時間
    types_hash_max_size 4096;
    gzip on;                 #決定是否開啟gzip模組，on表示開啟，off表示關閉；
gzip_min_length 1k;      #設定允許壓縮的頁面最小位元組(從header頭的Content-Length中獲取) ，當返回內容大於此值時才會使用gzip進行壓縮,以K為單位,當值為0時，所有頁面都進行壓縮。建議大於1k
gzip_buffers 4 16k;      #設定gzip申請記憶體的大小,其作用是按塊大小的倍數申請記憶體空間,param2:int(k) 後面單位是k。這裡設定以16k為單位,按照原始資料大小以16k為單位的4倍申請記憶體
gzip_http_version 1.1;   #識別http協議的版本,早起瀏覽器可能不支援gzip自解壓,使用者會看到亂碼
gzip_comp_level 2;       #設定gzip壓縮等級，等級越底壓縮速度越快檔案壓縮比越小，反之速度越慢檔案壓縮比越大；等級1-9，最小的壓縮最快 但是消耗cpu
gzip_types text/plain application/x-javascript text/css application/xml;    #設定需要壓縮的MIME型別,非設定值不進行壓縮，即匹配壓縮型別
gzip_vary on;    

    include             /etc/nginx/mime.types;  # 副檔名與型別對映表
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf; # 子配置
 
    server {
        listen       80;  #埠
        listen       [::]:80; # It is for the IPv6 configs
        server_name  _; 
        root         /usr/share/nginx/html; #根目錄

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

# Settings for a TLS enabled server. ## 配置https的
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

5.具體應用

5.1 跨域（反向代理）

 location ～ /api {
   proxy_pass http://l-test9.dev.cn2.corp.xxx.cn:8080
 }

5.2 效能優化

  • 快取 expiress
location ~ .*\.(jpg|png|gif)$ {
    expires 24h;
    gzip on ;
}
  • 壓縮 gzip
    gzip開啟後的標誌，響應頭裡面：
Content-Encoding: gzip

1.3 防盜鏈

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 47.104.184.134;
+       if ($invalid_referer) { # 驗證通過為0，不通過為1
+           return 403;
+       }
        root /data/images;
    }

1.4 負載均衡


var http = require( 'http' );
var server =http.createServer( function ( request ,response ){
          response.end('server3 000');
} );
server.listen( 3000 ,function(){
console.log( 'HTTP伺服器啟動中，埠：3000' );
});
var server =http.createServer( function ( request ,response ){
          response.end('server4 000');
} );
server.listen( 4000 ,function(){
console.log( 'HTTP伺服器啟動中，埠：4000' );
});
var server =http.createServer( function ( request ,response ){
          response.end('server5 000');
} );
server.listen( 5000 ,function(){
console.log( 'HTTP伺服器啟動中，埠：5000' );
});

upstream fyy {
  server 127.0.0.1:3000 weight=10;
  server 127.0.0.1:4000;
  server 127.0.0.1:5000;
}

server {
    location / {
        proxy_pass http://fyy;
    }

負載均衡策略

型別種類
輪詢(預設)每個請求按時間順序逐一分配到不同的後端伺服器，如果後端伺服器down掉，能自動剔除
weight(加權輪詢)指定輪詢機率，weight和訪問比率成正比，用於後端伺服器效能不均的情況
ip_hash每個請求按訪問ip的hash結果分配，這樣每個訪客固定訪問一個後端伺服器，可以解決session的問題
least_conn哪個機器上連線數少就分發給誰
url_hash(第三方)按訪問的URL地址來分配 請求，每個URL都定向到同一個後端 伺服器上(快取)
fair(第三方)按後端伺服器的響應時間來分配請求，響應時間短的優先分配
正定義hashhash自定義key

1.5 rewrite

Port:9003 9004

  • 可以實現url重寫及重定向

使用場景： url頁面跳轉，維護，轉發

比如手機PC的一個重定向

server {
        listen       9003;   # 這個是pc網頁，但是如果使用者代理是手機即使訪問pc站也會重定向到移動端
        location / {
            if ($http_user_agent ~* '(Android|webOS|iPhone)') {
               rewrite  ^(.*)$ http://localhost:9004  break;
            } 
           
            root   /Users/fengyangyang/Desktop/nginx/pc;
            index  index.html index.htm;
        }
   
}

server {
        listen       9004; # 這個是手機網頁
        location / {
            root   /Users/fengyangyang/Desktop/nginx/mobile;
            index  index.html index.htm;
        }
   
}

6.視覺化配置

傳統的書寫Nginx配置 學習操作成本比較高
視覺化配置：根據你的互動，選擇一些條件，動態生成nginx配置檔案
比如我選擇的這個基礎配置
nignxConfig
好處：比較全，對前端暴露的東西比較少（高度封裝），學習成本低一點
壞處：太全了，不靈活

7.自己實現的一個視覺化的工具

7.1 目前專案中存在的問題

測試環境
1.測試伺服器上專案太多，埠管理混輪：

  • 專案和埠的對映混亂 ---->找不到對應的埠 （幾十個專案誰能記住相應埠）
  • 專案和配置檔案對映混亂 ---->找不到配置的地方（比如有些人圖省事，A專案的配置直接寫到B專案配置裡，後期其他人難以維護）

2.伺服器上完成各種操作比較繁瑣（新建修改專案配置）對前端水平也有一定要求

7.2 解決方案

做了一個線上編輯nginx的工具
支援以下功能

  • 新建專案 輸入專案名和埠 自動在伺服器上生成相關配置並完成nginx重啟
  • 支援線上修改伺服器上的配置，改完自動重啟nginx
  • 實時讀取伺服器你上配置，生成專案名與埠的對映
  • 支援自動部署 (沒有相應的目錄會自動建立)

image.png
image.png
image.png

優點：統一維護管理，前端不用直接接觸伺服器，提升部署效率

相關文章