快捷導(dǎo)航

Nginx部署前端vue項(xiàng)目的全部步驟記錄

更新時(shí)間：2024年09月10日 09:18:28 作者：衍生星球

本文講解了如何在Linux環(huán)境中部署Vue項(xiàng)目,包括安裝依賴、編譯項(xiàng)目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測試和備份的重要性,需要的朋友可以參考下

1. 項(xiàng)目打包

1.1 安裝依賴

在項(xiàng)目部署之前，確保開發(fā)環(huán)境中已安裝Node.js和npm，這是運(yùn)行Vue項(xiàng)目的基礎(chǔ)。通過執(zhí)行npm install命令，可以安裝項(xiàng)目所需的所有依賴。這一步是打包流程的前提，確保了后續(xù)編譯的順利進(jìn)行。

根據(jù)npm的官方數(shù)據(jù)，npm install命令在安裝依賴時(shí)，會(huì)根據(jù)package.json文件中列出的依賴項(xiàng)進(jìn)行下載和安裝，這個(gè)過程通常需要聯(lián)網(wǎng)操作，并且依賴于npm倉庫的響應(yīng)速度。在網(wǎng)絡(luò)狀況良好的情況下，安裝過程可以順利完成。

1.2 編譯項(xiàng)目

項(xiàng)目依賴安裝完成后，接下來需要編譯Vue項(xiàng)目。編譯過程是通過執(zhí)行npm run build命令來完成的，該命令會(huì)觸發(fā)Vue CLI中的構(gòu)建腳本，將源代碼轉(zhuǎn)換為瀏覽器可以理解的靜態(tài)資源。

編譯過程中，Webpack作為模塊打包器，會(huì)根據(jù)配置文件vue.config.js中的規(guī)則，對(duì)項(xiàng)目中的JavaScript、CSS、圖片等資源進(jìn)行打包和優(yōu)化。這個(gè)過程包括代碼的壓縮、合并、分割等多個(gè)步驟，以確保最終生成的靜態(tài)資源既高效又輕量。

根據(jù)Vue CLI的官方文檔，編譯后的資源會(huì)被放置在項(xiàng)目根目錄下的dist文件夾中。這個(gè)文件夾包含了所有用于生產(chǎn)環(huán)境的靜態(tài)文件，如HTML、CSS、JavaScript等。這些文件是部署到Nginx服務(wù)器上的核心內(nèi)容。

在編譯過程中，還可以通過添加環(huán)境變量來指定不同的構(gòu)建環(huán)境，例如開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。這樣可以確保在不同環(huán)境下構(gòu)建的資源具有相應(yīng)的優(yōu)化和配置。

2. 安裝Nginx

2.1 Ubuntu/Debian系統(tǒng)

在Ubuntu或Debian系統(tǒng)上安裝Nginx通常涉及以下步驟，這些步驟可以確保用戶能夠快速且正確地安裝Nginx服務(wù)器。

軟件更新：首先，執(zhí)行sudo apt-get update命令來更新本地軟件包索引。這一步是必要的，因?yàn)樗_保了在安裝過程中能夠獲取到最新的軟件包版本。
安裝Nginx：通過執(zhí)行sudo apt-get install nginx命令來安裝Nginx。這個(gè)過程會(huì)自動(dòng)處理依賴關(guān)系，并安裝Nginx及其所需的所有組件。
啟動(dòng)服務(wù)：安裝完成后，使用sudo systemctl start nginx命令啟動(dòng)Nginx服務(wù)。這是確保Nginx能夠正常工作的第一步。
驗(yàn)證安裝：為了驗(yàn)證Nginx是否正確安裝和運(yùn)行，可以通過訪問http://localhost或服務(wù)器的IP地址來查看Nginx的歡迎頁面。如果頁面加載成功，說明Nginx已經(jīng)成功運(yùn)行。

2.2 CentOS/RHEL系統(tǒng)

在CentOS或RHEL系統(tǒng)上安裝Nginx的過程與Ubuntu/Debian略有不同，主要體現(xiàn)在軟件包管理器的使用上。

軟件更新：首先，執(zhí)行sudo yum update命令來更新系統(tǒng)上的軟件包。這一步確保了系統(tǒng)上的軟件包列表是最新的。
安裝Nginx：通過執(zhí)行sudo yum install nginx命令來安裝Nginx。這個(gè)命令會(huì)處理所有的依賴關(guān)系，并安裝Nginx服務(wù)器。
啟動(dòng)服務(wù)：使用sudo systemctl start nginx命令來啟動(dòng)Nginx服務(wù)。這一步是確保Nginx能夠響應(yīng)網(wǎng)絡(luò)請(qǐng)求的關(guān)鍵。
驗(yàn)證安裝：與Ubuntu/Debian系統(tǒng)一樣，可以通過訪問http://localhost或服務(wù)器的IP地址來檢查Nginx的歡迎頁面。如果頁面能夠成功加載，這表明Nginx已經(jīng)正確安裝并運(yùn)行。

在兩種系統(tǒng)中，安裝Nginx的過程都相對(duì)簡單，主要區(qū)別在于使用的軟件包管理器不同。無論是在Ubuntu/Debian還是CentOS/RHEL系統(tǒng)上，用戶都可以遵循上述步驟來安裝和驗(yàn)證Nginx服務(wù)器。

3. 配置Nginx

3.1 創(chuàng)建Nginx配置文件

創(chuàng)建Nginx配置文件是部署Vue項(xiàng)目的關(guān)鍵步驟之一。以下是一個(gè)基本的配置文件示例，它定義了服務(wù)器如何響應(yīng)對(duì)Vue應(yīng)用的請(qǐng)求。

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/my-vue-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {
        expires max;
        log_not_found off;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

在這個(gè)配置中，listen 80; 表示服務(wù)器監(jiān)聽80端口，server_name your_domain_or_ip; 應(yīng)替換為你的域名或IP地址。root /var/www/my-vue-app/dist; 指定了Vue項(xiàng)目打包后的靜態(tài)文件存放位置。location / 塊中的 try_files 指令確保了Vue的前端路由能夠正確工作，即使在刷新或直接訪問非根路徑時(shí)。

3.2 啟用配置文件

啟用配置文件通常涉及兩個(gè)步驟：創(chuàng)建配置文件的符號(hào)鏈接，然后重新加載Nginx配置。

sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

首先，使用 ln -s 創(chuàng)建一個(gè)符號(hào)鏈接，將你的配置文件鏈接到 sites-enabled 目錄。接著，使用 nginx -t 測試配置文件是否有語法錯(cuò)誤。如果沒有錯(cuò)誤，使用 systemctl restart nginx 命令重啟Nginx服務(wù)以應(yīng)用新的配置。

3.3 測試并重啟Nginx

在應(yīng)用了新的Nginx配置之后，需要進(jìn)行測試以確保一切正常工作。這包括訪問Vue應(yīng)用的主頁，以及嘗試訪問應(yīng)用中的各個(gè)路由，確保它們都能正確加載。

訪問應(yīng)用：在瀏覽器中輸入 http://your_domain_or_ip，檢查Vue應(yīng)用是否能夠正確加載。
檢查路由：嘗試訪問應(yīng)用的不同路由，確保前端路由跳轉(zhuǎn)能夠正常工作。
查看日志：如果遇到問題，查看Nginx的錯(cuò)誤日志可以提供有用的信息。日志文件通常位于 /var/log/nginx/error.log。

如果一切正常，你的Vue應(yīng)用現(xiàn)在應(yīng)該已經(jīng)成功部署在Nginx服務(wù)器上了。如果遇到問題，仔細(xì)檢查配置文件中的指令，確保沒有遺漏或錯(cuò)誤。

4. 部署Vue項(xiàng)目

4.1 將打包文件上傳到服務(wù)器

將Vue項(xiàng)目打包后生成的dist目錄上傳至服務(wù)器是部署過程中的關(guān)鍵步驟。根據(jù)服務(wù)器的操作系統(tǒng)和配置，可以使用多種方法進(jìn)行上傳。

使用scp或sftp：這些是Linux系統(tǒng)常用的文件傳輸協(xié)議，可以安全地將文件從本地傳輸?shù)竭h(yuǎn)程服務(wù)器。例如，使用scp -r dist/ username@server_ip:/path/to/remote/命令。
使用rsync：該工具可以同步文件和目錄，并且可以保留文件的權(quán)限和時(shí)間戳，適合于增量備份和鏡像。命令示例：rsync -avz --progress dist/ username@server_ip:/path/to/remote/.
使用FTP客戶端：如FileZilla等，這些工具提供了圖形界面，使得文件傳輸更加直觀和便捷。

一旦文件上傳完成，需要確保Nginx可以正確地讀取和提供這些文件。這通常意味著需要將文件上傳到Nginx配置中指定的root目錄。

4.2 設(shè)置文件權(quán)限

在Linux系統(tǒng)中，文件權(quán)限對(duì)于服務(wù)器的運(yùn)行至關(guān)重要。Nginx服務(wù)通常以非root用戶運(yùn)行，因此需要確保該用戶有權(quán)訪問和提供Vue項(xiàng)目文件。

使用chown命令更改文件的所有者，例如：sudo chown -R www-data:www-data /path/to/dist/，這里www-data是Nginx進(jìn)程通常運(yùn)行的用戶名，這可能因安裝而異。
使用chmod命令設(shè)置適當(dāng)?shù)奈募?quán)限，以確保Nginx可以讀取文件。通常，755（讀、執(zhí)行權(quán)限）是目錄的推薦權(quán)限，而644（讀、寫權(quán)限）是文件的推薦權(quán)限。命令示例：sudo chmod -R 755 /path/to/dist/。
驗(yàn)證權(quán)限設(shè)置：使用ls -l /path/to/dist/命令檢查文件和目錄的權(quán)限，確保它們符合預(yù)期。

正確設(shè)置文件權(quán)限是確保Vue項(xiàng)目能夠被Nginx正確服務(wù)的前提。權(quán)限不足可能導(dǎo)致文件無法讀取，從而影響網(wǎng)站的訪問。

5. 配置SSL（可選）

5.1 安裝Certbot

Certbot 是一個(gè)開源工具，由 Let’s Encrypt 提供，用于自動(dòng)化獲取和續(xù)訂 SSL/TLS 證書的過程。安裝 Certbot 的步驟通常如下：

對(duì)于基于 Debian 的系統(tǒng)（如 Ubuntu），使用以下命令安裝：
```
sudo apt-get update
sudo apt-get install certbot python-certbot-nginx
```
對(duì)于基于 Red Hat 的系統(tǒng)（如 CentOS），使用以下命令安裝：
```
sudo yum update
sudo yum install certbot python-certbot-nginx
```
安裝完成后，可以使用 Certbot 與 Nginx 集成，自動(dòng)化 SSL 證書的獲取和配置過程。

5.2 獲取證書并配置Nginx

使用 Certbot 獲取 SSL 證書并自動(dòng)配置 Nginx 的步驟如下：

運(yùn)行 Certbot 命令，指定 Nginx 作為插件，并提供你的域名：
```
sudo certbot --nginx -d your_domain_or_ip
```
Certbot 將自動(dòng)驗(yàn)證你的域名，獲取 SSL 證書，并更新 Nginx 配置以使用證書。
配置文件通常更新在 /etc/nginx/sites-available/ 目錄下，Certbot 會(huì)創(chuàng)建一個(gè)包含 SSL 配置的文件。

5.3 自動(dòng)更新證書

Let’s Encrypt 證書的有效期為 90 天，因此需要定期更新。Certbot 提供了自動(dòng)更新的功能：

設(shè)置自動(dòng)更新任務(wù)，通常通過 cron 定時(shí)任務(wù)實(shí)現(xiàn)：
```
echo "0 3 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null
```
該命令會(huì)在每天凌晨 3 點(diǎn)運(yùn)行 Certbot 以更新證書，確保 SSL 證書始終保持有效狀態(tài)。
為了確保 Nginx 配置在證書更新后能夠正確加載，可以在更新證書后重啟 Nginx：
```
sudo systemctl restart nginx
```
通過這種方式，即使在證書更新后，前端 Vue 項(xiàng)目也能夠繼續(xù)通過 HTTPS 安全地提供服務(wù)。

6. 測試部署

6.1 訪問測試

部署完成后，通過訪問服務(wù)器的IP地址或綁定的域名來測試Vue項(xiàng)目是否能夠正常加載。檢查頁面元素、腳本和樣式是否正常工作，確保沒有資源加載錯(cuò)誤。

瀏覽器兼容性：在不同的瀏覽器上進(jìn)行測試，包括但不限于Chrome、Firefox、Safari和Edge，確保前端項(xiàng)目在所有主流瀏覽器上都能正常顯示和交互。
響應(yīng)式測試：驗(yàn)證頁面在不同設(shè)備和分辨率上的響應(yīng)式布局，確保移動(dòng)端和桌面端用戶都能獲得良好的瀏覽體驗(yàn)。

6.2 性能測試

對(duì)Vue項(xiàng)目進(jìn)行性能測試，包括頁面加載時(shí)間、資源加載時(shí)間、白屏?xí)r間等關(guān)鍵性能指標(biāo)的測試。

性能監(jiān)控工具：使用Google Lighthouse、WebPageTest等工具對(duì)項(xiàng)目進(jìn)行性能評(píng)估，根據(jù)測試結(jié)果優(yōu)化項(xiàng)目性能。
資源優(yōu)化：根據(jù)測試結(jié)果，對(duì)項(xiàng)目中的圖片、腳本和樣式進(jìn)行壓縮和優(yōu)化，減少HTTP請(qǐng)求次數(shù)，提高加載速度。