Kali使用nginx部署前后端项目

1. 明确项目结构与准备

首先，请确认你的 ~/桌面/project/blog 目录结构。常见的结构有两种，部署方式略有不同：

bash 复制代码

# 进入你的项目根目录
cd ~/桌面/project/blog
# 查看目录结构
ls -la

情况A：前后端分离（推荐结构）

bash 复制代码

blog/
├── node-mysql-api/ # Node.js后端代码（源码）
│   ├── app.js
│   └── ...
├── blog-admin/    # Vue前端后台管理系统代码
│   ├── package.json
│   ├── public/
│   └── src/
└── blog.sql      # 数据库备份文件

情况B：前后端一体（或只有后端）

bash 复制代码

blog/
├── package.json      # Node.js依赖
├── server.js         # 主入口文件
├── public/           # 构建后的前端文件（或静态文件）
└── database.sql

这里我们用前后端分离的结构

第二步：准备生产环境目录

bash 复制代码

# 1. 安装前端项目依赖
cd blog-admin
npm install

# 2. 打包前端项目生成dist文件
npm run build

# 3. 安装后端项目依赖
cd node-mysql-api
npm install

# 4. 创建项目目录 (backend-后端项目) (frontends-前端项目)
sudo mkdir -p /var/www/blog/{backend, frontends}

# 5. 可能存在多个前端项目，比如移动端、后台管理、官网等，这里在frontends里面在创建一层目录
# 后台管理系统项目
sudo mkdir -p /var/www/blog/frontends/admin
# 官网项目
sudo mkdir -p /var/www/blog/frontends/main

# 6. 复制后端文件到/var/www/blog/backend
sudo cp -r ~/桌面/project/blog/node-mysql-api/* /var/www/blog/backend/

# 7. 复制前端打包好的dist文件到/var/www/blog/frontends
sudo cp -r ~/桌面/project/blog/blog-admin/dist/* /var/www/blog/frontends/admin/

# 8. 设置所有权（将kali替换为你的实际用户名）
sudo chown -R kali:kali /var/www/blog

第三步：配置MariaDB/MySQL数据库

1. 登录数据库并创建专属数据库和用户：

bash 复制代码

sudo mariadb -u root

在打开的MariaDB命令行中执行（请根据你的项目需求修改用户密码）：

bash 复制代码

-- 创建数据库，使用utf8mb4编码以支持中文和表情符号
CREATE DATABASE blog CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 创建专属用户，并设置一个强密码
CREATE USER '用户名'@'localhost' IDENTIFIED BY '用户密码';
-- 授予新用户对blog数据库的所有权限
GRANT ALL PRIVILEGES ON blog.* TO '新建的用户名'@'localhost';
-- 刷新权限使设置生效
FLUSH PRIVILEGES;
-- 退出
EXIT;

2. 导入你已有的SQL文件：

bash 复制代码

# 假设你的SQL文件在~/桌面/project/blog/blog.sql
sudo mariadb -u root blog < /home/kali/桌面/project/blog/blog.sql
# 如果SQL文件路径不同，请修改为实际路径

第四步：部署Node.js后端

使用PM2启动并管理后端进程：

bash 复制代码

# 全局安装PM2（如果尚未安装）
sudo npm install -g pm2

# 进入后端目录（如果是分离式结构）
cd /var/www/blog/backend
# 如果是单体结构，则直接在 /var/www/blog/backend 目录下运行
npm install --production # 只安装生产环境依赖

# 启动应用
pm2 start app.js --name "blog_api"

# 设置开机自启
pm2 startup
# 执行上条命令后，会输出一行需要以sudo执行的命令，复制并执行它
pm2 save

第五步：部署Vue前端

bash 复制代码

# 第二步里面的第七小段已经完成前端部署了
# 就是打包 > 把dist包里的文件放到 /var/www/blog/frontends/admin/这个里面
sudo cp -r ~/桌面/project/blog/blog-admin/dist/* /var/www/blog/frontends/admin/

第六步：配置Nginx反向代理

我们将配置Nginx，让它同时托管前端静态文件，并将API请求转发给后端Node.js服务。

1. 创建Nginx站点配置文件

bash 复制代码

sudo vim /etc/nginx/sites-available/blog-admin

2. 写入以下配置（关键部分已注释）

bash 复制代码

server {
    # 这里写81端口是因为我的80端口是给博客的官网用的，后台管理系统就写81端口了
    listen 81;
    # 用你的Kali虚拟机IP替换，例如：192.168.1.100
    server_name 192.168.28.150;
    # 注意root路径指向你前端构建(打包)后的dist目录
    # 分离式结构：
    root /var/www/blog/frontends/blog-admin;

    index index.html;

    # 处理前端路由（Vue/React等单页应用必需）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 将 /api 开头的请求代理到Node.js后端
    location /api {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 可选：代理其他WebSocket或Socket.IO连接
    # location /socket.io/ {
    #     proxy_pass http://localhost:3000;
    #     proxy_http_version 1.1;
    #     proxy_set_header Upgrade $http_upgrade;
    #     proxy_set_header Connection "upgrade";
    # }
}

3. 启用配置并重启Nginx

bash 复制代码

# 开放上面配置的81端口，否则访问不了
sudo ufw allow 81/tcp
# 创建符号链接以启用站点
sudo ln -sf /etc/nginx/sites-available/blog-admin /etc/nginx/sites-enabled/
# 测试配置文件语法
sudo nginx -t
# 如果显示"syntax is ok"，则重启Nginx
sudo systemctl restart nginx

第七步：验证与访问

1. 检查所有服务状态

bash 复制代码

pm2 status              # 查看Node.js后端进程
sudo systemctl status nginx  # 查看Nginx状态
sudo systemctl status mariadb # 查看数据库状态

2. 获取你的Kali IP地址

bash 复制代码

ip addr show eth0 | grep inet

3. 从你的物理主机浏览器访问

在物理机浏览器中输入：http://<你的Kali IP地址>

不在继续使用后可删除站点

第1步：移除站点的启用链接（关键）

bash 复制代码

sudo rm /etc/nginx/sites-enabled/blog-admin

第2步：删除配置文件本身

bash 复制代码

sudo rm /etc/nginx/sites-available/blog-admin

第3步：测试Nginx配置

在重载Nginx前，必须测试新配置的语法是否正确。因为你现在移除了一个配置，要确保剩下的配置（比如 default 或其他站点）没有语法错误。

bash 复制代码

sudo nginx -t

如果输出 syntax is ok 和 test is successful，说明配置正确。

第4步：让更改生效

让 Nginx 重新加载配置，停用 blog-admin 站点。

bash 复制代码

sudo systemctl reload nginx
# 或者使用 restart（略微激进，但确保生效）
# sudo systemctl restart nginx

第5步：验证站点已停用

方法A：访问你原来的博客地址 http://192.168.28.150，现在应该会看到 Nginx 默认页面或 502/404 错误（取决于你是否还有其他有效配置）。

方法B：列出当前已启用的所有站点，确认 blog-admin 链接已消失。

bash 复制代码

ls -l /etc/nginx/sites-enabled/

后续影响与注意事项

后端API服务不受影响：你的 Node.js 后端（由 PM2 管理的 blog_api）会继续在 3000 端口运行。只是 Nginx 不再将 /api 请求转发给它，外部也无法再访问到前端页面。
PM2进程仍在运行：如果需要停止后端，请手动操作：

bash 复制代码

pm2 stop blog_api
pm2 delete blog_api

文件安全：此操作只删除 Nginx 的配置文件，你的前端文件（/var/www/blog/frontends/admin/dist/）和后端源代码都完好无损。
如果你只是"停用"而不是"删除"，那么只执行第1步（移除 sites-enabled 里的链接）就够了，这样配置文件还保留在 sites-available 中，未来可以重新启用。

要安全停用并删除一个 Nginx 站点，核心流程是：移除启用链接 → 删除配置文件 → 测试并重载 Nginx。

故障排查要点

问题现象	可能原因	排查命令
502 Bad Gateway	Node.js后端未启动或端口不对	pm2 list, sudo ss -tulnp
404 Not Found	Nginx root目录路径错误	ls -la /var/www/blog/frontend/dist (确认目录存在)
数据库连接错误	.env文件配置错误或数据库用户无权	sudo mariadb -u blog_user -p (测试登录)
静态文件加载失败	文件权限不足	sudo chmod -R 755 /var/www/blog