????????在前端開發中，項目開發完成后，如何高效、穩定地將其部署到生產環境是至關重要的一步。Nginx 作為一款輕量級、高性能的 Web 服務器和反向代理服務器，憑借其出色的性能和豐富的功能，成為了前端項目部署的首選方案。本文將詳細介紹在 Nginx 已安裝好的基礎上，如何進行前端項目的配置，讓你的前端項目順利上線。
一、Nginx 基礎認知
1.1 工作原理
Nginx 采用事件驅動的異步非阻塞處理方式，在處理大量并發連接時表現出色。它通過多個工作進程監聽客戶端請求，每個工作進程可以處理多個連接，避免了傳統服務器在高并發場景下的性能瓶頸。
1.2 核心配置文件
Nginx 的核心配置文件存放位置會因安裝方式和操作系統的不同而有所變化，當然也可以在定義安裝路徑。我的核心配置文件位于?/usr/local/nginx/conf/nginx.conf?。同時，為了方便管理不同的項目，我們可以在?/usr/local/nginx/conf?目錄下創建一個?conf.d?子目錄，用于存放各個項目的獨立配置文件。
二、前端靜態資源部署
2.1 準備前端項目
那目前已完成了前端項目的開發，并使用構建工具Webpack進行了打包，生成了包含 HTML、CSS、JavaScript、圖片等的靜態文件。將這些打包后的文件存放在一個指定的目錄下，例如?/var/www/my-frontend-project?。
其中如果本地機器和服務器之間能夠通過 SSH 正常通信，把文件上傳到服務器可以通過scp命令
scp -r /home/user/my-frontend-project username@server_ip:/var/www/username?：你在服務器上的登錄用戶名。server_ip?：服務器的 IP 地址。
2.2 配置 Nginx
2.2.1 創建項目配置目錄
首先，在?/usr/local/nginx/conf?目錄下創建?conf.d?目錄（如果該目錄不存在）：
mkdir -p /usr/local/nginx/conf/conf.d2.2.2 創建項目配置文件
在?conf.d?目錄下創建一個新的配置文件，例如?my-frontend-project.conf?，并添加以下內容：
server {listen 80;server_name your_domain_or_ip;root /var/www/my-frontend-project;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}
}listen 80：指定 Nginx 監聽的端口號為 80，這是 HTTP 協議的默認端口。server_name your_domain_or_ip：填寫服務器的域名或 IP 地址，以便客戶端能夠通過該地址訪問項目。root /var/www/my-frontend-project：指定前端項目的根目錄，Nginx 將從該目錄中查找并返回靜態文件。index index.html index.htm：設置默認的索引文件，當客戶端訪問根目錄時，Nginx 會優先返回?index.html?或?index.htm?文件。location /：配置根路徑的請求處理規則，try_files $uri $uri/ /index.html?表示當請求的文件不存在時，返回?index.html?文件，這對于單頁面應用（SPA）非常重要。
注意：使用80端口之前通過“netstat -ntulp | grep 80”命令確認80端口是否被占用， 如果被占用可以換一個端口，避免影響其他業務。
2.2.3 引入項目配置文件
在?/usr/local/nginx/conf/nginx.conf?文件中添加以下語句，以確保?conf.d?目錄下的配置文件被加載：
include /usr/local/nginx/conf/conf.d/*.conf;2.3 檢查配置并重啟 Nginx
在修改完配置文件后，需要檢查配置文件是否存在語法錯誤：
/usr/local/nginx/sbin/nginx -t?如果檢查通過，重啟 Nginx 服務使配置生效：
/usr/local/nginx/sbin/nginx -s reload2.4 驗證部署
在瀏覽器中輸入服務器的域名或 IP 地址，如果能夠看到前端項目的頁面，說明部署成功。
三、靜態資源緩存配置
為了提高前端項目的性能，減少服務器的負載，可以對靜態資源進行緩存配置。在?my-frontend-project.conf?文件中添加以下內容：
location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {expires 30d;add_header Cache-Control "public, no-transform";
}
location ~* \.(css|js|png|jpg|jpeg|gif|ico)$：匹配 CSS、JavaScript、圖片等靜態資源文件。expires 30d：設置靜態資源的緩存時間為 30 天，客戶端在 30 天內再次請求該資源時，將直接使用本地緩存。add_header Cache-Control "public, no-transform"：添加?Cache-Control?頭信息，允許公共緩存，不進行轉換。
四、反向代理配置
如果前端項目需要與后端 API 進行交互，可以使用 Nginx 進行反向代理配置。在?my-frontend-project.conf?文件中添加以下內容：
四、反向代理配置
如果前端項目需要與后端 API 進行交互，可以使用 Nginx 進行反向代理配置。在?my-frontend-project.conf?文件中添加以下內容：
location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /api/：匹配以?/api/?開頭的請求。proxy_pass http://backend_server_ip:port/：將請求轉發到后端服務器的指定地址和端口。proxy_set_header：設置請求頭信息，將客戶端的真實 IP 地址傳遞給后端服務器。
完整的??my-frontend-project.conf?文件
server {listen 80;server_name your_domain;# 前端項目根目錄root /var/www/my-frontend-project;# 默認索引文件index index.html index.htm;# 靜態資源緩存配置location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {# 緩存 30 天expires 30d;add_header Cache-Control "public, no-transform";}# 前端項目根路徑配置location / {try_files $uri $uri/ /index.html;}# 反向代理配置，將 /api/ 開頭的請求轉發到后端服務器location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}請根據實際情況修改上述配置文件中的域名、前端項目路徑、后端 API 地址等信息。修改配置文件后，使用?sudo /usr/local/nginx/sbin/nginx -t?檢查配置語法，確認無誤后使用?sudo /usr/local/nginx/sbin/nginx -s reload?重新加載配置。?
)
