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

前言

首先，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 创建脚本

粘贴以下内容：

bash 复制代码

#!/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 <<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 双系统 的一键安装脚本：

bash 复制代码

#!/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 <<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" ]; then
    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
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 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

将内容修改为以下版本：

javascript 复制代码

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 环境

bash 复制代码

# 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：

bash 复制代码

#!/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 实现的成果

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

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

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

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

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

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

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

七、更多操作

请看，Server 个人专栏

Serverhttps://blog.csdn.net/weixin_65793170/category_12128287.html

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

目录

[1.1 并行部署](#1.1 并行部署)

[1.2 接口代理](#1.2 接口代理)

[1.3 刷新问题](#1.3 刷新问题)

[2.1 创建脚本](#2.1 创建脚本)

[2.2 不同系统](#2.2 不同系统)

[2.3 执行完成](#2.3 执行完成)

[3.1 配置文件](#3.1 配置文件)

[3.2 目录结构](#3.2 目录结构)

[3.3 重新启动](#3.3 重新启动)

[5.1 访问 404](#5.1 访问 404)

[5.2 接口 502](#5.2 接口 502)

[6.1 清理旧环境](#6.1 清理旧环境)

[6.2 防火墙策略](#6.2 防火墙策略)

[6.3 实现的成果](#6.3 实现的成果)

前言

一、实际背景

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 防火墙策略

开放项目1端口 80

开放项目2端口 81

开放项目3端口 82

重新加载防火墙策略，使修改生效

6.3 实现的成果

七、更多操作

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