目錄
????????前言
一、實際背景
1.1 并行部署
1.2 接口代理
1.3 刷新問題
二、安裝腳本
2.1 創建腳本
2.2 不同系統
2.3?執行完成
三、配置文件
3.1 配置文件
3.2 目錄結構
3.3 重新啟動
四、驗證訪問
五、問題排查
5.1 訪問 404
5.2 接口 502
六、本文總結
6.1 清理舊環境
6.2 防火墻策略
6.3 實現的成果
七、更多操作
前言
首先，CentOS和Ubuntu都是基于Linux內核的開源發行版，但它們在起源、生態和應用場景上存在顯著差異。了解它們的“血緣”關系有助于選擇合適的系統進行Nginx部署。
CentOS（Community Enterprise Operating System）于2004年3月首次發行，是RHEL的免費克隆版，通過重新編譯RHEL源代碼去除品牌標識而成。RHEL由Red Hat公司開發，面向企業。CentOS 7.9.2009作為CentOS 7系列的最終版本，于2020年9月發布，支持到2024年6月，但因Red Hat策略變更，轉向CentOS Stream作為滾動更新版。
Ubuntu于2004年10月發行，由Canonical公司維護，基于Debian GNU/Linux。Debian由社區驅動，強調穩定，Ubuntu在其基礎上優化了用戶體驗，每6個月發布新版，每2年一個LTS（Long Term Support）版，如Ubuntu 24.04 LTS支持到2029年。
關系上，CentOS和Ubuntu無直接血緣，但同屬Linux家族。CentOS繼承RHEL的企業級穩定性，適合生產服務器；Ubuntu繼承Debian的包管理，適合桌面和云環境。
然而在日常的前端項目部署過程中，許多團隊會面臨以下典型問題：
-
同一臺服務器需要部署多個前端項目，且每個項目獨立運行，互不干擾。
-
后端接口需要代理，前后端分離部署后，需要通過 Nginx 將請求轉發到不同的后端服務。
-
端口管理混亂：如果部署多個項目在同一個端口，維護會復雜；如果不規劃端口，防火墻管理將變得困難。
-
前端項目刷新 404 問題：Vue、React 等 SPA 項目刷新時常常出現 404 錯誤。
本文將詳細介紹如何通過 Nginx 在 CentOS 服務器上，為不同前端項目分配獨立端口進行部署，并實現以下目標：
-
不同前端項目獨立端口管理，互不干擾；
-
每個項目對應獨立后端接口代理，支持前后端分離架構；
-
解決 SPA 項目刷新 404 問題；
-
提供 自動化安裝腳本，簡化部署流程；
-
涵蓋從 安裝、配置、排錯到防火墻管理 的完整流程。
一、實際背景
部署背景與需求分析
1.1 并行部署
多個項目并行部署：假設我們的服務器上需要部署以下三個前端項目：
| 項目名稱 | 本地路徑 | 訪問端口 | 訪問地址 |
|---|---|---|---|
| Dlxj_Csj | /usr/local/nginx/html/Dlxj_Csj/ | 80 | http://192.168.110.125/ |
| Hs_Csj | /usr/local/nginx/html/Hs_Csj/ | 81 | http://192.168.110.125:81/ |
| Yk_Csj | /usr/local/nginx/html/Yk_Csj/ | 82 | http://192.168.110.125:82/ |
這樣每個項目都擁有獨立的訪問地址，不會相互影響，便于維護和擴展。
1.2 接口代理
后端接口代理：三個前端項目的接口訪問需求不同，因此需要配置不同的后端地址：
| 項目名稱 | 接口路徑 | 后端服務地址 |
|---|---|---|
| Dlxj_Csj | /prod-api/ | http://192.168.110.44:9013/ |
| Hs_Csj | /prod-api/ | http://192.168.110.97:8080/ |
| Yk_Csj | /prod-api/ | http://192.168.110.97:8080/ |
通過 Nginx 的 proxy_pass 功能，可以輕松實現接口轉發，讓前端項目無感知地訪問后端服務。
1.3 刷新問題
刷新 404 問題：SPA 前端項目如 Vue、React 等使用前端路由控制，刷新頁面時，Nginx 默認會將請求直接發送到后端或文件系統，如果找不到對應文件，就會返回 404 Not Found。
解決方案：
使用 try_files 配置，將所有無法匹配的路由重定向到 index.html，例如：
location / {
? ? try_files $uri $uri/ /index.html;
}
二、安裝腳本
Nginx 自動化安裝腳本。為了避免手動安裝的繁瑣操作，這里提供一個一鍵自動安裝 Nginx 的腳本，自動完成安裝、配置、啟動及防火墻設置。
2.1 創建腳本
粘貼以下內容：
#!/bin/bash
# ==========================================================
# Nginx 一鍵安裝腳本 for CentOS 7/8
# 適用于多項目、多端口部署場景
# ==========================================================NGINX_VERSION="1.24.0"
INSTALL_DIR="/usr/local/nginx"
SRC_DIR="/usr/local/src"
LOG_FILE="/var/log/nginx_install.log"echo "========== 開始安裝 Nginx =========="# 1. 檢查是否為 root 用戶
if [ "$(id -u)" != "0" ]; thenecho "[錯誤] 請使用 root 用戶運行此腳本！"exit 1
fi# 2. 安裝必要依賴
echo "[步驟] 安裝依賴中..."
yum install -y gcc gcc-c++ make pcre pcre-devel zlib zlib-devel openssl openssl-devel wget >> $LOG_FILE 2>&1
if [ $? -ne 0 ]; thenecho "[錯誤] 依賴安裝失敗，請檢查 yum 源！"exit 1
fi# 3. 下載 Nginx 源碼
mkdir -p $SRC_DIR
cd $SRC_DIR
if [ ! -f "nginx-${NGINX_VERSION}.tar.gz" ]; thenwget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz >> $LOG_FILE 2>&1
fi# 4. 編譯安裝
tar -zxvf nginx-${NGINX_VERSION}.tar.gz >> $LOG_FILE 2>&1
cd nginx-${NGINX_VERSION}
./configure --prefix=$INSTALL_DIR --with-http_ssl_module --with-http_stub_status_module >> $LOG_FILE 2>&1
make && make install >> $LOG_FILE 2>&1if [ $? -eq 0 ]; thenecho "[成功] Nginx 安裝完成！"
elseecho "[錯誤] Nginx 編譯或安裝失敗，請查看日志：$LOG_FILE"exit 1
fi# 5. 配置 systemd 服務
cat > /usr/lib/systemd/system/nginx.service <<EOF
[Unit]
Description=Nginx HTTP Server
After=network.target[Service]
Type=forking
ExecStart=${INSTALL_DIR}/sbin/nginx
ExecReload=${INSTALL_DIR}/sbin/nginx -s reload
ExecStop=${INSTALL_DIR}/sbin/nginx -s stop
PrivateTmp=true[Install]
WantedBy=multi-user.target
EOF# 6. 設置開機自啟
systemctl enable nginx
systemctl start nginx# 7. 開放防火墻端口
echo "[步驟] 開放防火墻 80,81,82 端口..."
firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=81/tcp
firewall-cmd --permanent --add-port=82/tcp
firewall-cmd --reload# 8. 創建項目目錄
mkdir -p /usr/local/nginx/html/{Dlxj_Csj,Hs_Csj,Yk_Csj}echo "[完成] Nginx 已安裝并配置完成！"
echo "訪問地址："
echo " 項目1: http://服務器IP/"
echo " 項目2: http://服務器IP:81/"
echo " 項目3: http://服務器IP:82/"該腳本為 CentOS 7/8 系統提供 Nginx 一鍵安裝功能，具體操作包括：
- 檢查是否以 root 用戶運行，安裝編譯 Nginx 所需的依賴；
- 下載指定版本（1.24.0）的 Nginx 源碼并編譯安裝到指定目錄；
- 配置 systemd 服務以便管理 Nginx 啟停，同時設置開機自啟；
- 開放防火墻 80、81、82 端口；最后創建三個項目目錄，
實現多項目、多端口部署的基礎配置，完成后可通過對應端口訪問不同項目。
一般情況下，粘貼后，腳本會直接執行。
2.2 不同系統
這個是支持 CentOS 和 Ubuntu 雙系統 的一鍵安裝腳本：
#!/bin/bash
# ==========================================================
# Nginx 一鍵安裝腳本 for CentOS 7/8 / Ubuntu 18+
# 支持多項目、多端口部署場景
# 自動檢測系統類型，并選擇合適的安裝方式
# ==========================================================NGINX_VERSION="1.24.0"
INSTALL_DIR="/usr/local/nginx"
SRC_DIR="/usr/local/src"
LOG_FILE="/var/log/nginx_install.log"echo "========== 開始安裝 Nginx =========="# 1. 檢查是否為 root 用戶
if [ "$(id -u)" != "0" ]; thenecho "[錯誤] 請使用 root 用戶運行此腳本！"exit 1
fi# 2. 檢測系統類型
if [ -f /etc/redhat-release ]; thenOS="CentOS"
elif [ -f /etc/lsb-release ] || [ -f /etc/debian_version ]; thenOS="Ubuntu"
elseecho "[錯誤] 不支持的操作系統，請使用 CentOS 或 Ubuntu！"exit 1
fi
echo "[步驟] 檢測到系統類型：$OS"# 3. 安裝必要依賴
echo "[步驟] 安裝編譯依賴..."
if [ "$OS" = "CentOS" ]; thenyum install -y gcc gcc-c++ make pcre pcre-devel zlib zlib-devel openssl openssl-devel wget tar >> $LOG_FILE 2>&1
elseapt update -yapt install -y gcc g++ make libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev wget tar >> $LOG_FILE 2>&1
fi
if [ $? -ne 0 ]; thenecho "[錯誤] 依賴安裝失敗，請檢查網絡或軟件源配置！"exit 1
fi# 4. 下載 Nginx 源碼
mkdir -p $SRC_DIR
cd $SRC_DIR
if [ ! -f "nginx-${NGINX_VERSION}.tar.gz" ]; thenecho "[步驟] 下載 Nginx 源碼..."wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz >> $LOG_FILE 2>&1if [ $? -ne 0 ]; thenecho "[錯誤] 下載 Nginx 失敗，請檢查網絡！"exit 1fi
fi# 5. 編譯安裝 Nginx
echo "[步驟] 開始編譯 Nginx..."
tar -zxvf nginx-${NGINX_VERSION}.tar.gz >> $LOG_FILE 2>&1
cd nginx-${NGINX_VERSION}
./configure --prefix=$INSTALL_DIR --with-http_ssl_module --with-http_stub_status_module >> $LOG_FILE 2>&1
make && make install >> $LOG_FILE 2>&1if [ $? -eq 0 ]; thenecho "[成功] Nginx 編譯安裝完成！"
elseecho "[錯誤] Nginx 編譯或安裝失敗，請查看日志：$LOG_FILE"exit 1
fi# 6. 配置 systemd 服務
echo "[步驟] 配置 systemd 服務..."
cat > /usr/lib/systemd/system/nginx.service <<EOF
[Unit]
Description=Nginx HTTP Server
After=network.target[Service]
Type=forking
ExecStart=${INSTALL_DIR}/sbin/nginx
ExecReload=${INSTALL_DIR}/sbin/nginx -s reload
ExecStop=${INSTALL_DIR}/sbin/nginx -s stop
PrivateTmp=true[Install]
WantedBy=multi-user.target
EOF# 7. 啟動 Nginx 并設置開機自啟
systemctl daemon-reexec
systemctl enable nginx
systemctl start nginx# 8. 配置防火墻（僅 CentOS）
if [ "$OS" = "CentOS" ]; thenecho "[步驟] 開放防火墻 80,81,82 端口..."firewall-cmd --permanent --add-port=80/tcpfirewall-cmd --permanent --add-port=81/tcpfirewall-cmd --permanent --add-port=82/tcpfirewall-cmd --reload
fi# 9. 創建前端項目目錄
echo "[步驟] 創建項目目錄..."
mkdir -p /usr/local/nginx/html/{Dlxj_Csj,Hs_Csj,Yk_Csj}# 10. 輸出結果
echo "[完成] Nginx 已安裝并配置完成！"
echo "訪問地址："
echo " 項目1: http://服務器IP/"
echo " 項目2: http://服務器IP:81/"
echo " 項目3: http://服務器IP:82/"
echo "========== 安裝完成 =========="這個腳本會自動檢測系統類型，然后選擇正確的包管理工具（yum 或 apt），安裝依賴、編譯、配置并啟動 Nginx，同時設置開機自啟和項目目錄。這樣你在 CentOS 或 Ubuntu 上都能直接執行。
2.3?執行完成
執行完成后，驗證服務狀態：
systemctl status nginx
相關命令：
| 操作 | 命令 |
|---|---|
| 啟動 Nginx | systemctl start nginx |
| 停止 Nginx | systemctl stop nginx |
| 重啟 Nginx | systemctl restart nginx |
| 查看狀態 |
|
| 平滑重載配置 | systemctl reload nginx |
| 檢測配置文件 | nginx -t |
| 查看訪問日志 | tail -f /usr/local/nginx/logs/access.log |
| 查看錯誤日志 | tail -f /usr/local/nginx/logs/error.log |
| 開機自啟 | systemctl enable nginx |
| 取消開機自啟 | systemctl disable nginx |
三、配置文件
Nginx 配置文件
3.1 配置文件
這里需要配置文件內容，文件位置：
/usr/local/nginx/conf/nginx.conf
將內容修改為以下版本：
user nobody;
worker_processes auto;
error_log logs/error.log error;
pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;gzip on;gzip_types text/plain text/css application/json application/javascript text/xml;log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" "$http_user_agent"';access_log logs/access.log main;# ===== 項目 1: Dlxj_Csj =====server {listen 80;server_name localhost;root /usr/local/nginx/html/Dlxj_Csj;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}location ^~/prod-api/ {proxy_pass http://192.168.110.44:9013/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}# ===== 項目 2: Hs_Csj =====server {listen 81;server_name localhost;root /usr/local/nginx/html/Hs_Csj;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}location ^~/prod-api/ {proxy_pass http://192.168.110.97:8080/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}# ===== 項目 3: Yk_Csj =====server {listen 82;server_name localhost;root /usr/local/nginx/html/Yk_Csj;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}location ^~/prod-api/ {proxy_pass http://192.168.110.97:8080/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/local/nginx/html;}}
}3.2 目錄結構
/usr/local/nginx/html/
├── Dlxj_Csj
│ ? └── index.html
├── Hs_Csj
│ ? └── index.html
└── Yk_Csj
? ? └── index.html
3.3 重新啟動
重啟 Nginx
systemctl restart nginx
四、驗證訪問
| 項目 | URL |
|---|---|
| Dlxj_Csj | http://192.168.110.125/ |
| Hs_Csj | http://192.168.110.125:81/ |
| Yk_Csj | http://192.168.110.125:82/ |
訪問對應地址，確認頁面是否正常加載。
五、問題排查
5.1 訪問 404
檢查項目目錄下是否有
index.html文件；確認 Nginx 配置文件
root路徑與項目目錄一致。
5.2 接口 502
-
后端服務未啟動或 IP/端口配置錯誤；
-
使用以下命令確認端口狀態：netstat -tunlp | grep 9013
六、本文總結
6.1 清理舊環境
清理舊 Nginx 環境
# 1. 停止并禁用 Nginx 服務
sudo systemctl stop nginx
sudo systemctl disable nginx
sudo systemctl status nginx# 2. 刪除 systemd 服務文件
sudo rm -f /usr/lib/systemd/system/nginx.service
sudo rm -f /etc/systemd/system/nginx.service
sudo systemctl daemon-reload# 3. 刪除 Nginx 安裝目錄及源碼
sudo rm -rf /usr/local/nginx
sudo rm -rf /usr/local/src/nginx-*# 4. 清理殘留進程
sudo pkill -9 nginx# 5. 刪除 nginx 用戶（可選）
sudo userdel nginx清理舊 Nginx 環境，最終腳本（可直接執行），適用于 CentOS 和 Ubuntu：
#!/bin/bash
# ==============================================
# Nginx 清理腳本，徹底刪除舊環境
# 適用系統：CentOS 7/8、Ubuntu 18+
# ==============================================echo "========== 開始清理 Nginx 舊環境 =========="# 1. 停止并禁用 Nginx 服務
echo "[步驟] 停止 Nginx 服務..."
systemctl stop nginx 2>/dev/null
systemctl disable nginx 2>/dev/null
systemctl status nginx || echo "Nginx 服務已停止"# 2. 刪除 systemd 服務文件
echo "[步驟] 刪除 systemd 服務文件..."
rm -f /usr/lib/systemd/system/nginx.service
rm -f /etc/systemd/system/nginx.service
systemctl daemon-reload# 3. 刪除安裝目錄
echo "[步驟] 刪除 Nginx 安裝目錄..."
rm -rf /usr/local/nginx
rm -rf /usr/local/src/nginx-*# 4. 清理殘留進程
echo "[步驟] 檢查并清理殘留進程..."
pkill -9 nginx 2>/dev/null || echo "無殘留進程"# 5. 刪除 Nginx 用戶（可選）
echo "[步驟] 檢查并刪除 nginx 用戶..."
if id "nginx" &>/dev/null; thenuserdel nginxecho "nginx 用戶已刪除"
elseecho "nginx 用戶不存在"
fiecho "========== 清理完成 =========="
echo "提示：如需重新安裝，請重新運行安裝腳本。"
該腳本 徹底清理舊的 Nginx 環境，包括停止并禁用 Nginx 服務、刪除 systemd 服務文件、清空安裝目錄和源碼、清理殘留進程，以及可選刪除 Nginx 用戶。執行后，系統中原有的 Nginx 及相關文件將被完全移除，為重新安裝和部署新的 Nginx 環境做好準備。
6.2 防火墻策略
以下命令用于開放 Nginx 使用的端口，并使修改立即生效：
# 開放項目1端口 80
firewall-cmd --permanent --add-port=80/tcp ?# 開放項目2端口 81
firewall-cmd --permanent --add-port=81/tcp ?# 開放項目3端口 82
firewall-cmd --permanent --add-port=82/tcp ?# 重新加載防火墻策略，使修改生效
firewall-cmd --reload ?
如果你是通過前面提供的一鍵安裝腳本部署 Nginx，防火墻端口已經開放，無需重復執行上述命令；僅在手動安裝或需要修改端口策略時才需要執行這些命令。
6.3 實現的成果
通過上述部署和配置，我們成功實現了三個前端項目的獨立部署和訪問管理。具體成果如下：
三個前端項目分端口獨立部署，每個項目互不干擾；
每個項目都配置了獨立的后端接口代理，確保數據請求正確轉發；
訪問路徑清晰，運維人員和開發人員易于管理；
單頁面應用刷新不再出現 404 問題，用戶體驗良好；
一鍵腳本自動化安裝、配置 Nginx，大幅降低人工操作成本，提高部署效率。
經過此方案，服務器上的多前端項目管理更加規范、安全、高效，為后續運維和升級提供了可靠基礎。
七、更多操作
請看，Server?個人專欄
Server?
https://blog.csdn.net/weixin_65793170/category_12128287.html
_281)
![[郵件服務器core] 安全通信(SSL/TLS) | OpenSSL庫管理 | 服務端安全SECURITY.md](http://pic.xiahunao.cn/[郵件服務器core] 安全通信(SSL/TLS) | OpenSSL庫管理 | 服務端安全SECURITY.md)
)
