vue3項(xiàng)目上線配置 nginx代理

啥是Nginx代理

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

為啥要給Vue 3項(xiàng)目配置Nginx代理

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

配置步驟

1. 安裝Nginx

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

sudo apt-get update
sudo apt-get install nginx

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

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

npm run build

打包好后，會(huì)生成一個(gè)dist文件夾，里面裝的就是可以直接上線的項(xiàng)目文件。

3. 配置Nginx

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

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

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

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

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

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

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

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

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

    location /api {  # 這里是配置代理的關(guān)鍵部分。假設(shè)你的Vue 3項(xiàng)目要和后端接口通信，接口的URL都以`/api`開頭。
        proxy_pass http://backend-server-address;  # 這就像告訴門衛(wèi)大叔，如果外面的人要找以`/api`開頭的地方，就把他們帶到另一個(gè)小區(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;  # 這些配置是為了讓請(qǐng)求能更好地傳遞到后端服務(wù)器，就像給門衛(wèi)大叔一些傳遞信息的規(guī)則。
    }
}

4. 啟用配置文件

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

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

5. 檢查配置并重啟Nginx

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

sudo nginx -t

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

sudo systemctl restart nginx

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

Nginx 反向代理

什么是 Nginx 反向代理

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

為什么 Vue 3 項(xiàng)目需要 Nginx 反向代理

1. 解決跨域問題

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

2. 負(fù)載均衡

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

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

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

配置 Vue 3項(xiàng)目的 Nginx 反向代理步驟

1. 安裝 Nginx

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

sudo apt-get update
sudo apt-get install nginx

2. 打包 Vue 3 項(xiàng)目

在項(xiàng)目根目錄下，使用以下命令打包項(xiàng)目：

npm run build

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

3. 配置 Nginx

找到 Nginx 的配置文件，一般在 /etc/nginx/sites-available/ 目錄下，通常有一個(gè)默認(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

以下是一個(gè)示例配置：

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

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

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

    # 配置反向代理，將以 /api 開頭的請(qǐng)求轉(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 項(xiàng)目打包后的 dist 文件夾路徑。
• index：指定默認(rèn)的首頁(yè)文件。
• location /：用于處理前端路由。try_files 指令會(huì)先嘗試查找請(qǐng)求的文件或目錄，如果找不到則返回 index.html，這對(duì)于單頁(yè)面應(yīng)用（SPA）很重要，因?yàn)?SPA 的路由是在前端處理的。
• location /api：用于配置反向代理。proxy_pass 指定后端服務(wù)器的地址，其他的 proxy_* 指令是為了確保請(qǐng)求和響應(yīng)的正確傳遞。

4. 啟用配置文件

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

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

5. 檢查配置并重啟 Nginx

檢查 Nginx 配置是否有錯(cuò)誤：

sudo nginx -t

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

sudo systemctl restart nginx

驗(yàn)證配置

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

總結(jié)

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

最新評(píng)論