Server 13 ，CentOS 上使用 Nginx 部署多个前端项目完整指南（ 协助多端口与脚本自动化 ）

目录

前言

一、实际背景

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的包管理，适合桌面和云环境。

然而在日常的前端项目部署过程中，许多团队会面临以下典型问题：

1. 同一台服务器需要部署多个前端项目，且每个项目独立运行，互不干扰。

2. 后端接口需要代理，前后端分离部署后，需要通过 Nginx 将请求转发到不同的后端服务。

3. 端口管理混乱：如果部署多个项目在同一个端口，维护会复杂；如果不规划端口，防火墙管理将变得困难。

4. 前端项目刷新 404 问题：Vue、React 等 SPA 项目刷新时常常出现 404 错误。

本文将详细介绍如何通过 Nginx 在 CentOS 服务器上，为不同前端项目分配独立端口进行部署，并实现以下目标：

1. 不同前端项目独立端口管理，互不干扰；

2. 每个项目对应独立后端接口代理，支持前后端分离架构；

3. 解决 SPA 项目刷新 404 问题；

4. 提供 自动化安装脚本，简化部署流程；

5. 涵盖从 安装、配置、排错到防火墙管理 的完整流程。

一、实际背景

部署背景与需求分析

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" ]; then
echo "[错误] 请使用 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 ]; then
echo "[错误] 依赖安装失败，请检查 yum 源！"
exit 1
fi
# 3. 下载 Nginx 源码
mkdir -p $SRC_DIR
cd $SRC_DIR
if [ ! -f "nginx-${NGINX_VERSION}.tar.gz" ]; then
wget 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>&1
if [ $? -eq 0 ]; then
echo "[成功] Nginx 安装完成！"
else
echo "[错误] Nginx 编译或安装失败，请查看日志：$LOG_FILE"
exit 1
fi
# 5. 配置 systemd 服务
cat > /usr/lib/systemd/system/nginx.service <

该脚本为 CentOS 7/8 系统提供 Nginx 一键安装功能，具体操作包括：

1. 检查是否以 root 用户运行，安装编译 Nginx 所需的依赖；
2. 下载指定版本（1.24.0）的 Nginx 源码并编译安装到指定目录；
3. 配置 systemd 服务以便管理 Nginx 启停，同时设置开机自启；
4. 开放防火墙 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" ]; then
echo "[错误] 请使用 root 用户运行此脚本！"
exit 1
fi
# 2. 检测系统类型
if [ -f /etc/redhat-release ]; then
OS="CentOS"
elif [ -f /etc/lsb-release ] || [ -f /etc/debian_version ]; then
OS="Ubuntu"
else
echo "[错误] 不支持的操作系统，请使用 CentOS 或 Ubuntu！"
exit 1
fi
echo "[步骤] 检测到系统类型：$OS"
# 3. 安装必要依赖
echo "[步骤] 安装编译依赖..."
if [ "$OS" = "CentOS" ]; then
yum install -y gcc gcc-c++ make pcre pcre-devel zlib zlib-devel openssl openssl-devel wget tar >> $LOG_FILE 2>&1
else
apt update -y
apt install -y gcc g++ make libpcre3 libpcre3-dev zlib1g zlib1g-dev libssl-dev wget tar >> $LOG_FILE 2>&1
fi
if [ $? -ne 0 ]; then
echo "[错误] 依赖安装失败，请检查网络或软件源配置！"
exit 1
fi
# 4. 下载 Nginx 源码
mkdir -p $SRC_DIR
cd $SRC_DIR
if [ ! -f "nginx-${NGINX_VERSION}.tar.gz" ]; then
echo "[步骤] 下载 Nginx 源码..."
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz >> $LOG_FILE 2>&1
if [ $? -ne 0 ]; then
echo "[错误] 下载 Nginx 失败，请检查网络！"
exit 1
fi
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>&1
if [ $? -eq 0 ]; then
echo "[成功] Nginx 编译安装完成！"
else
echo "[错误] Nginx 编译或安装失败，请查看日志：$LOG_FILE"
exit 1
fi
# 6. 配置 systemd 服务
echo "[步骤] 配置 systemd 服务..."
cat > /usr/lib/systemd/system/nginx.service <

这个脚本会自动检测系统类型，然后选择正确的包管理工具（yum 或 apt），安装依赖、编译、配置并启动 Nginx，同时设置开机自启和项目目录。这样你在 CentOS 或 Ubuntu 上都能直接执行。

2.3 执行完成

执行完成后，验证服务状态：

systemctl status nginx

相关命令：

操作	命令
启动 Nginx	systemctl start nginx
停止 Nginx	systemctl stop nginx
重启 Nginx	systemctl restart nginx
查看状态	systemctl status 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

1. 检查项目目录下是否有 index.html 文件；

2. 确认 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; then
userdel nginx
echo "nginx 用户已删除"
else
echo "nginx 用户不存在"
fi
echo "========== 清理完成 =========="
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 实现的成果

通过上述部署和配置，我们成功实现了三个前端项目的独立部署和访问管理。具体成果如下：

1. 三个前端项目分端口独立部署，每个项目互不干扰；

2. 每个项目都配置了独立的后端接口代理，确保数据请求正确转发；

3. 访问路径清晰，运维人员和开发人员易于管理；

4. 单页面应用刷新不再出现 404 问题，用户体验良好；

5. 一键脚本自动化安装、配置 Nginx，大幅降低人工操作成本，提高部署效率。

经过此方案，服务器上的多前端项目管理更加规范、安全、高效，为后续运维和升级提供了可靠基础。

---

七、更多操作

请看，Server 个人专栏

Server​https://blog.csdn.net/weixin_65793170/category_12128287.html