如何在CentOS服务器上部署Vue前端项目并配置Nginx？

在 CentOS 系统上部署一个 Vue.js 项目是前端开发者走向全栈或运维的常见一步，这个过程涉及将开发完成的 Vue 应用编译成静态文件，并通过 Web 服务器（如 Nginx）在公网上提供服务，本文将详细介绍这一流程，确保部署过程清晰、高效且安全。

环境准备

在开始部署之前,确保你的 CentOS 服务器已经准备就绪，推荐使用 CentOS 7 或更高版本，我们需要安装必要的软件：Nginx、Node.js 和 Git。

安装 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器，非常适合托管静态文件。

# 使用 yum 或 dnf 安装 EPEL 仓库（如果尚未安装）
sudo yum install -y epel-release
# 安装 Nginx
sudo yum install -y nginx
# 启动 Nginx 并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

安装 Node.js 和 npm

虽然 Vue 项目通常在本地构建，但在服务器上安装 Node.js 环境可以方便直接拉取代码并构建，实现自动化部署的基础，推荐使用 NodeSource 提供的脚本以获取较新的 Node.js 版本。

# 获取并执行 NodeSource 安装脚本（以 Node.js 18.x 为例）
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
# 安装 Node.js (npm 会一同被安装)
sudo yum install -y nodejs
# 验证安装
node -v
npm -v

安装 Git

Git 用于从代码仓库（如 GitHub, GitLab）拉取你的项目代码。

sudo yum install -y git

项目构建与上传

部署流程的核心是获取项目源码,将其编译成浏览器可识别的静态 HTML、CSS 和 JavaScript 文件。

克隆项目代码

选择一个合适的目录来存放你的项目,/var/www。

# 创建目录
sudo mkdir -p /var/www
# 进入目录
cd /var/www
# 克隆你的项目（替换为你的仓库地址）
sudo git clone https://github.com/your-username/your-vue-project.git

安装依赖并构建项目

进入项目目录,安装所有依赖包，然后执行构建命令。

# 进入项目目录
cd your-vue-project
# 安装项目依赖
sudo npm install
# 构建生产环境版本
sudo npm run build

构建完成后,项目目录下会生成一个 dist 文件夹，这个文件夹包含了我们需要的所有静态文件。

配置 Nginx

我们需要配置 Nginx，使其能指向 dist 文件夹并正确处理 Vue Router 的请求。

创建 Nginx 配置文件

为你的项目创建一个独立的 Nginx 配置文件，便于管理。

sudo vim /etc/nginx/conf.d/your-vue-app.conf

编写配置内容

在打开的文件中,粘贴以下配置，请根据实际情况修改 server_name 和 root 路径。

server {
    listen 80;
    server_name your_domain.com; # 替换为你的域名或服务器IP
    root /var/www/your-vue-project/dist; # 指向你的 dist 文件夹
    index index.html index.htm;
    location / {
        # 这一行是关键，用于支持 Vue Router 的 history 模式
        try_files $uri $uri/ /index.html;
    }
    # 可选：配置静态资源缓存
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    # 错误页面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

测试并重启 Nginx

在应用新配置前,务必检查其语法是否正确。

# 测试 Nginx 配置
sudo nginx -t
# 如果显示 syntax is ok 和 test is successful，则重启 Nginx
sudo systemctl restart nginx

防火墙与安全策略配置

为了确保外部可以访问你的网站,你需要开放相应的端口，并处理可能的 SELinux 安全限制。

配置防火墙

CentOS 默认使用 firewalld，你需要开放 HTTP (80) 和 HTTPS (443) 端口。

# 开放 HTTP 服务
sudo firewall-cmd --permanent --add-service=http
# 开放 HTTPS 服务（为将来配置 SSL 做准备）
sudo firewall-cmd --permanent --add-service=https
# 重载防火墙规则
sudo firewall-cmd --reload

处理 SELinux 问题

SELinux 是 CentOS 的安全模块，它可能会阻止 Nginx 访问 /var/www 目录下的文件，如果遇到 403 Forbidden 错误，这很可能是原因之一。

# 修改 /var/www/your-vue-project/dist 目录及其所有文件的安全上下文
sudo chcon -Rt httpd_sys_content_t /var/www/your-vue-project/dist

至此,你的 Vue 项目应该已经成功部署在 CentOS 服务器上了，在浏览器中输入你的域名或 IP 地址，即可看到应用。

相关问答 FAQs

部署后页面刷新出现 404 Not Found 错误，但首页和通过路由跳转的页面正常，这是为什么？

解答： 这是 Vue Router 使用 history 模式时的典型问题，当用户直接访问或在 https://your_domain.com/about 这样的子路由刷新页面时，浏览器会向服务器请求 /about 这个路径的文件，但服务器上实际上并不存在 about.html 这个文件，只有 index.html，服务器返回 404 错误。

解决方法： 正如上文 Nginx 配置中提到的，关键在于 location / 块中的 try_files $uri $uri/ /index.html; 指令，它的作用是：Nginx 首先尝试访问用户请求的 URI（$uri），如果找不到，再尝试访问 URI 对应的目录（$uri/），如果还是找不到，最终将请求内部重定向到 /index.html，这样，Vue Router 就能接管路由，并根据 URL 渲染出正确的组件，请确保你的 Nginx 配置文件中包含这一行。

浏览器访问网站时出现 Nginx 的 403 Forbidden 错误，可能有哪些原因？

解答： 403 Forbidden 错误表示服务器理解了请求，但拒绝执行它，通常由以下几个原因导致：

1. Nginx 配置错误： root 或 index 指令指向了错误的路径或文件，请仔细检查 /etc/nginx/conf.d/your-vue-app.conf 文件中的 root 路径是否准确无误地指向了你的 dist 文件夹。
2. 文件权限不足： Nginx 运行时使用的用户（通常是 nginx 或 apache）没有权限读取 dist 目录或其内部文件，可以尝试修改目录权限，但更推荐的方法是使用 chown 确保文件所有者正确，或者使用 chmod 赋予其他用户读权限。
3. SELinux 限制： 这是在 CentOS 上最常见的原因之一，SELinux 的安全策略可能阻止了 Nginx 进程访问非标准目录下的文件，解决方法就是执行 sudo chcon -Rt httpd_sys_content_t /path/to/your/dist 命令，为 dist 目录及其所有内容设置正确的 SELinux 文件安全上下文，允许 Web 服务器访问。