掌握 用Nginx部署任意前端靜態(tài)文件 是后端/運(yùn)維入門的核心技能之一。無(wú)論是下載的模板（如AdminLTE）、前端框架打包后的文件（Vue/React的dist目錄），還是簡(jiǎn)單的HTML頁(yè)面，都能通過(guò)這套流程快速在網(wǎng)頁(yè)上展示。

本筆記以虛擬機(jī) 為環(huán)境，從文件傳輸?shù)絅ginx配置，全程實(shí)操落地，讓你 拿到前端文件就能部署！

1 準(zhǔn)備工作

1.1 環(huán)境要求

• 虛擬機(jī)：已安裝Nginx（若未安裝，執(zhí)行sudo apt install nginx -y）
• 物理機(jī)：存有前端文件（如AdminLTE-3.2.0，或任意包含index.html的文件夾）
• 工具：VS Code + SSH Remote擴(kuò)展（用于遠(yuǎn)程連接虛擬機(jī)并傳輸文件）

1.2 目標(biāo)

將物理機(jī)的前端文件傳到虛擬機(jī)，通過(guò)Nginx配置，讓瀏覽器訪問(wèn)http://虛擬機(jī)IP:端口時(shí)能正常顯示前端內(nèi)容。

2 在虛擬機(jī)中創(chuàng)建工程目錄

在 VS Code 的遠(yuǎn)程終端（左下角顯示 SSH: vm-via-nat 時(shí)，按 Ctrl + ~ 打開(kāi)終端）執(zhí)行：

#在家目錄新建文件夾，名字my-project
mkdir ~/my-project  

為了避免權(quán)限問(wèn)題且便于管理，在用戶的目錄下創(chuàng)建專用文件夾，按配置文件和前端文件分類存放：

# 登錄虛擬機(jī)后，在終端執(zhí)行（如用戶為kr，路徑默認(rèn)在/home/kr）
mkdir -p ~/my-project/config  # 存放Nginx自定義配置文件（按端口/功能分類）
mkdir -p ~/my-project//www    # 存放前端靜態(tài)文件（如AdminLTE、dist等）

在 Linux 中，~ 是一個(gè)特殊符號(hào)，代表當(dāng)前用戶的主目錄，即 /home/用戶名。

• ~/my-project//config：后續(xù)所有項(xiàng)目的Nginx配置文件都放這里。
• ~/my-project//www：前端文件的根目錄，每個(gè)項(xiàng)目單獨(dú)建子文件夾（如~/my-project//www/adminlte放AdminLTE文件）。

3 將物理機(jī)前端文件傳到虛擬機(jī)

用VS Code + SSH遠(yuǎn)程連接虛擬機(jī)，通過(guò)拖放傳輸文件，這是最直觀的方式：

1. 在VS Code左側(cè)資源管理器中，導(dǎo)航到虛擬機(jī)的/home/kerui/my-project//www目錄；
2. 打開(kāi)物理機(jī)的文件管理器，找到前端文件；
3. 直接將物理機(jī)的前端文件夾拖到VS Code的/home/kerui/my-project//www目錄中；
4. 等待傳輸完成，此時(shí)虛擬機(jī)中會(huì)出現(xiàn)/home/kerui/my-project//www/AdminLTE-3.2.0。

當(dāng)然，你也可以選擇從主機(jī)終端輸出以下命令進(jìn)行傳輸：

scp -p [d端口號(hào)] -r [物理機(jī)文件路徑] [虛擬機(jī)文件路徑] 

具體可見(jiàn)下面圖片頁(yè)面所示。

傳輸后在該頁(yè)面可以看到你新過(guò)來(lái)的文件，你也可以在這里任意新建文件夾跟其他文件，因?yàn)槭悄愕募夷夸?，不?huì)報(bào)權(quán)限錯(cuò)誤。

4 編寫Nginx配置文件

為前端文件創(chuàng)建專屬配置，指定訪問(wèn)端口和文件路徑：

4.1 新建配置文件

在虛擬機(jī)終端執(zhí)行，創(chuàng)建并編輯配置文件（以部署AdminLTE到8080端口為例）：

# 進(jìn)入配置文件目錄
cd ~/my-project/config  
# 新建配置文件（文件名建議包含端口或項(xiàng)目名，如adminlte-8080.conf）
vim adminlte-8080.conf  

這是一種方法，但是我更推薦以下方法，在VsCode左側(cè)新建文件，作用一樣。

4.2 配置文件內(nèi)容

程序如下：

server {
    listen 8080;  # 訪問(wèn)端口（可自定義，如8081、8090）
    server_name _;  # 本地測(cè)試用“_”表示任意域名

    # 前端文件在虛擬機(jī)中的路徑（必須是絕對(duì)路徑）
    root /home/kerui/my-project/www/AdminLTE-3.2.0;  
    # 默認(rèn)首頁(yè)（前端文件夾中必須有index.html）
    index index.html index.htm;

    # 解決單頁(yè)應(yīng)用路由問(wèn)題
    location / {
        try_files $uri $uri/ /index.html;
    }
}

但到這里還沒(méi)有結(jié)束，因?yàn)镹ginx默認(rèn)只加載系統(tǒng)目錄的配置，所以在你配置之前，系統(tǒng)并不會(huì)去讀你創(chuàng)建的文件目錄，具體見(jiàn)下一節(jié)。

5 讓Nginx加載自定義配置

Nginx默認(rèn)只加載系統(tǒng)目錄的配置，需手動(dòng)讓它識(shí)別我們?cè)?code>~/my-project/config中的文件：

5.1 編輯Nginx主配置

執(zhí)行以下命令打開(kāi)Nginx主配置文件（需要sudo權(quán)限，僅需配置一次）：

sudo vim /etc/nginx/nginx.conf  

5.2 添加自定義配置目錄

在http塊末尾添加一行，讓Nginx加載~/my-project/config下的所有.conf文件：

http {
    ...  # 原有的其他配置（保留不動(dòng)）

    # 保留默認(rèn)的系統(tǒng)配置目錄（不影響原有服務(wù)）
    include /etc/nginx/conf.d/*.conf;
    # 新增：加載kerui用戶的自定義配置目錄（關(guān)鍵?。?
    include /home/kerui/nginx/config/*.conf;
}

按Esc，輸入:wq保存退出。

這里最后的*.conf則是系統(tǒng)會(huì)自動(dòng)找尋該文件夾下的所有conf文件，所以后續(xù)你只要在該路徑下創(chuàng)建conf文件都不需要再跑到系統(tǒng)目錄下更改，就會(huì)更加簡(jiǎn)單便捷。

6 驗(yàn)證配置并啟動(dòng)服務(wù)

6.1 檢查配置語(yǔ)法

執(zhí)行以下命令，確保配置文件無(wú)錯(cuò)誤（若報(bào)錯(cuò)，按提示修改路徑或語(yǔ)法）：

sudo nginx -t  

成功提示：

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

6.2 重啟Nginx生效

sudo systemctl restart nginx  

也可以選擇使用：

sudo nginx -s reload

這一個(gè)主要區(qū)別是可以不斷網(wǎng)就重新生效，對(duì)于你一些正在掛著的網(wǎng)頁(yè)有效果。

6.3 瀏覽器訪問(wèn)測(cè)試

1. 查看虛擬機(jī)IP（終端執(zhí)行ip addr，如192.168.56.10）。
2. 物理機(jī)瀏覽器輸入：http://192.168.56.10:8080（IP替換為你的虛擬機(jī)IP，端口對(duì)應(yīng)配置文件的8080）。
3. 若顯示前端頁(yè)面（如AdminLTE的首頁(yè)），則部署成功。

7 查看Nginx日志（通用查錯(cuò)方法）

當(dāng)遇到問(wèn)題或其他未知錯(cuò)誤時(shí)，優(yōu)先查看Nginx的日志文件，里面會(huì)記錄詳細(xì)的錯(cuò)誤原因（如權(quán)限拒絕、路徑不存在、配置語(yǔ)法錯(cuò)誤等）。

7.1 日志文件的默認(rèn)路徑

Nginx的日志通常存放在 /var/log/nginx/ 目錄下，核心有兩個(gè)文件：

• 錯(cuò)誤日志：/var/log/nginx/error.log（記錄啟動(dòng)失敗、訪問(wèn)錯(cuò)誤等關(guān)鍵信息，最常用）。
• 訪問(wèn)日志：/var/log/nginx/access.log（記錄所有瀏覽器的訪問(wèn)記錄，用于分析訪問(wèn)情況）。

7.2 查看錯(cuò)誤日志的命令

在虛擬機(jī)終端執(zhí)行以下命令，實(shí)時(shí)查看錯(cuò)誤日志（方便調(diào)試時(shí)追蹤問(wèn)題）：

# 實(shí)時(shí)輸出最新的錯(cuò)誤日志（按Ctrl+C退出）
sudo tail -f /var/log/nginx/error.log  

如果需要查看歷史錯(cuò)誤，可直接打開(kāi)日志文件：

# 用VS Code打開(kāi)日志文件（可視化查看，支持搜索）
code /var/log/nginx/error.log  # 需要先通過(guò)SSH連接虛擬機(jī)，且VS Code已遠(yuǎn)程連接

7.3 常見(jiàn)日志信息及對(duì)應(yīng)解決方法

8 小結(jié)

本筆記的核心是“用自定義目錄管理Nginx配置和前端文件”，流程可概括為：

1. 建目錄：~/nginx/config（配置）+ ~/nginx/www（前端文件）→ 避免權(quán)限問(wèn)題，分類清晰。
2. 傳文件：VS Code拖放 → 簡(jiǎn)單直觀，適合新手。
3. 寫配置：指定端口和文件路徑 → 核心是listen和root參數(shù)。
4. 加載配置：主配置文件中include自定義目錄 → 一次配置，永久生效。
5. 驗(yàn)證訪問(wèn)：瀏覽器測(cè)試 → 快速確認(rèn)結(jié)果。

掌握這套流程后，無(wú)論拿到什么前端靜態(tài)文件，都能按傳文件→寫配置→啟動(dòng)服務(wù)的步驟快速部署，后續(xù)需要學(xué)習(xí)Nginx高級(jí)功能，如反向代理、負(fù)載均衡等這些，也算是打下基礎(chǔ)。

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

最新評(píng)論