vue3項目上線配置 nginx代理

啥是Nginx代理

你可以把Nginx想象成一個小區(qū)的門衛(wèi)大叔。小區(qū)里有好多戶人家（就像服務(wù)器上的不同服務(wù)），外面的人（用戶）想要進來找某戶人家（訪問某個服務(wù)），都得先跟門衛(wèi)大叔說。門衛(wèi)大叔呢，就會根據(jù)外面人的需求，把他們帶到對應(yīng)的人家去。這就是Nginx代理干的事兒，它能把用戶的請求轉(zhuǎn)發(fā)到對應(yīng)的服務(wù)上。

為啥要給Vue 3項目配置Nginx代理

Vue 3項目上線后，有時候會遇到一些問題，比如跨域問題。就好比小區(qū)里的人家規(guī)定，只能讓小區(qū)內(nèi)部的人互相串門，外面的人不能直接進來找某戶人家。但是用戶可能是在不同的地方（不同域名）訪問你的項目，這就像外面的人想進小區(qū)找人，直接進不來。這時候Nginx代理就可以幫個忙，它就像門衛(wèi)大叔有特殊權(quán)限，能把外面人的請求接收過來，然后以小區(qū)內(nèi)部人的身份去找到對應(yīng)的人家，再把結(jié)果拿給外面的人，這樣就解決了跨域問題。

配置步驟

1. 安裝Nginx

首先得把Nginx這個“門衛(wèi)大叔”請到你的服務(wù)器上。不同的服務(wù)器系統(tǒng)安裝方法不太一樣，咱們以常見的Ubuntu系統(tǒng)為例。你在服務(wù)器的命令行里輸入下面這個命令，就像給“快遞員”（服務(wù)器軟件源）下訂單，讓它把Nginx送到你的服務(wù)器上：

sudo apt-get update
sudo apt-get install nginx

2. 準(zhǔn)備Vue 3項目文件

在配置Nginx之前，得先把你的Vue 3項目打包好。就像你要把家里的東西整理好，準(zhǔn)備迎接客人一樣。在你的項目目錄下，打開命令行，輸入下面的命令來打包項目：

npm run build

打包好后，會生成一個dist文件夾，里面裝的就是可以直接上線的項目文件。

3. 配置Nginx

找到Nginx的配置文件，一般在/etc/nginx/sites-available/目錄下，里面有個默認(rèn)的配置文件。你可以復(fù)制一份出來，然后修改這個復(fù)制的文件，比如命名為your_project.conf。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/your_project.conf

接著，用文本編輯器打開這個新的配置文件：

sudo nano /etc/nginx/sites-available/your_project.conf

在文件里寫上下面這些配置內(nèi)容，我來一句一句給你解釋：

server {
    listen 80;  # 這就好比門衛(wèi)大叔在小區(qū)門口的80號崗?fù)ぶ蛋?，監(jiān)聽著外面人的請求。這里的80是端口號，一般HTTP請求默認(rèn)就是用80端口。
    server_name yourdomain.com;  # 這是你的域名，就像小區(qū)的名字。當(dāng)外面的人說要找這個小區(qū)時，門衛(wèi)大叔就知道是這里了。如果你還沒有域名，也可以寫服務(wù)器的IP地址。

    root /path/to/your/vue3-project/dist;  # 這是你的Vue 3項目打包后的`dist`文件夾的路徑，就像告訴門衛(wèi)大叔小區(qū)里哪棟樓是你家。

    index index.html;  # 這是默認(rèn)的首頁文件，當(dāng)外面的人進來小區(qū)后，默認(rèn)先帶你去這個文件對應(yīng)的頁面，就像先帶你去小區(qū)的接待處。

    location / {
        try_files $uri $uri/ /index.html;  # 這是個很重要的配置。當(dāng)外面的人說要找某個具體的地方（請求某個URL）時，門衛(wèi)大叔先看看小區(qū)里有沒有這個地方（服務(wù)器上有沒有對應(yīng)的文件）。如果有，就帶他去；如果沒有，就把他帶到接待處（返回`index.html`頁面）。這在單頁面應(yīng)用里很有用，因為單頁面應(yīng)用的URL變化其實很多時候只是前端路由在變，頁面還是同一個。
    }

    location /api {  # 這里是配置代理的關(guān)鍵部分。假設(shè)你的Vue 3項目要和后端接口通信，接口的URL都以`/api`開頭。
        proxy_pass http://backend-server-address;  # 這就像告訴門衛(wèi)大叔，如果外面的人要找以`/api`開頭的地方，就把他們帶到另一個小區(qū)（后端服務(wù)器）去，`http://backend-server-address`是后端服務(wù)器的地址。
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;  # 這些配置是為了讓請求能更好地傳遞到后端服務(wù)器，就像給門衛(wèi)大叔一些傳遞信息的規(guī)則。
    }
}

4. 啟用配置文件

配置文件寫好后，還得讓Nginx知道要用這個配置。你要在/etc/nginx/sites-enabled/目錄下創(chuàng)建一個軟鏈接，指向剛才寫好的配置文件。

sudo ln -s /etc/nginx/sites-available/your_project.conf /etc/nginx/sites-enabled/

5. 檢查配置并重啟Nginx

在讓“門衛(wèi)大叔”正式上崗之前，得檢查一下他的工作安排對不對。你可以用下面的命令檢查Nginx配置是否有錯誤：

sudo nginx -t

如果顯示配置沒問題，就可以重啟Nginx，讓新的配置生效：

sudo systemctl restart nginx

這樣，Nginx代理就配置好啦。用戶訪問你的Vue 3項目時，Nginx就會按照你設(shè)置的規(guī)則，把請求處理得妥妥當(dāng)當(dāng)，還能解決跨域這些問題。

Nginx 反向代理

什么是 Nginx 反向代理

Nginx 反向代理就像是一個“中間人”。想象一下，有很多人（客戶端）想要訪問一個大型商場（服務(wù)器）里的不同店鋪（應(yīng)用服務(wù)），但商場為了管理方便，只開了一個大門，所有人都得從這個大門進出。Nginx 就扮演了這個大門的角色，客戶端的請求先到達(dá) Nginx，然后 Nginx 根據(jù)一定的規(guī)則把請求轉(zhuǎn)發(fā)到商場里對應(yīng)的店鋪，最后再把店鋪的響應(yīng)返回給客戶端。在 Vue 3 項目里，Nginx 反向代理可以幫我們解決跨域問題、實現(xiàn)負(fù)載均衡等。

為什么 Vue 3 項目需要 Nginx 反向代理

1. 解決跨域問題

在開發(fā) Vue 3 項目時，前端代碼運行在一個域名和端口下（比如 http://localhost:8080），而后端接口可能運行在另一個域名和端口下（比如 http://api.example.com:3000）。瀏覽器出于安全考慮，會有同源策略的限制，不允許直接跨域訪問。通過 Nginx 反向代理，我們可以把前端的請求轉(zhuǎn)發(fā)到后端接口，這樣在瀏覽器看來，請求都是在同一個域名下進行的，就避免了跨域問題。

2. 負(fù)載均衡

如果項目訪問量很大，一臺服務(wù)器可能無法承受所有的請求。Nginx 可以把客戶端的請求均勻地分配到多個后端服務(wù)器上，就像把一群人合理地分配到商場里的不同入口，讓每個服務(wù)器都分擔(dān)一部分壓力，提高系統(tǒng)的并發(fā)處理能力和可用性。

3. 靜態(tài)資源處理

Nginx 可以高效地處理靜態(tài)資源（如圖片、CSS、JavaScript 文件等）的請求。它可以緩存這些資源，減少后端服務(wù)器的負(fù)擔(dān)，提高頁面的加載速度。

配置 Vue 3項目的 Nginx 反向代理步驟

1. 安裝 Nginx

不同的操作系統(tǒng)安裝 Nginx 的方法不同，以 Ubuntu 系統(tǒng)為例，在終端中執(zhí)行以下命令：

sudo apt-get update
sudo apt-get install nginx

2. 打包 Vue 3 項目

在項目根目錄下，使用以下命令打包項目：

npm run build

打包完成后，會生成一個 dist 文件夾，里面包含了可以部署的靜態(tài)文件。

3. 配置 Nginx

找到 Nginx 的配置文件，一般在 /etc/nginx/sites-available/ 目錄下，通常有一個默認(rèn)的配置文件 default，我們可以復(fù)制一份并修改，或者直接在 default 文件上修改。

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/vue3_project

使用文本編輯器（如 nano 或 vim）打開配置文件：

sudo nano /etc/nginx/sites-available/vue3_project

以下是一個示例配置：

server {
    listen 80;  # 監(jiān)聽的端口，一般 HTTP 請求使用 80 端口
    server_name yourdomain.com;  # 你的域名，如果沒有域名，可以使用服務(wù)器的 IP 地址

    # 配置靜態(tài)資源目錄，指向 Vue 3 項目的 dist 文件夾
    root /path/to/your/vue3_project/dist;
    index index.html;

    # 處理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 配置反向代理，將以 /api 開頭的請求轉(zhuǎn)發(fā)到后端服務(wù)器
    location /api {
        proxy_pass http://backend_server_address;  # 后端服務(wù)器的地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

• listen：指定 Nginx 監(jiān)聽的端口。
• server_name：指定域名或 IP 地址。
• root：指定靜態(tài)資源的根目錄，即 Vue 3 項目打包后的 dist 文件夾路徑。
• index：指定默認(rèn)的首頁文件。
• location /：用于處理前端路由。try_files 指令會先嘗試查找請求的文件或目錄，如果找不到則返回 index.html，這對于單頁面應(yīng)用（SPA）很重要，因為 SPA 的路由是在前端處理的。
• location /api：用于配置反向代理。proxy_pass 指定后端服務(wù)器的地址，其他的 proxy_* 指令是為了確保請求和響應(yīng)的正確傳遞。

4. 啟用配置文件

創(chuàng)建一個軟鏈接，將配置文件鏈接到 /etc/nginx/sites-enabled/ 目錄下：

sudo ln -s /etc/nginx/sites-available/vue3_project /etc/nginx/sites-enabled/

5. 檢查配置并重啟 Nginx

檢查 Nginx 配置是否有錯誤：

sudo nginx -t

如果沒有錯誤，重啟 Nginx 使配置生效：

sudo systemctl restart nginx

驗證配置

在瀏覽器中輸入你的域名或服務(wù)器 IP 地址，如果能正常訪問 Vue 3 項目，并且前端與后端的交互也正常，說明 Nginx 反向代理配置成功。

總結(jié)

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

最新評論