摘要：开发完成只是第一步，上线才是硬道理。本文是为后端小白准备的“保姆级”部署教程。我们将在一台全新的 Ubuntu 服务器上，搭建 Node.js 环境、MySQL 数据库，使用 PM2 守护后端进程，配合 Nginx 实现“静态官网+子路径后台+后端API”在同一域名下的完美共存，并加上一把 HTTPS 的绿锁。
学习之前先浏览 前置专栏文章
基本的部署步骤在第四篇文章,pm2部署到服务器已经有基本的配置了，已经在服务器安装了nginx node nvm pm2 和数据库，也创建了数据库叫mydb_prod，也上传了一个sql文件到服务器的/tmp目录。接下来要对sql文件进行更新，并且对nginx重新配置。
步骤一：登录服务器链接数据库
-
先登录服务器 ssh root@47.101.129.155 输入密码
-
链接数据库
mysql -u root -p输入数据库root密码 -
在mysql workbench导出数据库的结构和初始化数据，导出sql文件，随便命名，我的命名my_db.sql
-
把导出的sql文件通过ssh命令或者FileZila客户端上传到服务器 /tmp目录下，或者其他目录也行
-
*回到服务器终端，导入表结构和本地数据到 mydb_prod 数据库，执行命令：
USE mydb_prod
SOURCE /tmp/my_db.sql
上面的命令是在服务器终端执行my_db.sql的所有sql语句，包括创建表和导入初始化数据，比如 菜单管理和管理员这个用户。
步骤二 拉取代码并部署
在服务器终端，切换到后端项目的目录：cd /root/projeccts/node-api-test 执行
git pull
npm install
再执行pm2运行 pm2 start ecosystem.config.cjs --env production
# 首次启动（生产）：
pm2 start ecosystem.config.cjs --env production
# 平滑重载（零停机
pm2 reload ecosystem.config.cjs --env production
# 完全重启
pm2 restart ecosystem.config.cjs --env production
步骤三：nginx配置
为了让前端能运行在ifxia.xyz/vue-admin-t…
修改vite.config.ts
export default defineConfig({
// 核心：设置子路径，注意前后都要有斜杠
base: '/vue-admin-template/',
// ...
})
修改src/router/index.ts：
const router = createRouter({
// 核心：路由历史模式带上基准路径
history: createWebHistory('/vue-admin-template/'),
routes: [...constantRoutes],
})
本地打包
npm run build
上传到服务器：
登录服务器，先在服务器创建目录，前面已经配置了/var/www/html为根目录
mkdir -p /var/www/html/vue-admin-template
使用 FTP/SCP 把本地dist里面的所有内容（index.html, assets 等）上传到服务器的/var/www/html/vue-admin-template/目录下。
Nginx 配置 (最终串联)
我们需要修改/etc/nginx/sites-available/ifxia.xyz.conf，
因为我们的根目录/var/www/html下有index.html 当访问域名ifxia.xyz，会访问这个index.html，但是当前的后台接口没有添加/api ，nginx配置的 / 会重定向到后台接口那里，所以当访问https://ifxia.xyz时，无法访问到index.html了，所以
打开/sites-available/ifxia.xyz.conf，完整内容如下
# HTTP 强制跳转 HTTPS (保持不变)
server {
listen 80;
server_name ifxia.xyz;
return 301 https://$host$request_uri;
}
# HTTPS 服务器
server {
listen 443 ssl;
server_name ifxia.xyz;
# SSL 配置 (保持你原来的)
ssl_certificate /etc/letsencrypt/live/ifxia.xyz/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ifxia.xyz/privkey.pem;
# 这样 /var/www/html 下的 index.html 就变成了官网
root /var/www/html;
index index.html index.htm;
# --- 1. 前端配置 (子路径) ---
location /vue-admin-template {
# 使用 alias 指向存放前端代码的实际目录
alias /var/www/html/vue-admin-template;
index index.html;
# 解决 Vue Router 刷新 404 问题
try_files $uri $uri/ /vue-admin-template/index.html;
}
# --- 2. 后端配置 (根路径) ---
# 因为你不想用 /api 前缀，所以我们将根路径直接转发给 Node
location / {
try_files $uri $uri/ @backend;
}
location @backend {
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_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
重启并验证
nginx -t
如果显示successful，继续下一步。
重启 Nginx
systemctl reload nginx
访问前端：打开浏览器访问 https://ifxia.xyz/vue-admin-template应该能看到你的登录页面。
登录测试：输入账号密码登录。*查看 F12 Network，* *请求地址应该是 https://ifxia.xyz/auth/login*
现在，你的服务器处理逻辑变成了这样：
访问 https://ifxia.xyz/
Nginx 检查 /var/www/html/index.html 是否存在？ -> 存在。
结果：直接显示你的官网介绍页面。
访问 https://ifxia.xyz/style.css (假设官网有样式)
Nginx 检查 /var/www/html/style.css 是否存在？ -> 存在。
结果：返回 CSS 文件。
访问 https://ifxia.xyz/auth/login (后端接口)
Nginx 检查 /var/www/html/auth/login 文件是否存在？ -> 不存在。
Nginx 检查 /var/www/html/auth/login/ 目录是否存在？ -> 不存在。
结果：触发 @backend 规则，请求被转发给 localhost:3000，Node.js 处理并返回登录结果。
访问 https://ifxia.xyz/vue-admin-template
匹配到 location /vue-admin-template。
结果：显示 Vue 后台管理系统。
这样，官网、后台、API就在同一个域名、同一个端口下完美共存了！
