背景

作為開發(fā)者，我們在不同的階段都與兩種服務(wù)器環(huán)境打交道——開發(fā)環(huán)境服務(wù)器和生產(chǎn)環(huán)境服務(wù)器。雖然聽起來名字相似，但它們的職責(zé)和工作方式簡直是天差地別！

不知道朋友們有沒有跟我一開始剛了解的時候的一些疑惑，因為剛開始我們并沒有實際在生產(chǎn)環(huán)境中的部署經(jīng)驗，只是一直在開發(fā)環(huán)境下練習(xí)如何開發(fā)項目，所以可能就會有一種疑惑，為什么通過 npm run dev 或者 pnpm dev 跑起來的服務(wù)器，不能直接在部署環(huán)境下直接啟動呢？我在開發(fā)環(huán)境下都用著好好的，直接在服務(wù)器（這里說的是服務(wù)器托管平臺租的服務(wù)器）中啟動不就完事了，為什么還要高處什么Nginx、Tomcat、Nodejs來啟動后端服務(wù)呢，搞那么麻煩。

哈哈哈哈，我不知道真的是我想太多了，還是也有朋友們跟我有一樣的困惑。接下來就讓我們了解一下兩者如何在開發(fā)過程中各顯神通吧，我保證我說完，你就能恍然大悟了。

一、開發(fā)環(huán)境服務(wù)器

在現(xiàn)代前端開發(fā)的世界里，構(gòu)建工具層出不窮，而 Vite 憑借其“快如閃電”的特性，迅速成為開發(fā)者們的寵兒，所以我們就以他為例來講解了。

1. 開發(fā)環(huán)境服務(wù)器是什么？

開發(fā)環(huán)境服務(wù)器的核心目標(biāo)是——讓開發(fā)變得快速、方便和靈活。

開發(fā)時，我們最需要的是效率，而非高超的性能。所以，開發(fā)環(huán)境服務(wù)器提供的服務(wù)更側(cè)重于實時調(diào)試和快速反饋。

你會發(fā)現(xiàn)，它就像一位無所不能的助手，時刻準(zhǔn)備好幫助你迭代和修復(fù)代碼。

2. 為什么Vite是如此惹人喜歡呢？

好像有點點偏題了，但是既然提到了他，就也介紹一下吧，不然不尊重它了。但是什么他是誰開發(fā)的，怎么開發(fā)的這些就不介紹了，主要講一下他的功能。

在開發(fā)環(huán)境下，Vite 的開發(fā)服務(wù)器扮演了靜態(tài)資源托管的角色。

具體來說：

靜態(tài)資源托管

• 當(dāng)你在瀏覽器中訪問 Vite 開發(fā)服務(wù)器（通常是 http://localhost:5173），它會響應(yīng)你的請求，提供靜態(tài)資源（如 HTML、CSS、JS 和圖片）。
• Vite 使用現(xiàn)代瀏覽器支持的原生 ESModules 來加載 JavaScript，直接通過 HTTP 請求獲取模塊并動態(tài)解析依賴。

快速熱更新（HMR）

• Vite 的開發(fā)服務(wù)器除了托管靜態(tài)資源，還提供熱更新功能（HMR）。
• 當(dāng)你修改代碼時，Vite 會實時推送更新到瀏覽器，而不需要刷新整個頁面。

3. 開發(fā)環(huán)境服務(wù)器的特點

• 代碼托管： 開發(fā)環(huán)境服務(wù)器只是把你的HTML、CSS、JS文件提供給瀏覽器渲染。它不涉及復(fù)雜的性能優(yōu)化，專注于讓你快速看到結(jié)果。
• 極速響應(yīng)： 只要你修改了一行代碼，Vite就像閃電一樣把修改結(jié)果呈現(xiàn)在瀏覽器里，不等待，不猶豫。
• 開發(fā)體驗： 你可以專注于功能和界面，像在草稿紙上一樣，不斷修改，快速預(yù)覽。

看到這里，我先是介紹了一下生成服務(wù)器的作用和功能，可能你會覺得，這些我都知道呀，網(wǎng)上到處都能看到的這些介紹。并不是賣關(guān)子哈，而是我還是想后面介紹完生成服務(wù)器之后一起來對比分析，他倆的差別

二、生產(chǎn)環(huán)境服務(wù)器：Nginx與Node.js，穩(wěn)重且強大

1. 什么是生產(chǎn)環(huán)境服務(wù)器？

與開發(fā)環(huán)境的輕快與靈活不同，生產(chǎn)環(huán)境服務(wù)器肩負著重任——它不僅需要高效穩(wěn)定，還得能應(yīng)對大量的用戶請求。

生產(chǎn)環(huán)境的目標(biāo)是提供穩(wěn)定、可靠、且高性能的服務(wù)，確保在流量高峰時網(wǎng)站不會“癱瘓”。

我們接下來介紹兩個常用的生產(chǎn)環(huán)境下的部署服務(wù)器

2. Nginx：高效的反向代理和靜態(tài)資源托管專家

Nginx 是一位經(jīng)驗豐富的服務(wù)器大師，它不僅能處理靜態(tài)資源，還能做負載均衡、反向代理、緩存等。它能讓你的網(wǎng)站在真實環(huán)境中“高枕無憂”，不怕流量洪水沖擊。

Nginx的幾大必殺技：

• 反向代理： 通過將請求轉(zhuǎn)發(fā)給后端服務(wù)器，Nginx可以減輕單一服務(wù)器的壓力。
• 負載均衡： 當(dāng)流量較大時，Nginx會自動將請求分配給多臺服務(wù)器，避免服務(wù)器“超載”。
• 靜態(tài)資源托管： 它能高效處理HTML、CSS、JS文件，確保頁面加載速度極快。
• 緩存機制： Nginx可以緩存靜態(tài)資源，提高請求的響應(yīng)速度。

對于開發(fā)者來說，使用Nginx就像給你的應(yīng)用加上了“護盾”，讓它能夠在面對高并發(fā)流量時依然穩(wěn)如泰山。

server {
    listen 80;
    server_name example.com;
    
    location / {
        root /path/to/your/build/directory;
        try_files $uri $uri/ /index.html;
    }
}

3. Node.js：高效處理后端邏輯和API請求

Node.js作為后端技術(shù)，專注于處理API請求和業(yè)務(wù)邏輯。它以非阻塞I/O和事件驅(qū)動架構(gòu)聞名，能夠在高并發(fā)的情況下保證性能。

生產(chǎn)環(huán)境中的Node.js，通常用來處理前端發(fā)送的請求，進行數(shù)據(jù)處理、權(quán)限驗證等。如果你希望你的應(yīng)用能夠快速響應(yīng)用戶的請求，Node.js無疑是一個強大的選擇。

// 使用Express.js處理API請求
const express = require('express');
const app = express();
?
app.get('/api/products', (req, res) => {
    res.json({ products: [] }); // 返回產(chǎn)品列表
});
?
app.listen(3000, () => {
    console.log('API server running on port 3000');
});

4. 生產(chǎn)環(huán)境服務(wù)器的特點

(1) 處理請求分發(fā)和靜態(tài)資源托管

• 靜態(tài)資源： 將 HTML、JS、CSS 等資源交給瀏覽器。
• API 請求： 將 API 請求轉(zhuǎn)發(fā)到后端邏輯處理器（如 Node.js）。

(2) 支持多種協(xié)議和優(yōu)化

比如 Nginx 可以：

• 支持 HTTPS 協(xié)議，提升安全性。
• 啟用緩存，減少服務(wù)器負載。
• 配置負載均衡，提高并發(fā)能力。

(3) 提高系統(tǒng)穩(wěn)定性

生產(chǎn)環(huán)境中，前端和后端職責(zé)明確，有利于分開優(yōu)化和維護。例如：

• 前端專注于用戶體驗（頁面展示、動態(tài)交互）。
• 后端專注于業(yè)務(wù)邏輯（數(shù)據(jù)處理、權(quán)限校驗）。

【生產(chǎn)服務(wù)器特點總結(jié)】

• 高可用性： 生產(chǎn)環(huán)境需要高可靠性，系統(tǒng)要能夠穩(wěn)定運行，不會宕機。
• 性能優(yōu)化： 壓縮、緩存、CDN等技術(shù)都可以幫助提升性能，確保用戶在訪問時獲得快速的響應(yīng)。
• 安全性： 使用HTTPS、權(quán)限控制、身份驗證等手段保護數(shù)據(jù)安全，防止惡意攻擊。
• 監(jiān)控和日志： 在生產(chǎn)環(huán)境中，監(jiān)控系統(tǒng)的運行情況并記錄詳細日志是必須的，便于問題的及時發(fā)現(xiàn)與修復(fù)。

三、開發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)別：一張表清晰對比

我們先總體上來總結(jié)對比一下：

四、回歸話題：為什么 Vite 不能直接用作生產(chǎn)服務(wù)器？

相信大家看完上面的內(nèi)容，應(yīng)該也是大體上有一定的理解了，其實很簡單。雖然 Vite 和 Nginx/Node.js 都叫“服務(wù)器”，但它們的職責(zé)和能力完全不同。

• Vite 是一個輕量級的開發(fā)工具，它的“服務(wù)器”能力僅限于靜態(tài)資源托管。
• Nginx/Node.js 是面向生產(chǎn)環(huán)境的通用服務(wù)器，就是它們又可以托管靜態(tài)資源，當(dāng)客戶端請求這個服務(wù)器下對應(yīng)的端口時，也可以返回響應(yīng)靜態(tài)資源，又可以處理多種類型的請求、實現(xiàn)復(fù)雜的后端邏輯。

1. Vite 和后端服務(wù)器到底有何不同？

可以把 Vite 和 Nginx/Node.js 的分工比作一個城市的快餐店和中央廚房：

Vite 是快餐店

• 快速出餐（預(yù)覽前端頁面）。
• 提供簡單的菜單（HTML、JS、CSS）。
• 不做復(fù)雜加工（不處理后端邏輯）。

Nginx/Node.js 是中央廚房

• 負責(zé)全城的配餐（處理 API 請求）。
• 儲備豐富的原材料（數(shù)據(jù)庫交互）。
• 考慮如何高效、衛(wèi)生、安全地運作（高并發(fā)處理、負載均衡、權(quán)限校驗）。

兩者的職責(zé)完全不同。你可以在開發(fā)時用快餐店（Vite）解決問題，但到了正式營業(yè)（生產(chǎn)環(huán)境），必須依靠中央廚房。即利用開發(fā)服務(wù)器的熱更新等特性，快速構(gòu)建和開發(fā)項目，然后生產(chǎn)環(huán)境下需要考慮到安全性、后端處理邏輯和性能等，只有生產(chǎn)服務(wù)器才有這些能力。

現(xiàn)在大家應(yīng)該完全理解為什么不能如我們所愿了吧，我們在開發(fā)學(xué)習(xí)或者練習(xí)過程后對開發(fā)環(huán)境服務(wù)器的配置和使用已經(jīng)很熟悉了，為什么不能直接在生產(chǎn)環(huán)境下也直接來一個 npm run dev 開啟一個服務(wù)器端口（比如 Vite 默認使用的 5173）呢？還要搞出一套 Node.js 和 Nginx 等另外一套操作。

【Vite：“哥，不是我不配合你的思維呀，是我的開發(fā)者沒給我賦予這些職責(zé)和能力呀，我的工作只是提供靜態(tài)資源和模塊熱更新，無法處理業(yè)務(wù)邏輯！??”】

2. 工具鏈的分工讓開發(fā)更高效

在現(xiàn)代前后端分離開發(fā)模式中，工具鏈的分工是優(yōu)化開發(fā)和生產(chǎn)的關(guān)鍵：

開發(fā)階段：使用 Vite 提供熱更新和靜態(tài)資源托管，讓開發(fā)者快速調(diào)試和測試頁面。

生產(chǎn)階段：

• 使用 Nginx 托管靜態(tài)資源，同時充當(dāng)反向代理，將 API 請求轉(zhuǎn)發(fā)到 Node.js。
• 使用 Node.js 處理后端業(yè)務(wù)邏輯，與數(shù)據(jù)庫交互。

兩者的分工明確，既提高了開發(fā)效率，也確保了生產(chǎn)環(huán)境的穩(wěn)定和安全

至此，我們通過分析兩種服務(wù)器的使用場景、功能支持與特點，解答了最初心里的小疑惑，其實就是各司其職嘛，還有就是，是 Vite 無法滿足我們在生產(chǎn)環(huán)境下的需求，所以我們也不能將他用于生產(chǎn)環(huán)境。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論