本文分享的是前端如何修改nginx配置來調(diào)試測(cè)試環(huán)境

Nginx（發(fā)音為 “engine X”）是一款高性能的 開源 Web 服務(wù)器，同時(shí)也可作為 反向代理服務(wù)器、負(fù)載均衡器、HTTP 緩存 和 郵件代理服務(wù)器。由于其輕量級(jí)、高并發(fā)處理能力和低資源消耗，Nginx 被廣泛用于現(xiàn)代互聯(lián)網(wǎng)架構(gòu)中，尤其適合高流量網(wǎng)站和分布式系統(tǒng)。

Nginx 的主要作用

Web 服務(wù)器（靜態(tài)資源服務(wù)）

Nginx 最初設(shè)計(jì)用于高效處理靜態(tài)文件（如 HTML、CSS、JS、圖片等），相比傳統(tǒng)服務(wù)器（如 Apache）：

典型應(yīng)用：

• 更低的資源消耗：采用事件驅(qū)動(dòng)（Event-Driven）架構(gòu)，單線程可處理數(shù)千并發(fā)連接。
• 更快的響應(yīng)速度：優(yōu)化了靜態(tài)文件的傳輸效率，適合 CDN 和內(nèi)容分發(fā)。
• 托管靜態(tài)網(wǎng)站（如博客、官網(wǎng)）。
• 作為前端資源服務(wù)器（配合 React/Vue 等 SPA 應(yīng)用）。

反向代理（Reverse Proxy）

Nginx 可以作為反向代理，接收客戶端請(qǐng)求并轉(zhuǎn)發(fā)給后端服務(wù)器（如 Tomcat、Node.js、PHP-FPM），再返回響應(yīng)給用戶。
核心優(yōu)勢(shì)：

典型配置：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend_server;  # 轉(zhuǎn)發(fā)到后端
        proxy_set_header Host $host;
    }
}

• 隱藏后端服務(wù)器：保護(hù)真實(shí)服務(wù)器 IP，提升安全性。
• 負(fù)載均衡：將流量分發(fā)到多個(gè)后端服務(wù)器（見下文）。
• 緩存加速：緩存動(dòng)態(tài)內(nèi)容，減少后端壓力。

負(fù)載均衡（Load Balancing）

Nginx 可以將流量均勻分配到多個(gè)后端服務(wù)器，提高系統(tǒng)的可用性和擴(kuò)展性。
支持的均衡策略：

典型配置：

upstream backend {
    server 192.168.1.1 weight=3;  # 權(quán)重 3
    server 192.168.1.2;
    server 192.168.1.3 backup;    # 備用服務(wù)器
}

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

• 輪詢（Round Robin）：默認(rèn)方式，按順序分配請(qǐng)求。
• 加權(quán)輪詢（Weighted Round Robin）：給性能更強(qiáng)的服務(wù)器更多流量。
• IP 哈希（IP Hash）：同一用戶始終訪問同一服務(wù)器（適合 Session 保持）。
• 最少連接（Least Connections）：優(yōu)先分配給當(dāng)前連接數(shù)最少的服務(wù)器。

HTTP 緩存（加速動(dòng)態(tài)內(nèi)容）

Nginx 可以緩存后端動(dòng)態(tài)生成的頁面（如 API 響應(yīng)），減少重復(fù)計(jì)算和數(shù)據(jù)庫(kù)查詢。
適用場(chǎng)景：

典型配置：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;

server {
    location / {
        proxy_cache my_cache;
        proxy_pass http://backend;
        proxy_cache_valid 200 302 10m;  # 緩存 200/302 響應(yīng) 10 分鐘
    }
}

• 高并發(fā)讀多寫少的場(chǎng)景（如新聞網(wǎng)站、商品詳情頁）。
• 緩解后端服務(wù)器壓力。

SSL/TLS 終止（HTTPS 加速）

Nginx 可以處理 HTTPS 加密/解密，減輕后端服務(wù)器的計(jì)算負(fù)擔(dān)：

典型配置：

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

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

• 統(tǒng)一管理證書（如 Let’s Encrypt）。
• 支持 HTTP/2，提升頁面加載速度。

動(dòng)靜分離

將動(dòng)態(tài)請(qǐng)求（如 API）和靜態(tài)資源（如圖片、CSS）分開處理：

典型配置：

server {
    location /static/ {
        alias /var/www/static/;  # 直接返回靜態(tài)文件
    }

    location /api/ {
        proxy_pass http://backend;  # 轉(zhuǎn)發(fā) API 請(qǐng)求
    }
}

• 靜態(tài)資源由 Nginx 直接返回，動(dòng)態(tài)請(qǐng)求轉(zhuǎn)發(fā)給后端（如 Java/Python）。

其他用途

• 郵件代理（IMAP/POP3/SMTP）。
• WebSocket 代理（支持實(shí)時(shí)通信應(yīng)用）。
• 訪問控制（IP 黑白名單、限速）。

如何在VSCode中修改Nginx配置，步驟如下：

找到 Nginx 配置文件

Nginx 的配置文件通常位于：

如何快速定位 Nginx 配置文件？

• Linux/macOS：/etc/nginx/nginx.conf（主配置）或 /etc/nginx/conf.d/（子配置）
• Windows：C:\nginx\conf\nginx.conf（默認(rèn)安裝路徑）

• 在終端運(yùn)行：

  nginx -t
  

  它會(huì)顯示 Nginx 加載的配置文件路徑，例如：

  nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /etc/nginx/nginx.conf test is successful
  

在 VSCode 中打開 Nginx 配置文件

使用 VSCode 遠(yuǎn)程開發(fā)（推薦）：

• 如果 Nginx 運(yùn)行在遠(yuǎn)程服務(wù)器（如 Linux），可以：

  1. 安裝 Remote - SSH 插件。

     vscode通過ctrl + shift + x打開右側(cè)的擴(kuò)展，輸入Remote - SSH進(jìn)行安裝。安裝完成后要重啟vscode。安裝成功后，右側(cè)會(huì)有一個(gè)類似電腦的圖標(biāo)。

     

  2. 點(diǎn)擊電腦圖標(biāo)，如下圖所示

     

  3. 點(diǎn)擊配置（齒輪）圖標(biāo)，添加服務(wù)

     

  4. 在打開的config文件中，輸入目標(biāo)服務(wù)的配置信息

     

  5. 配置完成后，就可以在SSH文件夾下看到31服務(wù)器和45服務(wù)器，選擇其中的一個(gè)服務(wù)，在新窗口建立連接，選擇Linus，輸入密碼后，選擇打開文件夾，在輸入框輸入想要訪問的文件夾即可。例如：打開etc文件夾

     

  6. 打開后，找到nginx文件夾，打開nginx.conf文件，此文件中就是對(duì)應(yīng)項(xiàng)目的nginx配置信息。

     

  7. 完成配置修改后，執(zhí)行的指令如下：

     1. 檢查配置文件是否有語法錯(cuò)誤： 在重新加載 Nginx 配置之前，最好檢查配置文件是否有語法錯(cuò)誤。使用以下命令來檢查：

        sudo nginx -t
        

        如果一切正常，會(huì)顯示類似以下的消息：

        Copy Codenginx: configuration file /etc/nginx/nginx.conf test is successful
        

     2. 重新加載 Nginx 配置： 如果配置文件語法沒有問題，可以使用以下命令來重新加載 Nginx 配置：

        sudo systemctl reload nginx
        

        或者使用：

        sudo nginx -s reload
        

        這樣，Nginx 會(huì)應(yīng)用對(duì) nginx.conf 文件所做的修改，而無需重啟整個(gè) Nginx 服務(wù)。

修改 Nginx 配置

Nginx 配置采用 模塊化結(jié)構(gòu)，常見修改場(chǎng)景：

（1）配置靜態(tài)網(wǎng)站

server {
    listen 80;                      # 監(jiān)聽 80 端口（HTTP）
    server_name example.com;        # 域名

    location / {
        root /var/www/html;         # 網(wǎng)站根目錄
        index index.html;           # 默認(rèn)首頁
    }
}

（2）配置反向代理（如轉(zhuǎn)發(fā)到 Node.js/React/Vue）

server {
    listen 80;
    server_name api.example.com;

    location / {
        proxy_pass http://localhost:3000;  # 轉(zhuǎn)發(fā)到本地的 Node.js 服務(wù)
        proxy_set_header Host $host;
    }
}

（3）配置 HTTPS（SSL 證書）

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/ssl/certs/example.com.crt;     # 證書路徑
    ssl_certificate_key /etc/ssl/private/example.com.key;

    location / {
        root /var/www/html;
        index index.html;
    }
}

（4）配置負(fù)載均衡

upstream backend {
    server 192.168.1.1:3000;  # 后端服務(wù)器 1
    server 192.168.1.2:3000;  # 后端服務(wù)器 2
}

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend;  # 請(qǐng)求轉(zhuǎn)發(fā)到 upstream
        try_files $uri $uri/ /index.html; # 用于智能匹配請(qǐng)求資源的重要規(guī)則
    }
}

總結(jié) 

到此這篇關(guān)于前端如何修改nginx配置的文章就介紹到這了,更多相關(guān)前端修改nginx配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！