前端项目部署步骤全解

1. 通过 SSH 登录服务器

2. 安装 NVM

在 CentOS 系统中，可以通过以下命令安装 NVM（Node Version Manager）：

复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

安装完成后，需要重新加载 Shell 环境以生效：

复制代码

source ~/.bashrc

验证 NVM 是否安装成功：

复制代码

nvm --version

使用 NVM 安装 Node.js

安装最新版本的 Node.js（包含 npm）：

复制代码

nvm install node

如果需要安装特定版本的 Node.js，例如 22.18.0：

复制代码

nvm install 22.18.0

切换 Node.js 版本

列出已安装的 Node.js 版本：

复制代码

nvm ls

验证 Node.js 和 npm 安装

检查 Node.js 版本：

复制代码

node -v

检查 npm 版本：

复制代码

npm -v

3. 安装 Nginx

安装命令：

复制代码

sudo yum -y install nginx

运行 Nginx：

复制代码

sudo systemctl start nginx

查看 Nginx 状态：

复制代码

sudo systemctl status nginx

设置开机启动 Nginx：

复制代码

sudo systemctl enable nginx

配置 Nginx：

配置前查一下服务器哪些端口被占用了：

复制代码

netstat -ntlp

将 Nginx 配置文件上传到指定目录：

复制代码

/etc/nginx/conf.d/

重新加载 Nginx（此时，如果前端项目文件未上传，可能会报错）：

复制代码

sudo nginx -s reload

注：有些 Linux 系统会启用SELinux，Nginx 启用失败。解决方案如下：

关闭 SELinux：

复制代码

sudo setenforce 0

然后重启 Nginx：

复制代码

systemctl restart nginx

Rocky 服务器部署前端静态项目的注意点：

关闭 SELinux，以使得 Nginx 配置生效：

复制代码

sudo setenforce 0

打开对应端口防火墙：

复制代码

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent

reload 防火墙（特别重要）：

复制代码

sudo firewall-cmd --reload

确认端口已开放：

复制代码

sudo firewall-cmd --list-all

修改前端项目文件的读取权限：

新建文件夹：

复制代码

sudo mkdir -p /path/to/your/site

检查文件所有权和权限：

复制代码

sudo ls -la /path/to/your/site

注意：一定要从根目录开始查看权限

如果需要修改权限：修改权限也要从根目录修改！！！

复制代码

sudo chmod 755 /path/to/your/site

验证是否 Nginx 能访问到目录：

复制代码

sudo -u nginx ls /path/to/your/site

4. 通过文件上传工具，将打包好的前端文件上传至指定目录（需要与 Nginx 配置文件中的位置一致）

5. 进入到对应的目录

复制代码

cd xxx/xxx

6. 解压前端文件包

复制代码

unzip xx.zip

7. 重新加载 nginx 配置文件

复制代码

nginx -s reload

8. 测试是否成功

测试地址：

复制代码

http://服务端IP:端口号