記錄--nginx（前端必會-專案部署-精簡通用篇）

林恒發表於2024-11-14
Nginx前端

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

前言

最近在公司部署專案時遇上了一點關於nginx的問題，於是就想著寫一篇關於nginx的文章...

主要給小白朋友分享，nginx是什麼，nginx有什麼用，最後到nginx的實際應用，專案部署。

nginx

公司專案剛剛上線，使用者量少訪問量不大，併發量低，一個jar包啟動應用就能夠解決問題了。但是隨著專案的不斷擴大，使用者體量大增加，一臺伺服器可能就無法滿足我們的需求了（當初是一個人用一個伺服器，現在是多人用一個伺服器，時間長了伺服器都要紅溫）。

於是乎，我們就會想著增加伺服器，那麼我們多個專案就啟動在多個伺服器上面，使用者需要訪問，就需要做一個代理伺服器，透過代理請求伺服器來做前後端之間的轉發和請求包括跨域等等問題。

那麼到這就不得不說一下nginx的反向代理了，正向代理指的其實就是比如我們透過VPN去請求xxx，這裡就是因為用到了其他地方的代理伺服器，這是一個從客戶端到服務端的過程，然而反向代理其實就是，因為我們有多個伺服器，最後都對映到了代理伺服器身上，客戶端最終訪問的都是例如：baidu.com，但是事實上他底下是有多臺伺服器的。

既然他有多臺伺服器，每臺伺服器的效能，各種條件都是不同的，這裡就要說到nginx的另一個能力---負載均衡，可以給不同的伺服器增加不同的權重，能力更強的伺服器可以增大他的負荷，減輕其他伺服器的負荷

這就是大家常說的nginx:Nginx 是一個高效能的 HTTP 和反向代理伺服器，它還支援 IMAP/POP3/SMTP 代理伺服器。

nginx的特點：

  1. 高效能：

    • 高併發連線處理能力：Nginx 使用非同步事件驅動模型（如 epoll, kqueue 等），能夠高效地處理大量併發連線。
    • 低資源消耗：與 Apache 相比，Nginx 在相同硬體環境下通常消耗更少的記憶體和其他系統資源。

  2. 穩定性：

    • 執行穩定：在高負載情況下依然保持穩定執行，崩潰或錯誤的發生率較低。
    • 平滑升級：可以在不停止服務的情況下進行升級或配置更改。

  3. 豐富的功能集：

    • 反向代理：可以作為反向代理伺服器，將請求轉發到後端伺服器。
    • URL 重寫：透過簡單的配置即可實現複雜的 URL 重寫規則。
    • 動態內容與靜態內容分離：可以配置為只處理靜態檔案請求，而動態請求則交給後端應用伺服器處理。

  4. 高度可配置性：

    • 靈活的配置選項：可以根據需要定製各種配置選項，以適應不同的應用場景。
    • 容易管理：配置檔案結構清晰，易於理解和修改。

  5. 負載均衡：

    • 支援多種負載均衡演算法，例如輪詢、加權輪詢、最少連線數等，可以幫助分散到多個後端伺服器的流量。

  6. 快取功能：

    • 可用作HTTP快取伺服器，減少對後端資料庫或應用伺服器的壓力。

  7. 安全性：

    • 提供 SSL/TLS 加密支援，保障資料傳輸安全。
    • 可以設定訪問控制、防火牆規則等來增強安全性。

  8. 模組化架構：

    • 支援第三方模組擴充套件功能，比如 Nginx+Lua 使得開發者可以在 Nginx 中直接使用 Lua 指令碼語言編寫外掛或處理邏輯。

  9. 日誌與監控：

    • 詳細的訪問和錯誤日誌記錄，便於故障排查和效能分析。
    • 支援實時監控和統計，方便管理員瞭解當前系統的狀態。

nginx下載

nginx.org/ 大家自行下載，我下載的是一個穩定版本，以防萬一。下載完畢之後大家自行解壓即可（預設大家是windows系統），解壓完畢之後，可以看到nginx.exe就是我們的啟動檔案，conf就是配置檔案，nginx.config中可以看到server的listen監聽埠為80，這意味著當我們訪問了80埠就會被nginx攔截，首先啟動nginx，可以直接雙擊nginx.exe也可以透過cmd命令列直接輸入nginx.exe執行（推薦，因為這樣不會關閉視窗，雙擊的話就是一閃而過了）

接下來我們瀏覽器訪問localhost:80

啟動成功。

nginx常用命令

停止：nginx.exe -s stop 安全退出：nginx.exe -s quit 重新載入配置檔案：nginx.exe -s reload（常用）例如我們更改了埠 檢視nginx程序：ps aux|grep nginx

實際應用

下載完畢後開啟可以看到：

於是我們建立aa、bb兩個資料夾，我們將index.html 分別放入aa和bb，這兩個頁面都打上自己的標記aa/bb

然後我們對nginx進行配置 nginx.conf

server {
       listen       8001;
       server_name  localhost;

       location / {
           root   html/aa;
           index  index.html index.htm;
       }
    }

    server {
       listen       8002;
       server_name  localhost;

       location / {
           root   html/bb;
           index  index.html index.htm;
       }
    }
如果沒結束，記得reload
nginx.exe -s reload

接下來我們放一個專案進去，打包後放入html中

修改配置檔案，然後reload

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist;
            index  index.html index.htm;
        }

　　

然後我們訪問localhost，埠預設是80所以不用寫，如果失敗，可能是reload失敗，再次reload就可

其他配置問題

Nginx的主配置檔案(conf/nginx.conf)按以下結構組織：

  • 全域性塊 與Nginx執行相關的全域性設定
  • events 與網路連線有關的設定
  • http 代理、快取、日誌、虛擬主機等的配置
  • server 虛擬主機的引數設定（一個http塊可包含多個server塊）
  • location 定義請求路由及頁面處理方式

前端開發中經常會遇到跨域問題，nginx可以做代理輕鬆解決，事實上原理和cors一樣，設定請求頭

server {
    location /api {
        proxy_pass http://backend_server;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept';
    }
}

快取問題：
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;

server {
    location / {
        proxy_cache my_cache;
        proxy_pass http://backend;
        add_header X-Cache-Status $upstream_cache_status;
    }
}
https提升安全性
server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    location / {
        proxy_pass http://backend_server;
    }
}

　　

一個比較全面的配置
# 全域性段配置
# ------------------------------

# 指定執行nginx的使用者或使用者組，預設為nobody。
#user administrator administrators;

# 設定工作程序數，通常設定為等於CPU核心數。
#worker_processes 2;

# 指定nginx程序的PID檔案存放位置。
#pid /nginx/pid/nginx.pid;

# 指定錯誤日誌的存放路徑和日誌級別。
error_log log/error.log debug;

# events段配置資訊
# ------------------------------
events {
    # 設定網路連線序列化，用於防止多個程序同時接受到新連線的情況，這種情況稱為"驚群"。
    accept_mutex on;

    # 設定一個程序是否可以同時接受多個新連線。
    multi_accept on;

    # 設定工作程序的最大連線數。
    worker_connections  1024;
}

# http配置段，用於配置HTTP伺服器的引數。
# ------------------------------
http {
    # 包含副檔名與MIME型別的對映。
    include       mime.types;

    # 設定預設的MIME型別。
    default_type  application/octet-stream;

    # 定義日誌格式。
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for';

    # 指定訪問日誌的存放路徑和使用的格式。
    access_log log/access.log myFormat;

    # 允許使用sendfile方式傳輸檔案。
    sendfile on;

    # 限制每次呼叫sendfile傳輸的資料量。
    sendfile_max_chunk 100k;

    # 設定連線的保持時間。
    keepalive_timeout 65;

    # 定義一個上游伺服器組。
    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  #此伺服器為備份伺服器。
    }

    # 定義錯誤頁面的重定向地址。
    error_page 404 https://www.baidu.com;

    # 定義一個虛擬主機。
    server {
        # 設定單個連線上的最大請求次數。
        keepalive_requests 120;

        # 設定監聽的埠和地址。
        listen       4545;
        server_name  127.0.0.1;

        # 定義location塊，用於匹配特定的請求URI。
        location  ~*^.+$ {
           # 設定請求的根目錄。
           #root path;

           # 設定預設頁面。
           #index vv.txt;

           # 將請求轉發到上游伺服器組。
           proxy_pass  http://mysvr;

           # 定義訪問控制規則。
           deny 127.0.0.1;
           allow 172.18.5.54;          
        } 
    }
}

　　

如果有不明白的地方，遇到問題可以透過ai去迅速瞭解，在ai時代，我們的學習成本也大大下降了。

本文轉載於：https://juejin.cn/post/7424168473423020066

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

記錄--nginx（前端必會-專案部署-精簡通用篇）

相關文章